Создание приложения веб-чата на Silverlight 2 - Пользовательские управляющие элементы XAML
ОГЛАВЛЕНИЕ
Пользовательские управляющие элементы XAML
В Silverlight 2 есть три базовых контейнерных управляющих элементов XAML; Canvas, StackPanel и Grid. В этом проекте используются управляющие элементы Grid и StackPanel. Grid работает как таблица HTML; вместо использования TR для строк и TD для столбцов она использует RowDefinitions и ColumnDefinitions соответственно. StackPanel может хранить другие управляющие элементы XAML в пачке горизонтальной или вертикально. Дополнительные сведения об этих управляющих элементах смотрите на сайте Silverlight: http://www.silverlight.net.
Login.xaml
Ниже показан код пользовательского интерфейса XAML, генерирующий простую форму входа, показанную выше. Все управляющие элементы XAML заключены в управляющий элемент Grid. Расположение управляющих элементов ясно из зеленых комментариев. Надо отметить несколько вещей:
1. Все управляющие элементы сообщений об ошибках скрытые, помеченные как Visibility="Collapsed". Видимость сообщений об ошибках контролируется в отделенном коде.
2. Для имитации управляющих элементов проверки правильности ASP.NET были добавлены события LostFocus и MouseEnter в управляющие элементы имени пользователя и пароля.
<UserControl x:Class="Silverlight2Chat.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="510" Height="118">
<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="10" /> <!-- отступ -->
<RowDefinition Height="26" /> <!—имя пользователя -->
<RowDefinition Height="6" /> <!-- отступ -->
<RowDefinition Height="26" /> <!-- пароль -->
<RowDefinition Height="10" /> <!-- отступ -->
<RowDefinition Height="30" /> <!-- кнопка -->
<RowDefinition Height="6" /> <!-- отступ -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" /> <!-- отступ -->
<ColumnDefinition Width="80" /> <!-- надписи -->
<ColumnDefinition Width="10" /> <!-- отступ -->
<ColumnDefinition Width="200" /> <!—управляющие элементы -->
<ColumnDefinition Width="10" /> <!-- отступ -->
<ColumnDefinition Width="*" /> <!—сообщения об ошибках -->
<ColumnDefinition Width="10" /> <!-- отступ -->
</Grid.ColumnDefinitions>
<!-- надписи -->
<TextBlock Text="User Name:" Grid.Row="1"
Grid.Column="1" FontSize="12"
VerticalAlignment="Center" />
<TextBlock Text="Password:" Grid.Row="3"
Grid.Column="1" FontSize="12"
VerticalAlignment="Center" />
<!-- управляющие элементы -->
<TextBox x:Name="TxtUserName" Grid.Row="1"
Grid.Column="3" FontSize="12" BorderThickness="2"
LostFocus="TxtUserName_LostFocus" MouseEnter="TxtUserName_MouseEnter" />
<PasswordBox x:Name="PbxPassword" Grid.Row="3"
Grid.Column="3" FontSize="12" BorderThickness="2"
LostFocus="PbxPassword_LostFocus"
MouseEnter="PbxPassword_MouseEnter" />
<Button x:Name="BtnLogin" Grid.Row="5"
Grid.Column="3" Content="Login"
FontSize="12" Click="BtnLogin_Click" />
<!-- сообщения об ошибках -->
<TextBlock x:Name="TxtbUserNameRequired" Text="User Name is Required!"
Foreground="Red" Grid.Row="1" Grid.Column="5"
FontSize="12" VerticalAlignment="Center" Visibility="Collapsed" />
<TextBlock x:Name="TxtbPasswordRequired"
Text="Password is Required!" Foreground="Red"
Grid.Row="3" Grid.Column="5" FontSize="12"
VerticalAlignment="Center" Visibility="Collapsed" />
<TextBlock x:Name="TxtbNotfound" Text="Invalid Username or Password!"
Foreground="Red" Grid.Row="5" Grid.Column="5"
FontSize="12" VerticalAlignment="Center"
Visibility="Collapsed" />
</Grid>
</UserControl>
Когда пользователь нажимает кнопку «Войти», переменная, сообщающая, что пользователь уже нажал кнопку «Войти» хотя бы один раз, устанавливается в истину. Это помогает проверить правильность управляющего элемента имени пользователя или пароля на стороне клиента с помощью событий LostFocus и MouseEnter, без необходимости для пользователя повторно нажимать кнопку «Войти», тем самым имитируя управляющие элементы проверки правильности ASP.NET перед фактической проверкой правильности имени пользователя и пароля на сервере.
24 private void BtnLogin_Click(object sender, RoutedEventArgs e)
25 {
26 _isLoginButtonClicked = true;
27 ValidateUserName();
28 ValidatePassword();
29
30 if (!String.IsNullOrEmpty(TxtUserName.Text) &&
!String.IsNullOrEmpty(PbxPassword.Password))
31 {
32 // проверить правильность пользователя на основе имени пользователя и пароля
33 ValidateUser();
34 }
35 }
Методы ValidateUserName и ValidatePassword только проверяют, являются ли поля имени пользователя и пароля пустыми, затем соответственно показывают или скрывают сообщение об ошибке.
49 private void ValidateUserName()
50 {
51 if (String.IsNullOrEmpty(TxtUserName.Text))
52 TxtbUserNameRequired.Visibility = Visibility.Visible;
53 else
54 TxtbUserNameRequired.Visibility = Visibility.Collapsed;
55 }
56
57 private void ValidatePassword()
58 {
59 if (String.IsNullOrEmpty(PbxPassword.Password))
60 TxtbPasswordRequired.Visibility = Visibility.Visible;
61 else
62 TxtbPasswordRequired.Visibility = Visibility.Collapsed;
63 }
В методе ValidateUser используется служба WCF (Windows Communication Foundation – служба обмена данными между приложениями) для проверки правильности имени пользователя и пароля, введенных пользователем. Если пользователь найден в базе данных, то пользователь перенаправляется в раздел чата XAML; если нет – показывается сообщение об ошибке. К этому стоит вернуться позже, но сначала надо рассмотреть службу WCF.