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>
相关推荐
RunningShare8 小时前
千万级用户电商平台,Flink实时推荐系统如何实现毫秒级延迟?
大数据·flink·推荐系统·ab测试
INFINI Labs8 小时前
如何使用 INFINI Gateway 对比 ES 索引数据
大数据·elasticsearch·gateway·easysearch
K_i1349 小时前
中国电信用户行为实时分析系统运维实战
hadoop·mysql
风跟我说过她10 小时前
Sqoop的安装与配置
hive·hadoop·经验分享·centos·hbase·sqoop
他们叫我技术总监14 小时前
外企 BI 工具选型:从合规到落地
大数据·bi
Lansonli15 小时前
大数据Spark(六十七):Transformation转换算子distinct和mapValues
大数据·分布式·spark
RunningShare16 小时前
基于Flink的AB测试系统实现:从理论到生产实践
大数据·flink·ab测试
Jolie_Liang18 小时前
保险业多模态数据融合与智能化运营架构:技术演进、应用实践与发展趋势
大数据·人工智能·架构
武子康19 小时前
大数据-118 - Flink 批处理 DataSet API 全面解析:应用场景、代码示例与优化机制
大数据·后端·flink
文火冰糖的硅基工坊19 小时前
《投资-78》价值投资者的认知升级与交易规则重构 - 架构
大数据·人工智能·重构