WPF 使用MaterialDesign做一个漂亮的登录页面

导言

了解了Material Design之后，好用和效果真的很棒，就做了一个登录页面作为练习。废话不多说，直接开整...

 

Have a look

其动画更加丰富的...

 

环境搭建

直接参考https://mp.csdn.net/postedit/99816982里面的“使用部分”

 

XAML源代码

<Window.Resources>
        <SolidColorBrush x:Key="InputBoxHintAssistForegorundBrush" Color="Purple">

        </SolidColorBrush>

        <Style x:Key="InputIcon" TargetType="materialDesign:PackIcon">
            <Setter Property="Height" Value="30"/>
            <Setter Property="Width" Value="30"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>

        <LinearGradientBrush x:Key="SkyBrush" StartPoint="0 0" EndPoint="0 1">
            <GradientStop Color="#2196F3" Offset="0"/>
            <GradientStop Color="#2196F3" Offset=".6"/>
            <GradientStop Color="#00E676" Offset=".6"/>
            <GradientStop Color="#00E676" Offset="1"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="GroundBrush" StartPoint="0 0" EndPoint="0 1">
            <GradientStop Color="#552196F3" Offset="0"/>
            <GradientStop Color="#FFFFFF" Offset=".3"/>
            <GradientStop Color="#00E676" Offset="1"/>
        </LinearGradientBrush>


    </Window.Resources>


    <Grid Background="{StaticResource SkyBrush}">
        <Grid Height="500" Background="{StaticResource GroundBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="2.45*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <materialDesign:Card Grid.Row="0" Grid.RowSpan="2" 
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                 Width="360"
                                 Height="266"
                                Padding="10"  >

                <StackPanel Margin="0 30 0 0">

                    <Grid Margin="0 10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30"/>
                            <ColumnDefinition Width="30"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="30"/>
                        </Grid.ColumnDefinitions>

                        <materialDesign:PackIcon Grid.Column="1"  Kind="UserBox" Style="{StaticResource InputIcon}"/>
                        <TextBox Grid.Column="2" Padding="10 0"
                              MaxLength="11"
                              materialDesign:HintAssist.Hint="用户"
                              materialDesign:HintAssist.Foreground="{StaticResource InputBoxHintAssistForegorundBrush}"
                              materialDesign:TextFieldAssist.UnderlineBrush="{StaticResource InputBoxHintAssistForegorundBrush}"
                             materialDesign:HintAssist.FloatingScale="0.6"
                              Text=""
                              Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                              FontSize="20" />
                    </Grid>

                    <Grid Margin="0 10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30"/>
                            <ColumnDefinition Width="30"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="30"/>
                        </Grid.ColumnDefinitions>

                        <materialDesign:PackIcon Grid.Column="1" Kind="ShieldKey" Style="{StaticResource InputIcon}"/>

                        <PasswordBox Grid.Column="2" Padding="10 0"
                                  x:Name="FloatingPasswordBox"
                                 MaxLength="11"
                                  materialDesign:HintAssist.Hint="密码"
                                  materialDesign:HintAssist.Foreground="{StaticResource InputBoxHintAssistForegorundBrush}"
                                  materialDesign:TextFieldAssist.UnderlineBrush="{StaticResource InputBoxHintAssistForegorundBrush}"
                                  materialDesign:HintAssist.FloatingScale="0.6"
                                  Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" 
                                  FontSize="20" />
                    </Grid>

                    <WrapPanel HorizontalAlignment="Right" Margin="0 10 30 30">
                        <CheckBox Content="记住密码"
                                  Margin="16 4 16 0"
                                  Style="{StaticResource MaterialDesignUserForegroundCheckBox}">
                        </CheckBox>
                        <CheckBox Content="自动登录"
                                  Margin="16 4 0 0"
                                  Style="{StaticResource MaterialDesignUserForegroundCheckBox}">
                        </CheckBox>

                    </WrapPanel>

                </StackPanel>
            </materialDesign:Card>


            <Grid Grid.Row="1" Height="50" VerticalAlignment="Top" Width="120" >
                <Button IsDefault="True"
                    FontSize="20"
                    Style="{StaticResource MaterialDesignRaisedDarkButton}"
                    Height="50" Click="Login_Clicked"
                    materialDesign:ButtonAssist.CornerRadius="25">
                    <TextBlock
                        Text="登录" />
                </Button>
            </Grid>

        </Grid>
    </Grid>

喜欢的朋友，直接贴上去就可以看到效果了。很简单，源代码就不贴了。以后去整个GitHub账号分享自己的代码。

 

Over

每次记录一小步...点点滴滴人生路...