WPF 组合单选 样式 RadioButton Style

本来想写个方便的控件  ,但是真正写起来内容太多了,所以还是分三个样式来解决

等到后面有什么组合的方法 再看

使用自定义控件包裹的话 遇到问题是  Trigger 里面不能动态绑定值

效果如下

       <Grid Height="27" Margin="20,42,20,0" VerticalAlignment="Top">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <RadioButton x:Name="costServer_A" Content="免费服务" IsChecked="True" Click="ChangeCost_Click" Style="{StaticResource GroupSelectRadioButton_Left}" Margin="0" />
                    <RadioButton x:Name="costServer_B" Content="有偿服务" Click="ChangeCost_Click" Style="{StaticResource  GroupSelectRadioButton_Right}" Margin="0" Grid.Column="1" />
                </Grid>
 <!--选择框-->


    <Style x:Key="GroupSelectRadioButton_Left" TargetType="{x:Type RadioButton}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Foreground" Value="Gray"></Setter>
        <Setter Property="Padding" Value="0"></Setter>
        <Setter Property="FontSize" Value="12"></Setter>
        <Setter Property="BorderThickness" Value="0"></Setter>
        <Setter Property="Height" Value="auto"></Setter>
        <Setter Property="SnapsToDevicePixels" Value="true"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <Grid x:Name="grid"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  ClipToBounds="True" >
                        <Rectangle x:Name="ButtonStock"  Fill="{TemplateBinding Background}" Stroke="Gray"  RadiusX="5" RadiusY="5" Margin="0,0,-5,0" StrokeThickness="1"/>
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"  Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                    <!--触发器:设置选中状态符号-->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <!--<Setter Property="BorderThickness" Value="0"/>-->
                            <!--<Setter Property="BorderBrush" Value="#FF37A22D"/>-->
                            <Setter Property="Background" Value="Gray"></Setter>
                            <Setter Property="Foreground" Value="White"></Setter>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Opacity" Value="0.6"></Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.5" TargetName="grid" ></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="GroupSelectRadioButton_Middle" TargetType="{x:Type RadioButton}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Foreground" Value="Gray"></Setter>
        <Setter Property="Padding" Value="0"></Setter>
        <Setter Property="FontSize" Value="12"></Setter>
        <Setter Property="BorderThickness" Value="0"></Setter>
        <Setter Property="Height" Value="auto"></Setter>
        <Setter Property="SnapsToDevicePixels" Value="true"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <Grid x:Name="grid"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  ClipToBounds="True" >
                        <Rectangle x:Name="ButtonStock"  Fill="{TemplateBinding Background}" Stroke="Gray"  RadiusX="0" RadiusY="0" Margin="0,0,0,0" StrokeThickness="1"/>
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"  Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                    <!--触发器:设置选中状态符号-->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <!--<Setter Property="BorderThickness" Value="0"/>-->
                            <!--<Setter Property="BorderBrush" Value="#FF37A22D"/>-->
                            <Setter Property="Background" Value="Gray"></Setter>
                            <Setter Property="Foreground" Value="White"></Setter>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Opacity" Value="0.6"></Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.5" TargetName="grid" ></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="GroupSelectRadioButton_Right" TargetType="{x:Type RadioButton}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Foreground" Value="Gray"></Setter>
        <Setter Property="Padding" Value="0"></Setter>
        <Setter Property="FontSize" Value="12"></Setter>
        <Setter Property="BorderThickness" Value="0"></Setter>
        <Setter Property="Height" Value="auto"></Setter>
        <Setter Property="SnapsToDevicePixels" Value="true"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <Grid x:Name="grid"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  ClipToBounds="True" >
                        <Rectangle x:Name="ButtonStock"  Fill="{TemplateBinding Background}" Stroke="Gray"  RadiusX="5" RadiusY="5" Margin="-5,0,0,0" StrokeThickness="1"/>
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"  Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                    <!--触发器:设置选中状态符号-->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <!--<Setter Property="BorderThickness" Value="0"/>-->
                            <!--<Setter Property="BorderBrush" Value="#FF37A22D"/>-->
                            <Setter Property="Background" Value="Gray"></Setter>
                            <Setter Property="Foreground" Value="White"></Setter>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Opacity" Value="0.6"></Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" Value="0.5" TargetName="grid" ></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值