WPF登录界面设计

用wpf设计一个宠物之家登录界面：

 

 在window.resource中添加控制模板：

//关闭按钮       
 <ControlTemplate TargetType="Button" x:Key="CloseButtonTemplate">
            <Border Background="Transparent" Name="back">
                <Path Data="M0 0 12 12M0 12 12 0" Stroke="White" StrokeThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="back" Property="Background" Value="#22FFFFFF"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="back" Property="Background" Value="#44FFFFFF"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

//登录按钮控制面板       
<ControlTemplate TargetType="Button" x:Key="LoginButtonTemplate">
            <Border Background="LightPink" Width="310" Height="30" CornerRadius="5">
                <ContentControl Content="{TemplateBinding Content}"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Foreground="{TemplateBinding Foreground}"/>
            </Border>
            
        </ControlTemplate>

//用户名文本框模板
 x:Key="UserNameTextBoxStyle" BasedOn="{StaticResource InputElementBaseStyle}" TargetType="{x:Type TextBox}">
            <Setter Property="CaretBrush" Value="{DynamicResource PrimaryTextBrush}"/>
            <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <hc:SimplePanel x:Name="root">
                            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{Binding (hc:BorderElement.CornerRadius), RelativeSource={RelativeSource Mode=TemplatedParent}}" SnapsToDevicePixels="True"/>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="40"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="&#xe61c;" FontFamily="../Assets/Fonts/#iconfont" 
                                           FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#DDD"/>
                                <ScrollViewer x:Name="PART_ContentHost" Grid.Column="1"
                                              Focusable="false" 
                                              ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                                              ScrollViewer.VerticalScrollBarVisibility="Hidden"
                                              VerticalContentAlignment="Center" 
                                              MinHeight="20"/>
                            </Grid>
                        </hc:SimplePanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="root" Value="0.4"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" Value="{DynamicResource SecondaryBorderBrush}"/>
                            </Trigger>
                            <Trigger Property="IsFocused" Value="true">
                                <Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style

插入iconfont图标，在鼠标悬浮时显示不同颜色：

                <UniformGrid Columns="5" Grid.Row="1">
                    <UniformGrid.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="Foreground" Value="Gray"/>
                            <Setter Property="VerticalAlignment" Value="Center"/>
                            <Setter Property="FontFamily" Value="../Assets/Fonts/#iconfont"/>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Foreground" Value="LightPink"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </UniformGrid.Resources>
                    <TextBlock Text="&#xe74b;" FontSize="40" HorizontalAlignment="Right" />
                    <Border/>
                    <TextBlock Text="&#xe856;" FontSize="45" HorizontalAlignment="Center"/>
                    <Border/>
                    <TextBlock Text="&#xe64c;" FontSize="40" HorizontalAlignment="Left" />
                </UniformGrid>