WPF漂亮的窗体样式、按钮样式、复选框样式
<!--窗体样式-->
<ControlTemplate x:Key="WindowTemplateKey" TargetType="{x:Type Window}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
<ResizeGrip x:Name="WindowResizeGrip" HorizontalAlignment="Right" VerticalAlignment="Bottom" IsTabStop="false" Visibility="Collapsed"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanResizeWithGrip"/>
<Condition Property="WindowState" Value="Normal"/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="WindowResizeGrip" Value="Visible"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="WindowControlRectangleTemplate" TargetType="{x:Type Window}">
<Border Background="{TemplateBinding Background}" BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" >
<Border.BorderBrush>
<ImageBrush ImageSource="/Kb.UsControls;component\Images\bgtop.png"></ImageBrush>
</Border.BorderBrush>
<Grid Width="Auto" Height="Auto" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border x:Name="topborder" Margin="0" Grid.Column="0" BorderBrush="{x:Null}" BorderThickness="0" CornerRadius="0,0,0,0" Grid.ColumnSpan="1">
<Border.Background>
<ImageBrush ImageSource="/Kb.UsControls;component/images/bgtop.png"></ImageBrush>
</Border.Background>
<Grid HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Width="Auto" Height="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9.27"/>
<ColumnDefinition Width="137.397"/>
<ColumnDefinition/>
<ColumnDefinition Width="28.207"/>
<ColumnDefinition Width="0"/>
<ColumnDefinition Width="27.398"/>
<ColumnDefinition Width="7.586"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="0,0,0,-8" Name="txtTile" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" FontFamily="微软雅⿊" Height="25" Width="122" FontSize="12" Foreground="White"/>
<Button x:Name="btnMin" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="2.668,2.795,2.777,3.776" Content="-" Style="{StaticResource ButtonMini}" Height="25" Width="30" Grid.Column="3" FontWeight= <Button x:Name="btnClose" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="2.668,2.795,1.968,3.776" Content="×" Style="{StaticResource ButtonClose}" Height="25" Width="30" FontWeight="Bold
</Grid>
</Border>
<Grid Margin="0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<ContentPresenter HorizontalAlignment="Stretch" Margin="0" Width="Auto" Grid.Column="0" Grid.ColumnSpan="1" Grid.RowSpan="1"/>
</Grid>
</Grid>
</Border>
</ControlTemplate>
<Style x:Key="WindowRectangleStyle" TargetType="{x:Type Window}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="Template" Value="{StaticResource WindowControlRectangleTemplate}"/>
<Style.Triggers>
<Trigger Property="ResizeMode" Value="CanResizeWithGrip">
<Setter Property="Template" Value="{StaticResource WindowTemplateKey}"/>
</Trigger>
</Style.Triggers>
</Style>
<!--登录按钮样式-->
<Style x:Key="ButtonOther" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
columnspan是什么意思<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="columnDefinition1" Width="0.982*"/>
<ColumnDefinition x:Name="columnDefinition" Width="0.018*"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="rectangle" Stroke="{x:Null}" Fill="#dfa854" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding V </Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="#dfa854"/>
</Trigger>
<Trigger Property="IsDefaulted" Value="True">
<Setter Property="Fill" TargetName="rectangle" Value="#dfa854"/>
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="#efbc6e"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="#dfa854"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--最⼩化按钮样式-->
<Style x:Key="ButtonMini" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="columnDefinition1" Width="0.982*"/>
<ColumnDefinition x:Name="columnDefinition" Width="0.018*"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="rectangle" Stroke="{x:Null}" Fill="{x:Null}" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding V </Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsDefaulted" Value="True">
<Setter Property="Fill" TargetName="rectangle" Value="#00a1da"/>
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="#00a1da"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="#3e86cc"/>
<Setter Property="Width" TargetName="columnDefinition" Value="Auto"/>
<Setter Property="MinWidth" TargetName="columnDefinition" Value="0"/>
<Setter Property="Width" TargetName="columnDefinition1" Value="*"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--关闭按钮样式-->
<Style x:Key="ButtonClose" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="columnDefinition1" Width="0.982*"/>
<ColumnDefinition x:Name="columnDefinition" Width="0.018*"/>
</Grid.ColumnDefinitions>
<!--RadiusY="2" RadiusX="2"圆⾓属性-->
<Rectangle x:Name="rectangle" Stroke="{x:Null}" Fill="{x:Null}" Grid.ColumnSpan="1" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding V </Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsDefaulted" Value="True">
<Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="#d44027"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="#3e86cc"/>
<Setter Property="Width" TargetName="columnDefinition" Value="Auto"/>
<Setter Property="MinWidth" TargetName="columnDefinition" Value="0"/>
<Setter Property="Width" TargetName="columnDefinition1" Value="*"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- 复选框样式 -->
<Style TargetType="CheckBox">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="#FFFFBA00"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Padding" Value="4,1,0,0"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="#dcdcdc"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<!--<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddleBackground" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>-->
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#e9e9ef"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<!--<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddleBackground" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>-->
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/>
</ColorAnimationUsingKeyFrames>
<!--<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>-->
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="0.55"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="CheckStates">
<vsm:VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unchecked"/>
<vsm:VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<!--<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentFocusVisualElement" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>-->
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="grid">
<Rectangle Height="18" Margin="1" x:Name="Background" Width="18" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" RadiusX="1" RadiusY="1" Fill="{x:Null}"/>
<Rectangle Height="18" Margin="1" x:Name="BackgroundOverlay" Width="18" Opacity="0" Fill="{StaticResource NormalBrush}" Stroke="#00000000" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
<Rectangle Height="14" x:Name="BoxMiddleBackground" Width="14" Fill="{TemplateBinding Background}" Stroke="#00000000" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
<Rectangle Height="14" x:Name="BoxMiddle" Width="14" StrokeThickness="1" RadiusX="1" RadiusY="1" Stroke="{x:Null}">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.64,0.88" StartPoint="0.62,0.15">
<GradientStop Color="#FFFFFFFF" Offset="0.013"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#EAFFFFFF" Offset="0.603"/>
<GradientStop Color="#D8FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Height="14" x:Name="BoxMiddleLine" Width="14" Opacity=".4" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" RadiusX="1" RadiusY="1"/>
<Path Height="14" Margin="1,1,0,1.5" x:Name="CheckIcon" Width="14.5" Opacity="0" Fill="Green" Stretch="Fill" Data="M102.03442,598.79645 L105.22962,597.78918 L106.78825,600.42358 C106.78825,600.42358 108.51028 <!--<Rectangle Height="2" x:Name="IndeterminateIcon" Width="6" Opacity="0" Fill="#FF333333"/>
<Rectangle Height="14" x:Name="DisabledVisualElement" Width="14" Opacity="0" Fill="#FFFFFFFF" RadiusX="1" RadiusY="1"/>-->
<!--<Rectangle Height="16" x:Name="ContentFocusVisualElement" Width="16" IsHitTestVisible="false" Opacity="0" Stroke="{StaticResource HighlightBrush}" StrokeThickness="1" RadiusX="2" RadiusY="2"/>-->
</Grid>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
以上代码是窗体各个控件的样式源码和效果图,简单的样式其实不复杂,但是如果想要界⾯效果惊艳⼀些;就需要使⽤微软的另⼀个⼯具Microsoft Expression Blend 4去画⾃⼰
想实现呈现的效果。在学⽣时代总是想做出好看的样式,现在也算是得偿所愿;毕竟在外磨练了⼏年有⼀定的经验积累,话不多少,附上源码:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论