百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

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

liuian 2025-05-02 19:36 104 浏览

源码私信联系

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>

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、三态按钮及背景色、文字颜色变化

        <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文件中注册

源码私信

相关推荐

西部数据移动硬盘修复工具（西部数据移动硬盘维修中心）

需要联系西部数据的客服中心，寻求他们的售后服务。可以通过以下方式联系他们：1.登陆西部数据的官网，找到“售后服务”页面，填写相关表格，向客服提交问题，并留下联系方式等信息。2.拨打西部数据的客服电话，...

win7驱动在哪下载（win7电脑驱动下载）

以下是下载和安装Windows7驱动程序的步骤：1.找到您需要的驱动程序的制造商网站。2.在其网站上找到“支持”或“驱动程序”页面。3.选择您的设备型号和操作系统（Windows7）。4....

4g内存win8win10哪个更流畅（win10 4g 8g区别）

您好，联想G400英特尔i564位操作系统win8.1自带系统4g运行内存是可以升级到win10。希望以上信息可以帮到您！当然是8+4更好了，毕竟缓存的空间越大也就意味着系统的流畅性越高，如果后台...

电脑开机一直卡在loading（电脑开机一直卡在正在启动windows）

具体原因和解决方法如下：　　1、该故障一般是DOS引导记录出现错误引起的。　　DOS引导记录位于逻辑0扇区，是由高级格式化命令FORMAT生成的。主引导程序在检查分区表正确之后，根据分区表中指出的DO...

window7下载版本（下载win 7）

1.右击原神图标，打开文件所在位置，也就是原神根目录“Genshinimpact”。2.打开原神根目录“Genshinimpact”后翻到最下方，倒数第五个文件(vc_redist.x64这个文...

u盘还原系统（u盘还原系统会中毒么）

可以按照以下步骤进行操作：首先，您需要制作一个U盘系统安装盘。您可以使用第三方免费小工具（如Rufus、Etcher等）或微软官方提供的制作工具（如Windows10安装媒体创建工具）来制作。...

爱奇艺找不到弹幕开关了（爱奇艺找不到弹幕开关了）
  • 爱奇艺找不到弹幕开关了（爱奇艺找不到弹幕开关了）
  • 爱奇艺找不到弹幕开关了（爱奇艺找不到弹幕开关了）
  • 爱奇艺找不到弹幕开关了（爱奇艺找不到弹幕开关了）
  • 爱奇艺找不到弹幕开关了（爱奇艺找不到弹幕开关了）
win7旗舰版原装系统（win7旗舰版如何系统还原）

1、win7的版本有入门版、家庭基础版、家庭高级版、专业版、企业版、旗舰版。没有所谓的纯净版。2、纯净版是指非官方组织或个人使用win7的某一个版本（一般是专业版），通过软件制作成镜像，方便进行传播安...

笔记本加内存条（笔记本加内存条有什么好处）
  • 笔记本加内存条（笔记本加内存条有什么好处）
  • 笔记本加内存条（笔记本加内存条有什么好处）
  • 笔记本加内存条（笔记本加内存条有什么好处）
  • 笔记本加内存条（笔记本加内存条有什么好处）
电脑主机亮一下灭了反复循环

电脑开机后显示屏幕亮，一会灭一会亮来回的循环，可能这里面有几个问题，一个是看看你的这个显示器是不是后面那个插头，那个信号线是不是松了，还有要看一下电源线是不是你轻微的碰它一下就掉了，再碰一下它就结好...

win10网卡驱动装不上（win10网卡驱动装不上提示版本低怎么办）

WIN10系统无线网卡驱动安装不上的解决方法WIN10系统驱动安装不上，总是安装失败，一般是无线网卡硬件设备出了问题。试想想，驱动本身就是为对应设备服务的，设备不存在，驱动固然安装不了。一般两种情况：...

king root官方下载安装（king root软件）

1、首先你需要打开进入强力一键root的界面菜单，并将手机连接到电脑上，再点击“开始连接”功能按钮。2、如果弹出“检测到当前手机未开启调试模式”的提示框，请先打开手机的设备菜单，点击启用“USB调试模...

请问有windows8系统吗（windows8还可以用吗）

可以用的。这是一款非常不错的系统，在原先系统的基础上做了很多升级和优化，开关机速度和处理文件的速度大大提高，而且还增加了很多新功能，还是非常值得升级的Windows8是由微软公司开发的，具有革命性变...

电脑快速复制粘贴键（电脑的快速复制粘贴快捷键）
电脑快速复制粘贴键（电脑的快速复制粘贴快捷键）

Windows系统复制快捷键：Ctrl+C粘贴快捷键：Ctrl+VMac系统复制/粘贴快捷键：Command+C/V拓展资料：1、复制快捷键：【Ctrl】+【C】我们选中需要复制的文件，鼠标右键单击，然后选择“复制”，选中的内容就已经成功复...

2026-01-28 14:21 liuian

tplink登陆网址（tplink登录路由器的网址）
tplink登陆网址（tplink登录路由器的网址）

TP-LINK路由器的登录入口(管理页面)地址是tplogin.cn，我们只需打开浏览器，在浏览器顶部的地址栏里输入路由器的管理页面地址tplogin.cn就能打开tplink登录入口页面了。tplogincn登录首页知识点：TPLINK路...

2026-01-28 14:05 liuian

一周热门
最近发表
标签列表