C#_WPF_按钮模板及自定义控件的使用

最新推荐文章于 2024-05-22 10:54:14 发布
最新推荐文章于 2024-05-22 10:54:14 发布
阅读量1.2k 收藏 5
点赞数 1
分类专栏： 笔记 程序开发 文章标签： wpf c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dgnankai/article/details/115752541
版权

源码打包下载​​​​​​​

WPF功能强大，但是控件的用法与Winfrom不大一样。这个文件主要说明了Button控件的用法。希望能给大家一个启示。

1、按钮加入图片

        <Button Grid.Row="0" Grid.Column="0"  ToolTip="Set_Label" Name="set_label1" Height="45" VerticalAlignment="Stretch" Width="45" HorizontalAlignment="Stretch">
            <Image Source="Resources/Player1.png" StretchDirection="DownOnly" Stretch="Fill" />
        </Button>

图片的处理：

  1. 准备素材
  2. 打开Properties\Resources.resx，添加
  3. 素材属性的生成操作：Resources
  4. 引用：<Image Source="Resources/Player1.png" />

2、窗体的xaml文件中直接使用模板

        <Button  Grid.Row="0" Grid.Column="1"  x:Name="m_HelpButton" IsEnabled="True" Width="50" Height="50">
            <Button.Template>
                <ControlTemplate>
                    <Border BorderBrush="Aqua" Background="#FFEDF961">
                        <Grid>
                            <Image Margin="2" Source="Resources/Player1.png" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

3、使用样式

<Button Grid.Row="0" Grid.Column="2" Content="播放" Height="31"  Name="button1" Foreground="#FFDE4747" Focusable="True" BorderBrush="{x:Null}" BorderThickness="0" Style="{StaticResource ButtonLeft}" Margin="106,47,82,61"/>

App.xaml中定义样式

        <Style x:Key="ButtonLeft" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <StackPanel Orientation="Horizontal">
                            <Image Name="minBtn" Source="Resources\player0.png" />
                            <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" FontSize="24"></TextBlock>
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Source" Value="Resources\player1.png" TargetName="minBtn" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Source" Value="Resources\pause0.png" TargetName="minBtn" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

提示：x:Key="ButtonLeft" 就是 Style="{StaticResource ButtonLeft}" 样式名称

4、鼠标覆盖变淡

        <Button Name="Add"  Margin="2"
            Grid.Row="1" Grid.Column="0"
            Style="{StaticResource Button_Menu}" Background="#FFEE2424" BorderBrush="#FF0031FF">
            <Image Source="/Resources/pause0.png" />
        </Button>

样式：

        <Style x:Key="Button_Menu" TargetType="{x:Type Button}">
            <Setter Property="Width" Value="50" />
            <Setter Property="Height" Value="50" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="MyBackgroundElement" BorderBrush="{DynamicResource ForgroundBrush}" BorderThickness="0">
                            <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="MyBackgroundElement" Property="Background" Value="{DynamicResource ForgroundBrush100}"/>
                                <Setter TargetName="MyBackgroundElement" Property="Opacity" Value="0.7"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Cursor" Value="Hand" />
        </Style>

5、三态按钮及阴影效果

        <Button Grid.Row="1" Grid.Column="1" Content="button" Height="50" Width="50" RenderTransformOrigin="-4.5,-1.24">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="0" CornerRadius="3,13,3,13" Name="PART_Background">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                <GradientStop Color="White" Offset="0.0" />
                                <GradientStop Color="Silver" Offset="0.5" />
                                <GradientStop Color="White" Offset="0.0" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Setter Property="Border.Background" TargetName="PART_Background">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                        <GradientStop Color="Silver" Offset="0.0" />
                                        <GradientStop Color="White" Offset="0.5" />
                                        <GradientStop Color="Silver" Offset="0.0" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="ButtonBase.IsPressed" Value="True">
                            <Setter Property="UIElement.Effect">
                                <Setter.Value>
                                    <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>

6、三态按钮及背景色、文字颜色变化

        <Button Grid.Row="1" Grid.Column="2" Style="{StaticResource Style.OkOperationButton}"
                Width="100" Height="50"
                Content="确定" FontSize="18"
                 />

样式：

        <Style x:Key="Style.OkOperationButton" TargetType="ButtonBase">
            <Setter Property="Width" Value="110" />
            <Setter Property="Height" Value="44" />
            <Setter Property="FontSize" Value="24" />
            <Setter Property="Background" Value="#FF0087FF" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ButtonBase}">
                        <Border x:Name="Border" Width="{TemplateBinding Width}"
                                Height="{TemplateBinding Height}"
                                CornerRadius="22" Background="{TemplateBinding Background}">
                            <TextBlock x:Name="TextBlock"
                                       Text="{TemplateBinding Content}"
                                       FontSize="{TemplateBinding FontSize}"
                                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background"
                                        Value="#FF888888" />
                                <Setter TargetName="TextBlock" Property="Foreground" Value="#FF111111" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background"
                                        Value="#FFfcac1c" />
                                <Setter TargetName="TextBlock" Property="Foreground" Value="#FFFFFFFF" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Border" Property="Background" Value="#4D0087FF" />
                                <Setter TargetName="TextBlock" Property="Foreground" Value="#4DFFFFFF" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

