WPF_Style风格

                     WPF_Style风格

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： Visual Studio 2015 * SQL Server

作者：

撰写时间：2019年01月01日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在WPF中会有自己的WPF控件，我们可以定义一个模板来替换控件的默认模板以便打造个性化的控件，可以使用Style来改变控件的某些属性值，来达到我们想要的效果。如果说我们想将窗口的所有按钮都保持某一种风格，那么我们可以设置一个Style，整合到资源字典中。

 

样式：（1）、被声明在Window.Resources中说明它的有效范围是当前窗体；

1. 、被整合到资源字典里面，有效范围是整个解决方案；
2. 、为Style添加一个x：key，按钮使用到样式：

     Style=”{StaticResource ButtonStyle}”

   

    如图使用Gird布局，一个Button按钮，可以通过写代码或者从工具箱中直接拖出控件。

<Grid>

     <Button Margin="281,10,0,2" Width="40" Height="40" x:Name="btn_Reset" Content="重置"/>

</Grid>

                                                                

 

以下通过重构Button的模板：

1. 定义动画资源：用Key标记一下，通过关键帧动画设置它的BeginTime，TargetName，TargetProperty值；
2. 定义视觉树：Button基本的样式，设置按钮的样式、边框等，通过设置圆形梯度画刷来实现动画。
3. 定义触发器：ControlTemplate（WPF的每一个控件都有一个默认的模板，该模板描述了控件的外观以及外观对外界刺激所做出的的反应。）

 

     <Style TargetType="{x:Type Button}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="Button">

                    <!--定义动画资源-->

                    <ControlTemplate.Resources>

                        <Storyboard x:Key="Timeline1">

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">

                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>

                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>

                        <Storyboard x:Key="Timeline2">

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">

                                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>

                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>

                    </ControlTemplate.Resources>

                    <!--定义动画资源 end-->

                   

                    <!--定义视觉树-->

                    <Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="3,3,3,3">

                        <!--小按钮的样式-->

                        <Border x:Name="border" Background="Pink" BorderBrush="White" BorderThickness="1,1,1,1" CornerRadius="3,3,3,3">

                            <Grid>

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="0.507*"/>

                                    <RowDefinition Height="0.493*"/>

                                </Grid.RowDefinitions>

                                <!--边框-->

                                <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="0,0,0,0">

                                    <Border.Background>

                                        <RadialGradientBrush>

                                            <RadialGradientBrush.RelativeTransform>

                                                <TransformGroup>

                                                    <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>

                                                    <SkewTransform AngleX="0" AngleY="0"/>

                                                    <RotateTransform Angle="0"/>

                                                    <!--TranslateTransform(平移变化)：

                      包含X、Y 两种属性，以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。-->

                                                    <TranslateTransform X="-0.368" Y="-0.152"/>

                                                </TransformGroup>

                                            </RadialGradientBrush.RelativeTransform>

                                            <GradientStop Color="#FFFEE9F2" Offset="0"/>

                                            <GradientStop Color="White" Offset="1"/>

                                        </RadialGradientBrush>

                                    </Border.Background>

                                </Border>

                                <!-- 模板绑定（TemplateBinding）

                                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2" Text="{TemplateBinding Content}" TextBlock.Foreground="White"/>

                                <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="0,0,3,3">

                                    <Border.Background>

                                           <LinearGradientBrush StartPoint="0.494,0.028" EndPoint="0.494,0.889">

                                            <GradientStop Color="#99FFFFFF" Offset="0"/>

                                            <GradientStop Color="#33FFFFFF" Offset="1"/>

                                        </LinearGradientBrush>

                                    </Border.Background>

                                </Border>

                            </Grid>

                        </Border>

                    </Border>

                    <!--定义视觉树 end-->

                   

                    <!--定义触发器-->

                      <ControlTemplate.Triggers>

                        <Trigger Property="IsPressed" Value="True">

                            <Setter Property="Opacity" TargetName="shine" Value="0.4"/>

                            <Setter Property="Background" TargetName="border" Value="#FFA4C0F0"/>

                            <Setter Property="Visibility" TargetName="glow" Value="Hidden"/>

                        </Trigger>

                        <!-- MenuItem.IsPressed 属性:按钮的“鼠标悬停”状态-->

                        <Trigger Property="IsMouseOver" Value="True">

                            <!--WPF样式动画Trigger.EnterActions-->

                            <Trigger.EnterActions>

                                <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>

                            </Trigger.EnterActions>

                                    <Trigger.ExitActions>

                                <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>

                            </Trigger.ExitActions>

                        </Trigger>

                    </ControlTemplate.Triggers>

                    <!--定义触发器 end-->

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</ResourceDictionary>

 

    <Application.Resources>

        <ResourceDictionary>

            <!--给应用程序添加默认资源：其实就是将默认的Resource Dictionary加入到Application的全局Resource里边。-->

            <ResourceDictionary.MergedDictionaries>

                <!--封装好的公共样式-->

                <ResourceDictionary Source="PublicStyles/DT_PublicStyles.xaml"/>

                <!--<ResourceDictionary Source="PublicStyles/DT-PublicStyles.xaml"/>-->

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

</Application

资源字典：所有的资源项在最终都会被整合到ResourceDictionary中的，也就是说无论是FramworkElement的Resources，还是特定的ResourceDictionary中定义的resources在整个应用编译执行的时候实际上他们都会在一起的作为可遍历集合共同存在于一个相对会话空间内的。