C#WPF如何设置整个RadioButton选中控件背景变色界面设计

现在是点击后只更改圆圈里面的颜色,如何更改整个控件背景色?
下面是我写的触发器和 界面代码


 <Page.Resources>
        <Style x:Key="Rbt_1" TargetType="RadioButton">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background" Value="Aqua"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Page.Resources>

 


<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid Column="0"  Background="White">
            <StackPanel>
                <RadioButton  MinHeight="40" VerticalContentAlignment="Center" Style="{StaticResource Rbt_1 }">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="星星" FontSize="20" VerticalAlignment="Center"></TextBlock>
                        <TextBlock Text="测试1" FontSize="20" VerticalAlignment="Center" Margin="5,0,0,0"></TextBlock>
                    </StackPanel>
                </RadioButton>
                <RadioButton MinHeight="40" VerticalContentAlignment="Center" Style="{StaticResource Rbt_1 }">
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" >
                        <TextBlock Text="三角" FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                        <TextBlock Text="测试2" FontSize="20" Margin="5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                    </StackPanel>
                </RadioButton>
            </StackPanel>

        </Grid>
    </Grid>

要自定义RadioButton的展示,即它的模板Template。
ControlTemplate的Trigger允许你设置
小蜜蜂论坛回帖机模板下的元素,包括它的背景,比如


    <Style x:Key="Rbt_1" TargetType="RadioButton">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="RadioButton">
            <StackPanel x:Name="frame" Orientation="Horizontal" Background="Transparent">
              <Image x:Name="tick" Width="24" Height="24" Margin="2" Visibility="Hidden" Source="https://icon-library.net/images/small-check-mark-icon/small-check-mark-icon-0.jpg" />
              <TextBlock Text="{TemplateBinding Tag}" FontSize="20" VerticalAlignment="Center" />
              <ContentPresenter VerticalAlignment="Center" TextBlock.FontSize="20" Margin="5,0,0,0" />
            </StackPanel>
            <ControlTemplate.Triggers>
              <Trigger Property="IsChecked" Value="true" >
                <Setter TargetName="frame" Property="Background" Value="Aqua" />
                <Setter TargetName="tick" Property="Visibility" Value="Visible" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Setter Property="MinHeight" Value="40" />
      <Setter Property="VerticalAlignment" Value="Center" />
    </Style>

这样使用样式:

    <Grid Column="0">
      <StackPanel>
        <RadioButton Style="{StaticResource Rbt_1 }" Tag="▲" Content="测试1" />
        <RadioButton Style="{StaticResource Rbt_1 }" Tag="☆"  Content="测试2" />
      </StackPanel>
    </Grid>

要模拟原生的RadioButton不是太容易,你可以参考微软的RadioButton styling话题:
https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/controls/radiobutton-styles-and-templates

另,不是很清楚你的实际需求,不过我怀疑自定义RadioButton不见得是你的最佳选择,比如展现多行数据用GridView更容易。

发布了27 篇原创文章 · 获赞 0 · 访问量 1094

猜你喜欢

转载自blog.csdn.net/netyou/article/details/104213069
今日推荐