WPF 构建自定义控件 模板Template（圆形按钮、按钮事件）

 

Template 软件“换肤”

 

一、自定义 按钮控件 模板

效果：

XAML:

<Window x:Class="WpfApplication1.Window5"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window5" Height="611.538" Width="469.615">
    <Button x:Name="myButton" Width="100" Height="100" Click="myButton_Click">
        <Button.Template>
            <ControlTemplate>
                <Grid x:Name="controlLayout">
                    <Ellipse x:Name="buttonSurface" Fill="LightBlue"/>
                    <Label x:Name="buttonCaption" VerticalAlignment="Center" HorizontalAlignment="Center"
                           FontWeight="Bold" FontSize="20" Content="OK"/>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Window>

 

二、将  Button模板 转换成资源模板

 

将新模板取名 RoundButtonTemplate,保存在 App.xaml

 

<Application x:Class="WpfApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Window5.xaml">
    <Application.Resources>
<!--TargetType="{x:Type Button}只有按钮才能使用该资源-->
        <ControlTemplate x:Key="RoundButtonTemplate" TargetType="{x:Type Button}">
            <Grid x:Name="controlLayout">
                <Ellipse x:Name="buttonSurface" Fill="LightBlue"/>
                <Label x:Name="buttonCaption" VerticalAlignment="Center" HorizontalAlignment="Center"
                    FontWeight="Bold" FontSize="20" Content="OK"/>
            </Grid>
        </ControlTemplate>

    </Application.Resources>
</Application>

 

 

    <Button x:Name="myButton" Width="100" Height="100" Click="myButton_Click" 
            Template="{DynamicResource RoundButtonTemplate}"/>

Template="{DynamicResource RoundButtonTemplate}"

 

 

三、向模板添加触发器

 

    <Application.Resources>
        <ControlTemplate x:Key="RoundButtonTemplate" TargetType="{x:Type Button}">
            <Grid x:Name="controlLayout">
                <Ellipse x:Name="buttonSurface" Fill="LightBlue"/>
                <Label x:Name="buttonCaption" VerticalAlignment="Center" HorizontalAlignment="Center"
    				FontWeight="Bold" FontSize="20" Content="OK"/>
            </Grid>
            
            <!--向模板添加触发器-->
            <ControlTemplate.Triggers>
                <!--Property="IsMouseOver" Value="True" 鼠标经过触发器为True-->
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="buttonSurface" Property="Fill" Value="Blue"/>
                    <Setter TargetName="buttonCaption" Property="Foreground" Value="Yellow"/>
                </Trigger>
            </ControlTemplate.Triggers>
            
        </ControlTemplate>
    </Application.Resources>

 

 

 

 

 

 

 

四、{TemplateBinding } 标记（推荐）

       每个按钮背景色，文字不一样

 

        <Button x:Name="myButton" Width="100" Height="100" Click="myButton_Click" 
            Background="Red" Content="1"
            Template="{StaticResource RoundButtonTemplate}"/>
        <Button x:Name="myButton1" Width="100" Height="100" Click="myButton_Click" 
            Background="Red" Content="2"
            Template="{StaticResource RoundButtonTemplate}"/>

 

    <Application.Resources>
        
        <ControlTemplate x:Key="RoundButtonTemplate" TargetType="{x:Type Button}">
            <Grid x:Name="controlLayout">
                <Ellipse x:Name="buttonSurface" Fill="{TemplateBinding Background}"/>
                <Label x:Name="buttonCaption" VerticalAlignment="Center" HorizontalAlignment="Center"
    				FontWeight="Bold" FontSize="20" Content="{TemplateBinding Content}"/>
            </Grid>   
        </ControlTemplate>
        
    </Application.Resources>

 

 

 

 

 

五、融合模板样式

来源：CSDN

作者：tiz198183

链接：https://blog.csdn.net/tiz198183/article/details/53118928