wpf RadioButton自定义样式圆角/直角变化背景色渐变

最新推荐文章于 2024-07-06 11:30:00 发布

风沙不去驼铃声

最新推荐文章于 2024-07-06 11:30:00 发布

阅读量1k

点赞数 1

文章标签： wpf

本文链接：https://blog.csdn.net/lifeng_beijing/article/details/131802955

版权

样式部分

<LinearGradientBrush x:Key="GradientBrush_1"  EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Offset="1" Color="#CEE5D1" />
                        <GradientStop Offset="0" Color="#FAFAFA" />
                    </LinearGradientBrush>

                    <Style TargetType="{x:Type RadioButton}" x:Key="rbut_style1">
                        <Setter Property="Width" Value="130" />
                        <Setter Property="Height" Value="60" />
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="FontSize" Value="24" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type RadioButton}">
                                    <Grid x:Name="Ellipse" >
                                        <Border x:Name="border1"  >
                                            <TextBlock x:Name="txt1" Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                                        </Border>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsChecked" Value="False">
                                            <Setter TargetName="border1" Property="Background" Value="#E2E2E2" />
                                            <Setter TargetName="txt1" Property="Foreground" Value="#4E534F" />
                                            <Setter TargetName="txt1" Property="FontWeight" Value="400" />
                                        </Trigger>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter TargetName="border1" Property="Background" Value="{StaticResource GradientBrush_1}" />
                                            <Setter TargetName="border1" Property="BorderThickness" Value="0,0,0,5" />
                                            <Setter TargetName="border1" Property="BorderBrush" Value="#43854B" />

                                            <Setter TargetName="txt1" Property="Foreground" Value="#43854B" />
                                            <Setter TargetName="txt1" Property="FontWeight" Value="Bold" />
                                        </Trigger>
                                        <DataTrigger Binding="{Binding CommandParameter, RelativeSource={RelativeSource Self}}" Value="0">
                                            <Setter TargetName="border1" Property="CornerRadius" Value="5,0,0,5" />
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding CommandParameter, RelativeSource={RelativeSource Self}}" Value="2">
                                            <Setter TargetName="border1" Property="CornerRadius" Value="0,5,5,0" />
                                        </DataTrigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

xam

<RadioButton Content="长度" CommandParameter="0"  Style="{StaticResource rbut_style1}" IsChecked="True"/>
<RadioButton Content="宽度" CommandParameter="1"  Style="{StaticResource rbut_style1}" />
<RadioButton Content="高度" CommandParameter="2"  Style="{StaticResource rbut_style1}" />

根据 CommandParameter 的value不同，背景圆角的方向不同

效果如