First WPF application – simple login

I am trying to make an application with WPF( I do not have done this experiment before – windows forms were too easy).

First attempt is to create a control for userlogin – a user can have name, password, and – if registers – email.

All is done declaratively – but what effort! Let’s see:

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<Window x:Class="KinectAntiTheft.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:KinectAntiTheft_BL;assembly=KinectAntiTheft_BL"
        xmlns:ka="clr-namespace:KinectAntiTheft"
        Title="MainWindow" Height="350" Width="525" >
<Window.DataContext>
        <local:LoginViewModel />
    </Window.DataContext>
    <Window.Resources>
        <Style x:Key="errStyleLabel" TargetType="Label">
            <Setter Property="Background" Value="Red" />
            <Setter Property="FontStyle" Value="Italic" />
        </Style>
        <BooleanToVisibilityConverter x:Key="boolToVisibilityConverter" />
        <ObjectDataProvider MethodName="GetValues" ObjectType="{x:Type sys:Enum}" x:Key="UserRegMode">
 
            <ObjectDataProvider.MethodParameters>
 
                <x:Type TypeName="local:Mode" />
 
            </ObjectDataProvider.MethodParameters>
 
        </ObjectDataProvider>
 
    </Window.Resources>
    <Grid Name="MainGrid" Margin="2" >
        <Grid.RowDefinitions>
            <RowDefinition Height="37*" />
            <RowDefinition Height="82*" />
            <RowDefinition Height="63*" />
            <RowDefinition Height="58*" />
            <RowDefinition Height="67*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="92*" />
            <ColumnDefinition Width="407*"/>
        </Grid.ColumnDefinitions>
        <Label Content="UserName" Grid.Row="1" Height="28" HorizontalAlignment="Left" Margin="12,15,0,0" Name="lblUserName" VerticalAlignment="Top" />
        <TextBox Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="32,20,0,0" Name="txtUserName" VerticalAlignment="Top" Width="339"
                 Text="{Binding Path=User.UserName, Mode=TwoWay, ValidatesOnDataErrors=True,UpdateSourceTrigger=PropertyChanged}"
                 />
        <Label Content="Password" Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" Name="lblPassword" VerticalAlignment="Top" Grid.Row="2" />
 
        <PasswordBox Height="23" HorizontalAlignment="Left" Margin="32,26,0,0" Name="txtPassword" VerticalAlignment="Top" Width="339" Grid.Column="1" Grid.Row="2"
                 ka:PasswordBoxAssistant.BindPassword="True"
                ka:PasswordBoxAssistant.BoundPassword="{Binding Path=User.UserPassword, Mode=TwoWay, ValidatesOnDataErrors=True,UpdateSourceTrigger=PropertyChanged}"
                 />
        <Button Content="Login" Grid.Column="1" Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="32,32,0,0" Name="btnLogin" VerticalAlignment="Top" Width="75" CommandParameter="{Binding Path=User}" Command ="{Binding Path=LoginCommand, UpdateSourceTrigger=PropertyChanged}"/>
        <Label Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="32,5,0,0" Name="lblError" Content="{ Binding Path=Error, Mode=TwoWay}" VerticalAlignment="Top" Width="200" Style="{StaticResource errStyleLabel}" Visibility="{Binding Path=IsError, Converter={StaticResource boolToVisibilityConverter}}" />
        <ComboBox Height="23" HorizontalAlignment="Left" Margin="5,5,0,0" Name="cmbMode" VerticalAlignment="Top" Width="72"
                  ItemsSource="{Binding Source={StaticResource UserRegMode }}"   SelectedValue="{Binding Path=User.ModeUser}" />
        <Label Content="Email" Height="28" HorizontalAlignment="Left" Margin="17,22,0,0" Name="lblEmail" VerticalAlignment="Top" Grid.Row="3" Visibility="{Binding Path=User.IsRegister, Converter={StaticResource boolToVisibilityConverter}}" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="32,22,0,0" Name="txtEmail" Text="{Binding Path=User.UserEmail, Mode=TwoWay, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="339" Grid.Column="1" Grid.Row="3" Visibility="{Binding Path=User.IsRegister, Converter={StaticResource boolToVisibilityConverter}}" />
    </Grid>
</Window>

I will point just several ideas:

  1. If the data comes from other assembly, just put xmlns:local="clr-namespace:<other namespace>;assembly=<other assembly>"
  2. If  you want to make visible/invisible a controle, it is not enough to put visible * you must also use a converter 
    Visibility="{Binding Path=IsError, Converter={StaticResource boolToVisibilityConverter}}"
  3. Use DelegateCommands from Prism . http://compositewpf.codeplex.com/
  4. PasswordBox can not have it’s Password property binded. You can either transfer all textbox, or break security and add attached property
  5. You can have enum binded to a combobox and, more, translate into resources
  6. Do not forget to raise property changed ! – it is a PIA  – but, hey, it is fun on GUI

Final Conclusion: WPF is a mature technology – and there are enough resources on the internet to learn well.

S0lution for a sample login/register form you will find here :login wpf