百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

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

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

源码私信联系

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

源码私信

相关推荐

win7电脑安全模式怎么退出(win7进入安全模式后如何退出)
  • win7电脑安全模式怎么退出(win7进入安全模式后如何退出)
  • win7电脑安全模式怎么退出(win7进入安全模式后如何退出)
  • win7电脑安全模式怎么退出(win7进入安全模式后如何退出)
  • win7电脑安全模式怎么退出(win7进入安全模式后如何退出)
windows8之家(windows8.)

1,右击“计算机”,从弹出的菜单中选择“属性”项。2,然后就可以要窗口最下面“Windows激活”栏看到Win8的激活的状态.3,当Win8处于未激活状态时,可以通过两种方式:1),输入产品密钥的方式...

纯净版u盘pe系统(u盘纯净版系统安装教程)

如何制作官方纯净版Windows10PE启动U盘?你下载一个:老毛桃优盘启动工具,然后把一个空的优盘插进去就可以制作一个带启动的优盘了。然后把GHO文件放进去即可。软碟通做起动盘,做盘时注意模式,有h...

手机免费解压软件(手机免费解压软件7-ZIP下载)
手机免费解压软件(手机免费解压软件7-ZIP下载)

步骤/方式1当你下载压缩文件时,任务列表右侧会出现“下载完成后解压”按钮。步骤/方式2点击按钮后,你可以选择解压到哪个目录,解压成功后是否打开文件夹。步骤/方式3最后点击“确定”就能让这个压缩文件在下载完成后的第一时间开始解压缩。...

2025-12-17 11:55 liuian

电脑c盘满了怎么解决(电脑c盘满了咋整)

如果你的电脑是因为装系统时给C盘分配容量太小而导致C盘装满,可以用系统自带的磁盘管理工具就可以解决,操作步骤如下:点击此电脑-管理-存储-磁盘管理。右键点你要压缩的磁盘,再选择压缩卷,输入相应的容量,...

华硕电脑重装系统怎么操作(华硕电脑重装win10系统步骤)
华硕电脑重装系统怎么操作(华硕电脑重装win10系统步骤)

准备好一张系统安装光盘,并通过系统盘安装系统,具体步骤如下:1.、将系统光盘放入光驱中去;2.、重启电脑,开机点击ESC键后,通过键盘上的方向键选择DVD光驱启动项,并点击回车键进入系统安装界面;3.、出现Windows7安装界面,首先依...

2025-12-17 10:55 liuian

微软官网win10下载专区(微软官网windows10下载)

微软官网下载的win10,只有用正版密钥激活后才是正版的。如果用工具激活就是盗版的。微软操作系统是美国微软开发的Windows系列视窗化操作系统。个人版目前最高版本为Windows11,因为微软的个...

联想轻薄笔记本电脑哪款好(联想最轻薄笔记本电脑)

如果你打算购买联想轻薄笔记本,以下是一些建议:1.确定使用需求:首先要明确自己的使用需求和预算。考虑你主要用途是办公、娱乐还是轻量级游戏,以及对性能、存储空间和电池续航等方面的要求。2.屏幕尺寸和...

联想笔记本个别按键失灵(联想笔记本按键部分失灵怎么办)

1、首先可能用户粗心操作造成的。硬件问题包括因为笔记本电脑小键盘数字键和字母键是整合在一起的,一般按fnNumlk键可以智能切换到小数字键盘。2、可能是笔记本键盘彻底坏了,那么就要更换键盘了。...

xp ghost纯净版(XPghost纯净版下载)

xpsp3纯净版在采用微软封装部署技术的基础上,结合作者的实际工作经验,融合了许多实用的功能。它通过一键分区、一键装系统、自动装驱动、一键设定分辨率,一键填IP,一键Ghost备份(恢复)等一系列...

win7安装哪个版本(win7安装哪个版本的python)

1、要考虑能否安装Win7,如果内存等于或者低于2G,就不能安装Win7,只能安装XP。2、根据电脑的具体配置安装使用软件,对于不适应电脑运行的软件不能安装,如视频处理软件,中、大型网络游戏等。3、尽...

office2010中文免费版(office2010官方免费版)
  • office2010中文免费版(office2010官方免费版)
  • office2010中文免费版(office2010官方免费版)
  • office2010中文免费版(office2010官方免费版)
  • office2010中文免费版(office2010官方免费版)
amd处理器性能排行天梯图(amd最新处理器天梯图)

amdcpu数字越大性能越高但不代表性价比越高哦从现在市场上找的到的am3速龙210220250260270都是双核4404454503核6404核fm1速龙631641...

win8升级win10需要密钥(win8.1怎么升级成win10密钥)

1、下载激活工具,打开运行2、系统已经激活,通过腾讯电脑管家windows10升级助手也可以实现免费升级windows10。如果升级前确定是正版激活的,升级后就不需要再激活的,请放心使用。免费升级到w...

打印机显示脱机状态是什么原因
  • 打印机显示脱机状态是什么原因
  • 打印机显示脱机状态是什么原因
  • 打印机显示脱机状态是什么原因
  • 打印机显示脱机状态是什么原因