WPF 圆形按钮 渐变色

WPF 按钮:

<Window x:Class="RoundButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

    <Window.Resources>
        <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
            <Grid>
                <Ellipse x:Name="ButtonEllipse" Width="Auto" Height="Auto" StrokeThickness="1" Fill="#FF96E596" Stroke="Red">                             </Ellipse>
            </Grid>           
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="ButtonEllipse" Property="Fill" Value="Blue" ></Setter>
                    <Setter TargetName="ButtonEllipse" Property="StrokeThickness" Value="2" ></Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="ButtonEllipse" Property="Fill" Value="Green"/>
                    <Setter TargetName="ButtonEllipse" Property="StrokeThickness" Value="4" ></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    
    
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="80*" />
            <RowDefinition Height="80*" />
        </Grid.RowDefinitions>      
       
        <Grid HorizontalAlignment="Stretch" Margin="0" Name="grid1" VerticalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150*" />
                <ColumnDefinition Width="150*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="btnTest1" Margin="0" Height="80" Width="80" HorizontalAlignment="Center" VerticalAlignment="Center"                                Template="{DynamicResource ButtonControlTemplate1}" >
            </Button>


            <Button Height="80" Width="80" HorizontalAlignment="Center" VerticalAlignment="Center" 
                           Template="{DynamicResource ButtonControlTemplate2}" x:Name="btnTest2" Margin="0" Grid.Column="1">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Grid>
                                        <Rectangle Width="100" Fill="Red" ></Rectangle>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                    </Style>
                </Button.Style>

                <Button.Resources>
                    <ControlTemplate x:Key="ButtonControlTemplate2" TargetType="{x:Type Button}">
                        <Grid>
                            <Ellipse x:Name="ButtonEllipse" Width="Auto" Height="Auto" StrokeThickness="3"  Stroke="Red">
                                <!--
                                <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>
                                -->


                                <Ellipse.Fill>
                                    <!--线性渐变-->
                                    <!--
  <LinearGradientBrush StartPoint="0,0" EndPoint="0.5,0.5">
  <GradientStop Color="Yellow" Offset="0.0" />
  <GradientStop Color="Red" Offset="0.25" />
  <GradientStop Color="Blue" Offset="0.75" />
  <GradientStop Color="LimeGreen" Offset="1.0" />
  </LinearGradientBrush>
   -->
                                    <!--径向渐变-->
                                    <RadialGradientBrush>
                                        <GradientStop Color="#FF22B14B" Offset="1"/>
                                        <GradientStop Color="#FFF6FFF6" Offset="0"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>

                        </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.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="ButtonEllipse" Property="Fill" >
                                    <Setter.Value>
                                        <RadialGradientBrush>
                                            <GradientStop Color="#FFFFC824" Offset="1"/>
                                            <GradientStop Color="#FFFFF8D3" Offset="0"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="ButtonEllipse" Property="StrokeThickness" Value="3" ></Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="ButtonEllipse" Property="Fill" >
                                    <Setter.Value>
                                        <RadialGradientBrush>
                                            <GradientStop Color="#FFFF9124" Offset="1"/>
                                            <GradientStop Color="#FFFFF8D3" Offset="0"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="ButtonEllipse" Property="StrokeThickness" Value="6" ></Setter>
                            </Trigger>


                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Resources>
            </Button>
        </Grid>
        <Grid Grid.Row="1" HorizontalAlignment="Stretch" Margin="0" Name="grid2" VerticalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="180*" />
                <ColumnDefinition Width="180*" />
            </Grid.ColumnDefinitions>
            <Button Content="Button" Height="80" HorizontalAlignment="Center" Margin="0" Name="button1" VerticalAlignment="Center"                             Width="80" DataContext="{Binding}" />
            <telerik:RadButton Content="Button" Grid.Column="1" Height="80" HorizontalAlignment="Center" Margin="0"                                                        Name="radButton1" VerticalAlignment="Center" Width="80" CornerRadius="40" />
        </Grid>
    </Grid>
</Window>



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值