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

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

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

源码私信联系

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

源码私信

相关推荐

总结下SpringData JPA 的常用语法

SpringDataJPA常用有两种写法，一个是用Jpa自带方法进行CRUD，适合简单查询场景、例如查询全部数据、根据某个字段查询，根据某字段排序等等。另一种是使用注解方式，@Query、@Modi...

解决JPA在多线程中事务无法生效的问题

在使用SpringBoot2.x和JPA的过程中，如果在多线程环境下发现查询方法（如@Query或findAll）以及事务（如@Transactional）无法生效，通常是由于S...

PostgreSQL系列(一):数据类型和基本类型转换

自从厂子里出来后，数据库的主力就从Oracle变成MySQL了。有一说一哈，贵确实是有贵的道理，不是开源能比的。后面的工作里面基本上就是主MySQL，辅MongoDB、ES等NoSQL。最近想写一点跟...

基于MCP实现text2sql

目的：基于MCP实现text2sql能力参考：https://blog.csdn.net/hacker_Lees/article/details/146426392服务端#选用开源的MySQLMCP...

ORACLE 错误代码及解决办法

ORA-00001:违反唯一约束条件(.)错误说明：当在唯一索引所对应的列上键入重复值时，会触发此异常。ORA-00017:请求会话以设置跟踪事件ORA-00018:超出最大会话数ORA-00...

从 SQLite 到 DuckDB:查询快 5 倍，存储减少 80%

作者丨Trace译者丨明知山策划丨李冬梅Trace从一开始就使用SQLite将所有数据存储在用户设备上。这是一个非常不错的选择——SQLite高度可靠，并且多种编程语言都提供了广泛支持...

010:通过 MCP PostgreSQL 安全访问数据

项目简介提供对PostgreSQL数据库的只读访问功能。该服务器允许大型语言模型（LLMs）检查数据库的模式结构，并执行只读查询操作。核心功能提供对PostgreSQL数据库的只读访问允许L...

发现了一个好用且免费的SQL数据库工具(DBeaver)

缘起最近Ai不是大火么，想着自己也弄一些开源的框架来捣腾一下。手上用着Mac，但Mac都没有显卡的，对于学习Ai训练模型不方便，所以最近新购入了一台4090的拯救者，打算用来好好学习一下Ai（呸，以上...

微软发布.NET 10首个预览版:JIT编译器再进化、跨平台开发更流畅

IT之家2月26日消息，微软.NET团队昨日（2月25日）发布博文，宣布推出.NET10首个预览版更新，重点改进.NETRuntime、SDK、libraries、C#、AS...

数据库管理工具Navicat Premium最新版发布啦

管理多个数据库要么需要使用多个客户端应用程序，要么找到一个可以容纳你使用的所有数据库的应用程序。其中一个工具是NavicatPremium。它不仅支持大多数主要的数据库管理系统（DBMS），而且它...

50+AI新品齐发，微软Build放大招:拥抱Agent胜算几何?

北京时间5月20日凌晨，如果你打开微软Build2025开发者大会的直播，最先吸引你的可能不是一场原本属于AI和开发者的技术盛会，而是开场不久后的尴尬一幕：一边是几位微软员工在台下大...

揭秘:一条SQL语句的执行过程是怎么样的?

数据库系统能够接受SQL语句，并返回数据查询的结果，或者对数据库中的数据进行修改，可以说几乎每个程序员都使用过它。而MySQL又是目前使用最广泛的数据库。所以，解析一下MySQL编译并执行...

各家sql工具，都闹过哪些乐子?

相信这些sql工具，大家都不陌生吧，它们在业内绝对算得上第一梯队的产品了，但是你知道，他们都闹过什么乐子吗？首先登场的是Navicat，这款强大的数据库管理工具，曾经让一位程序员朋友“火”了一把。Na...

详解PG数据库管理工具--pgadmin工具、安装部署及相关功能

概述今天主要介绍一下PG数据库管理工具--pgadmin，一起来看看吧~一、介绍pgAdmin4是一款为PostgreSQL设计的可靠和全面的数据库设计和管理软件，它允许连接到特定的数据库，创建表和...

Enpass for Mac(跨平台密码管理软件)

还在寻找密码管理软件吗？密码管理软件有很多，但是综合素质相当优秀且完全免费的密码管理软件却并不常见，EnpassMac版是一款免费跨平台密码管理软件，可以通过这款软件高效安全的保护密码文件，而且可以...

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