WPF按钮相关

跟着官网敲的按钮相关的内容,还涉及了wpf很多其他的知识

1.创建基本按钮

复制代码
    <Grid>
        <StackPanel HorizontalAlignment="Left">
            <Button>Button1</Button>
            <Button>Button2</Button>
            <Button>Button3</Button>
        </StackPanel>
    </Grid>

2.设置基本属性

有两种方式,直接在button后面添加 ,但是我这里有三个按钮,你在项目之中会有出现更多按钮的情况,所以我们这了选择另一种方式:写按钮的样式style

这里在App.xaml下面进行创建style,即表示把这个style应用到全局:

复制代码
        <!--创建样式-->
        <Style TargetType="Button">
            <Setter Property="Width" Value="90"></Setter>
            <Setter Property="Margin" Value="10"></Setter>
        </Style>

这里的TargetType表示目标对象即button,下面的setter是设计器,property是button拥有的属性,value是我们设置的值.

  1. 设置渐变静态资源并运用到按钮上面

x:Key = "B1" 是上面资源的命名,下面引用的是{StaticResource B1}

复制代码
        <LinearGradientBrush x:Key="B1" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="DarkGray" Offset="0"></GradientStop>
            <GradientStop Color="#CCCCFF" Offset="0.5"></GradientStop>
            <GradientStop Color="DarkGray" Offset="1"></GradientStop>
        </LinearGradientBrush>

        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="{StaticResource B1}"></Setter>
            <Setter Property="Width" Value="80"></Setter>
            <Setter Property="Margin" Value="10"></Setter>
        </Style>

4.模板自定义按钮外观

更改按钮呈现:自 定义模板。 添加以下突出显示的标记。 此标记指定两个具有圆角的 Rectangle 元素,后跟一个 DockPanelDockPanel 用于托管按钮的 ContentPresenterContentPresenter 显示按钮的内容。 在本演练中,内容为文本("Button 1"、"Button 2"、"Button 3")。 所有模板组件(矩形和 DockPanel)都布置在 Grid 内.

复制代码
 <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <!--
                        使用了Grid布局容器来组织按钮的内部元素。
                        Width和Height属性被绑定到模板自身的宽度和高度,确保Grid的大小与按钮的大小相匹配。
                        ClipToBounds设置为True,意味着任何超出Grid边界的内容都会被裁剪。
                        -->
                        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
                            <!-- Outer Rectangle with rounded corners. -->
                            <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />
                            <!-- Inner Rectangle with rounded corners. -->
                            <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />
                            <!-- Present Content (text) of the button. -->
                            <DockPanel Name="myContentPresenterDockPanel">
                                <ContentPresenter x:Name="myContentPresenter" Margin="20" Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
                            </DockPanel>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

5.设置触发器

复制代码
<ControlTemplate.Triggers>

                            <!-- Set properties when mouse pointer is over the button. -->
                            <Trigger Property="IsMouseOver" Value="True">

                                <!-- Below are three property settings that occur when the
         condition is met (user mouses over button).  -->
                                <!-- Change the color of the outer rectangle when user          mouses over it. -->
                                <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"
      Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />

                                <!-- Sets the glass opacity to 1, therefore, the          glass "appears" when user mouses over it. -->
                                <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />

                                <!-- Makes the text slightly blurry as though you were          looking at it through blurry glass. -->
                                <Setter Property="ContentPresenter.BitmapEffect"       TargetName="myContentPresenter">
                                    <Setter.Value>
                                        <BlurBitmapEffect Radius="1" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <!-- Set properties when button has focus. -->
                            <Trigger Property="IsFocused" Value="true">
                                <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />
                                <Setter Property="Rectangle.Stroke" TargetName="outerRectangle"       Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                                <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />
                            </Trigger>

                        </ControlTemplate.Triggers>
相关推荐
IT小哥哥呀9 小时前
电池制造行业数字化实施
大数据·制造·智能制造·数字化·mom·电池·信息化
Xi xi xi9 小时前
苏州唯理科技近期也正式发布了国内首款神经腕带产品
大数据·人工智能·经验分享·科技
yumgpkpm9 小时前
华为鲲鹏 Aarch64 环境下多 Oracle 、mysql数据库汇聚到Cloudera CDP7.3操作指南
大数据·数据库·mysql·华为·oracle·kafka·cloudera
UMI赋能企业10 小时前
制造业流程自动化提升生产力的全面分析
大数据·人工智能
TDengine (老段)11 小时前
TDengine 数学函数 FLOOR 用户手册
大数据·数据库·物联网·时序数据库·iot·tdengine·涛思数据
派可数据BI可视化13 小时前
商业智能BI 浅谈数据孤岛和数据分析的发展
大数据·数据库·数据仓库·信息可视化·数据挖掘·数据分析
jiedaodezhuti13 小时前
Flink性能调优基石:资源配置与内存优化实践
大数据·flink
mingupup14 小时前
WPF/C#:使用Microsoft Agent Framework框架创建一个带有审批功能的终端Agent
c#·wpf
Lx35215 小时前
Flink窗口机制详解:如何处理无界数据流
大数据
Lx35215 小时前
深入理解Flink的流处理模型
大数据