提示：TemplateBinding用来实现引用时给控件复制

如：

Text="{TemplateBinding Content}"，使用：Content="确定"

FontSize="{TemplateBinding FontSize}" 使用：FontSize="18"

7、自定义控件

（1）解决方案→添加新建项→自定义控件（WPF）

（2）CustomControl.cs

using System;
……
using Button = System.Windows.Controls.Button;

namespace StudentImages
{
    
    public class CustomControl : Button
    {
        static CustomControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl), new FrameworkPropertyMetadata(typeof(CustomControl)));
        }

        public ImageSource Icon
        {
            get
            {
                return (ImageSource)GetValue(IconProperty);
            }
            set { SetValue(IconProperty, value); }
        }
         
        public static readonly DependencyProperty IconProperty
            = DependencyProperty.Register("Icon", typeof(ImageSource), typeof(CustomControl), null);

        …………
    }
}

说明：

namespace StudentImages

命名空间，自动生成

public class CustomControl : Button

CustomControl控件名称，自动生成

Button是继承的类，这里手工修改，否则这个自定义控件将会没有按钮的一些属性、事件

Icon是属性的名称

ImageSource是属性的类型

（3）Themes\Generic.xaml

    <Style TargetType="{x:Type local:CustomControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CustomControl}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Grid>
                            <Border x:Name="PART_Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" />
                            <Grid HorizontalAlignment="Center"  VerticalAlignment="Center">
                                <StackPanel>
                                    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                                        <Image x:Name="PART_Icon" Source="{TemplateBinding Icon}" Width="50" Height="50"/>
                                        <Image x:Name="PART_MouseOverIcon" Visibility="Collapsed" Source="{TemplateBinding IconMouseOver}" Width="50" Height="50"/>
                                        <Image x:Name="PART_PressIcon" Visibility="Collapsed" Source="{TemplateBinding IconPress}"  Width="50" Height="50"/>           
                                    </Grid>
                                </StackPanel>
                            </Grid>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="PART_Border" Value="{Binding MouseOverBackground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:CustomControl}}}"/>
                            <Setter Property="BorderBrush" TargetName="PART_Border" Value="{Binding MouseOverBorderBrush,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:CustomControl}}}"/>
                            <Setter Property="Visibility" TargetName="PART_MouseOverIcon" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="PART_Icon" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="PART_PressIcon" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="PART_Border" Value="{Binding MouseDownBackground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:CustomControl}}}"/>
                            <Setter Property="BorderBrush" TargetName="PART_Border" Value="{Binding MouseDownBorderBrush,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:CustomControl}}}"/>
                            <Setter Property="Visibility" TargetName="PART_PressIcon" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="PART_Icon" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="PART_MouseOverIcon" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

{TemplateBinding xxx}

xxx：如果是原属性，这里直接使用；如果是自定义的，需要在cs文件中注册

源码打包下载

