WPF三角形、圆形按钮

本文介绍如何在 WPF 中创建自定义按钮样式,包括圆形按钮和带有三角形图案的按钮,并展示了如何通过 XAML 和 C# 代码实现按钮外观及交互效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

例子简单,代码更简单。
<Window
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class
="Custom_Button.Window1"
    x:Name
="Window"
    Title
="圆形按钮"
    Width
="600" Height="480">

    
<Grid x:Name="LayoutRoot">

        
<Grid.RowDefinitions>
            
<RowDefinition/>
        
</Grid.RowDefinitions>

        
<Button Grid.Column="0" Grid.Row="0" Height="400" Width="400" HorizontalAlignment="Left" VerticalAlignment="Top" Content="Button" Template="{DynamicResource ButtonControlTemplate1}" Cursor="Hand">
            
<Button.Resources>
                
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
                    
<Grid>
                        
<Ellipse x:Name="ButtonEllipse" Width="Auto" Height="Auto" StrokeThickness="4" Fill="White" Stroke="Gray"></Ellipse>
                        
<Polygon x:Name="ButtonPolygon" Points="20,200 300,50 300,350" Stroke="White" StrokeThickness="2">
                            
<Polygon.Fill>
                                
<SolidColorBrush Color="Gray" Opacity="0.4"/>
                            
</Polygon.Fill>
                        
</Polygon>
                    
</Grid>
                    
<ControlTemplate.Triggers>
                        
<Trigger Property="IsMouseOver" Value="True">
                            
<Setter TargetName="ButtonPolygon" Property="Fill" Value="Black"></Setter>
                        
</Trigger>
                        
<Trigger Property="IsPressed" Value="True">
                            
<Setter TargetName="ButtonPolygon" Property="Fill" Value="Gray"/>
                        
</Trigger>
                    
</ControlTemplate.Triggers>
                
</ControlTemplate>
            
</Button.Resources>
        
</Button>
    
</Grid>
</Window>




修改后三角形自动放大



    <Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>

        

        <Button Width="305" HorizontalAlignment="Left" Content="Button1" Template="{DynamicResource ButtonControlTemplate1}" Cursor="Hand" Margin="52,45,0,142" Click="Button_Click_1">
            <Button.Resources>
                <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
                    <Grid>
                        <Ellipse x:Name="ButtonEllipse" Width="Auto" Height="Auto" StrokeThickness="4" Fill="White" Stroke="Gray"></Ellipse>
                        <Polygon x:Name="ButtonPolygon" Stretch="Fill" Points="0,50 100,0 100,100" Stroke="White" StrokeThickness="2">
                            <Polygon.Fill>
                                <SolidColorBrush Color="Gray" Opacity="0.4"/>
                            </Polygon.Fill>
                        </Polygon>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ButtonPolygon" Property="Fill" Value="Black"></Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="ButtonPolygon" Property="Fill" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Resources>
        </Button>
    </Grid>



自定义控件上使用代创建

xaml:

<UserControl x:Class="WpfApplication1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="439" d:DesignWidth="437" Loaded="UserControl_Loaded">
    
    <UserControl.Resources>
        <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
            <Grid>
                <Polygon x:Name="ButtonPolygon" Stretch="Fill" Points="0,50 100,0 100,100" Stroke="White" StrokeThickness="2">
                    <Polygon.Fill>
                        <SolidColorBrush Color="Gray" Opacity="0.4"/>
                    </Polygon.Fill>
                </Polygon>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="ButtonPolygon" Property="Fill" Value="Black"></Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="ButtonPolygon" Property="Fill" Value="red"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </UserControl.Resources>
    
    
</UserControl>

code:

    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            Button button1 = new Button();
            this.AddChild(button1);
            button1.Template = (ControlTemplate)(this.Resources["ButtonControlTemplate1"]);
            button1.Click += button1_Click;
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("sss");
        }


    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值