导言
了解了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
每次记录一小步...点点滴滴人生路...