beiger
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
WPF 控件专题 Button样式模板
^@^lemon tea^@^
07-16 1800
WPF 控件专题 Button样式模板
WPF自定义漂亮的按钮样式
微软新技术
05-02 5067
首先打开 Microsoft Visual Studio 2008 ，新建一个WPF项目，在上面随便放几个按钮：然后给各个按钮设置不同的背景颜色：设置好之后就是这样啦：然后我们就开始在 App.xaml 文件中定义按钮样式了：定义的样式代码如下：以下为引用的内容：    xmlns="http://schemas.microsoft.com/wi
C#--WPF自定义控件模板示例
最新发布
Blue
05-22 427
C#--WPF自定义控件模板示例
WPF学习-自定义控件库！
向往的是：佛祖堂前的鱼，静静听禅。
03-30 2364
WPF自定义按钮，增加圆角样式功能！1.创建控件库项目2.控件.cs文件中添加边框圆角属性调用按键资源文件编辑MyButton.xaml文件，设置样式vs默认的样式请参考：添加颜色资源设置默认样式绑定边框样式数据完整MyButton.xaml资源字典如下：生成dll新项目调用学习过程中参考的文档如下： 1.创建控件库项目 新建工程后，默认会有“Themes”文件加，用于保存控件样式。 右键项目选...
WPF button按钮背景颜色代码修改的办法
weixin_30305735的博客
08-04 2999
WPF 修改button按钮颜色的方式 跟C#略有区别，一下总价几种方式；20170802 姜彦 1.颜色简称 Button.Background = System.Windows.Media.Brushes.ForestGreen; 2.颜色代码 A： BrushConverter conv = new BrushCo...
WPF常用的按钮样式(添加图片和设置圆角)
Hat_man_的博客
10-23 1231
【代码】WPF常用的按钮样式(添加图片和设置圆角)
C#_WPF_按钮模板控件.rar
04-16
"C#_WPF_按钮模板控件.rar"这个资源正是针对WPF中的Button控件的用法进行深入探讨的教程。 Button控件是WPF中最基本的交互元素之一，它允许用户通过点击执行某些操作。在WPF中，Button不仅能够显示文本，还可以包含...
自定义窗口模板_模板_窗口_WPF_zerohmk_自定义_
09-30
1. **定义模板**：在XAML（Extensible Application Markup Language）文件中，你可以使用`Window`控件的`Template`属性来定义自定义模板。这通常包含一个`ControlTemplate`元素，里面可以包含各种视觉元素如`Grid`、...
HandyControl-master_c＃界面_HandyControl_wpf控件库_
10-01
7. **自定义扩展**：除了内置的控件，HandyControl还允许开发者根据需求自定义控件和扩展功能，增强了其灵活性和可扩展性。 通过使用HandyControl，开发者可以快速构建出美观、功能强大且具有良好交互体验的应用...
WPF.zip_WPF_c＃ wpf
09-24
**WPF技术详解** WPF（Windows Presentation Foundation）是微软.NET Framework的一部分，它提供了一种强大的、基于XAML的用户界面框架，用于构建...同时，自定义控件和主题设计使得应用的个性化和用户体验得以提升。
wpf.rar_WPF_c＃ wpf
09-19
2. **控件库**：WPF包含大量内置的UI控件，如按钮、文本框、列表视图等，可以满足各种界面需求。这些控件具有丰富的样式和模板，可高度自定义外观。 3. **数据绑定**：WPF的数据绑定机制允许UI元素与后台数据模型...
WPFButton样式
10-09
WPFButton样式，6种button样式，简单的按钮样式，美化界面按钮
好看的WPF自定义按钮样式（绝对不亏）
09-30
全部出自个人之手。 预览地址http://csdn-1252047526.cossh.myqcloud.com/button.gif
重写Button的三态按钮带鼠标经过提示
11-29
重写Button的三态按钮带鼠标经过提示，新增鼠标经过的图片切换属性，其他的和普通按钮相同。
WPF中自定义控件教程
02-21
WPF中自定义控件开发教程，我也在学习中。
WPF Button使用漂亮 控件模板ControlTemplate 按钮使用控制模板实例及源代码 设计一个具有圆角边框、鼠标悬停时颜色变化的按钮模板
weijia3624的专栏
12-28 1313
WPF中的Button控件默认样式简洁，但可以通过设置模板来实现更丰富的视觉效果和交互体验。按钮模板主要包括背景、边框、内容（通常为文本或图像）等元素。通过自定义模板，我们可以改变这些元素的样式、颜色、透明度、动画等属性，以创建出独特且吸引人的按钮。 例如，我们可以设计一个具有圆角边框、鼠标悬停时颜色变化的按钮模板。 WPF Button使用漂亮 控件模板ControlTemplate 按钮使用控制模板实例及源代码 设计一个具有圆角边框、鼠标悬停时颜色变化的按钮模板
03--C#Winform--让你的button控件更漂亮
TheBeauty_的博客
09-13 9946
如何设置button图标显示
WPF Button按钮模板样式修改（一）
^@^lemon tea^@^
10-29 7418
本章讲述：Button简单模板样式的修改，圆角矩形按钮实现； 主要通过修改控件模板以达到效果； XAML前端样式代码：通过Border来控制控件的圆角；采用属性触发器控制鼠标操作时，改变前景色和背景色。 &lt;Style x:Key="ExButton" TargetType="{x:Type Button}"&gt; &lt;Setter Property="MinHeight" V...
WPF基础之UI样式Style
yigu4011的博客
06-20 1038
触发器：基础样式：1. 通过TargetType设置样式通过控件类型，统一设置样式【如：字体，大小，边距等】，以便于形成统一的风格，通过设置样式的TargetType="Button"，则可以使所有的按钮应用同一个样式，统一风格2. 通过Key设置样式：如果需要对每一个控件元素，都设置不同的样式，则可以通过不同的Key加以区分。
wpf自定义控件demo
12-08
通过这个Demo，我们可以看到WPF自定义控件的基本开发流程：创建自定义类、定义模板、添加事件处理程序和将控件添加到界面中。通过自定义控件，我们可以实现各种各样的功能和样式，提升应用程序的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

beiger

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值