第一行两侧--功能按钮

1、 StackPanel 左右对齐，左边四个，右边三个 

        <!--功能按钮-->
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <Button Content="支腿焊接自动线"/>
            <Button Content="小件自动化机加线"/>
            <Button Content="自动化产线"/>
            <Button Content="输送直管热处理"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Content="输送直管自动热处理"/>
            <Button Content="输送直管自动焊接线"/>
            <Button Content="专汽搅拌桶装涂装自动线"/>
        </StackPanel>

 通过原始属性没办法调整，改按钮的模板

        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

对所有按钮生效，空的没有样式，不显示

                        <Border>
                            <ContentPresenter />
                        </Border>

默认样式

修改边框

边框，底色白色，边框颜色#4F90，粗细1，

CornerRadius：拐角半径：左上8,右上8，右下2，左下2，上面弧度更大

内容

ContentPresenter 内容填充左右8，上下5

<Border Background="White" BorderBrush="#4F90" BorderThickness="1"
        CornerRadius="8,8,2,2" Name="border">
    <ContentPresenter Margin="8,5"/>
</Border>

通用属性

1、垂直居中

<Setter Property="VerticalAlignment" Value="Center"/>

2、按钮之间的间距，左右5

<Setter Property="Margin" Value="5,0"/>

3、点击按钮命中开关

<Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"/>

4、字体大小

<Setter Property="FontSize" Value="11"/>

鹰眼效果：BlurRadius阴影半径

            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="10" ShadowDepth="0" Opacity="0.2"/>
                </Setter.Value>
            </Setter>

 

为什么要用两个TargetType="Button"

<Style TargetType="Button">会应用到当前页面中所有的button标签里面

<ControlTemplate TargetType="Button">ControlTemplate 可以应用到很多控件里面，这里目标类型指定针对button按钮模板的样式设置

TargetType设置的必须保持一致，否则报错，button里面只能用button

 

触发器ControlTemplate.Triggers

鼠标移动到按钮上方，修改背景色，渐变色设置Setter.Value

不是纯色，纯色可以直接设置Value

LinearGradientBrush-- 使用线性渐变绘制区域

从上到下渐变

GradientStop描述渐变中过渡点的位置和颜色

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="border" Property="Background">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="White" Offset="0.2"/>
                    <GradientStop Color="#9F90" Offset="0.8"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Trigger>
</ControlTemplate.Triggers>

 

 

模板写法非常灵活，三角形、圆形、背景图片在Border里面写呗

你是导演，画板想怎么画都可以

 

快速生成副本模板

选中控件---查看文档大纲

 按钮--编辑模板，--编辑副本，创建

 

可以复制当前的模板

 可针对选中的控件修改

 

局部按钮处理

1、只处理自己内部的所有button

就在StackPanel内部写资源

 针对当前内部自己按钮的处理

 

2、设置key

 应用