Hello,大家好,我是若汝棋茗,今天让我来给大家水一篇WPF窗口的博客。
先看效果图
还比较满意吧,那就让我们开始吧!!
首先引入RRQMSkin包,因为窗体有圆角,并且需要改变尺寸,所以使用RRQMEffectWindow来实现。
然后修改window继承类为RRQMEffectWindow,后台代码一致。
然后,重写RRQMEffectWindow模板。
<Style x:Key="MainWindowStyle" TargetType="{x:Type Custom:RRQMEffectWindow}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Custom:RRQMEffectWindow}">
<Grid x:Name="windowGrid">
<Border x:Name="mainBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition />
</Grid.RowDefinitions>
<Border Background="#667B85" CornerRadius="10,10,0,0" />
<Grid x:Name="header" Grid.Row="0" Panel.ZIndex="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="title" Background="Transparent" />
<StackPanel Grid.Column="1" VerticalAlignment="Top" Orientation="Horizontal">
<Button x:Name="closeButton" Content=""
Command="{Binding CloseWindowCommand, RelativeSource={RelativeSource TemplatedParent}}">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="/RRQMSkin;component/Fonts/#iconfont" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="3" Background="Transparent" BorderThickness="1" Height="25"
Margin="5" Width="25">
<TextBlock Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
Text="{TemplateBinding Content}"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FFE9E3B1" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="BorderBrush" TargetName="border" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</StackPanel>
</Grid>
<AdornerDecorator x:Name="content" HorizontalAlignment="Stretch" Grid.Row="1" Grid.RowSpan="2" VerticalAlignment="Stretch">
<ContentPresenter Content="{TemplateBinding Content}"
HorizontalAlignment="Stretch"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Stretch" />
</AdornerDecorator>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
然后写窗体内容布局代码。
<Win:RRQMEffectWindow x:Class="SimpleLoginWindow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:SimpleLoginWindow"
xmlns:Win="若汝棋茗_Windows"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="500" CornerRadius="10" Style="{DynamicResource MainWindowStyle}">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<TextBlock Text="用户名" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0"/>
<TextBox Grid.Column="1" VerticalAlignment="Center" Style="{DynamicResource TextBoxStyle}"/>
<TextBlock Text="密码" HorizontalAlignment="Right" Grid.Row="1" VerticalAlignment="Center" Margin="0,0,10,0"/>
<TextBox Grid.Column="1" Grid.Row="1" VerticalAlignment="Center" Style="{DynamicResource TextBoxStyle}"/>
<CheckBox Content="记住我" Grid.Row="2" Grid.Column="1" VerticalAlignment="Center"/>
<TextBlock Text="忘记密码?" Grid.Row="2" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" Style="{DynamicResource TextBlockStyle}"/>
<Button Grid.Column="1" Grid.Row="3" Width="100" Height="40" Content="登录" HorizontalAlignment="Left" Style="{DynamicResource ButtonStyle}"/>
</Grid>
</Win:RRQMEffectWindow>
最后对TextBox,Button重写模板,TextBlock重写样式。
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<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}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="2"/>
</Grid.RowDefinitions>
<Decorator x:Name="PART_ContentHost" Focusable="false"/>
<ProgressBar x:Name="progressBar" Grid.Row="1"/>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="GotKeyboardFocus">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="progressBar" Storyboard.TargetProperty="Value" To="100" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="LostKeyboardFocus">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="progressBar" Storyboard.TargetProperty="Value" To="0" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="20" SnapsToDevicePixels="true">
<Border.Background>
<SolidColorBrush x:Name="solidColor" Color="#57B846"/>
</Border.Background>
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="solidColor" Storyboard.TargetProperty="Color" To="#333333" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="solidColor" Storyboard.TargetProperty="Color" To="#57B846" Duration="0:0:0.5"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="TextTrimming" Value="None"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextDecorations" Value="None"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="TextDecorations" Value="Underline"/>
</Trigger>
</Style.Triggers>
</Style>
完工
好了今天的分享就到这里,源码在Gitee主页ShareProjects仓库中,如果有其他想法的猿友可以来我们动物园看看喔。