WPF界面设计RadioButton选中如何设置整个控件背景变色,Background只改变圆圈

qq_42254981 2020-02-02 01:25:15

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

<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>
...全文
1436 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
github_36000833 2020-02-04
  • 打赏
  • 举报
回复
引用 4 楼 qq_42254981 的回复:
... 再询问下您,如果我想给图标和文字设置 不一样的颜色,如果还是用TemplateBinding 把Foreground开放出来,那么修改一个会同时两个都会改动。请教下有更好方法吗? ...
Foreground是依赖属性,也就是说如果没有显性设置,它会使用‘父控件’的设置。 你的代码出错在于<TextBlock Name="TB1">'继承了'RadioButtong的Foreground设置。 解决方法就是隔断’继承‘: <TextBlock Text="{TemplateBinding Tag}" FontSize="20" VerticalAlignment="Center" Background="Black" /> <ContentPresenter VerticalAlignment="Center" TextBlock.FontSize="20" Margin="5,0,0,0" /> <!-- 无需设置TextBlock.Background--!>
qq_42254981 2020-02-03
  • 打赏
  • 举报
回复
引用 3 楼 github_36000833 的回复:
你要自定义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更容易。

  <TextBlock Name="TB1" Text="{TemplateBinding  Tag}" FontSize="{TemplateBinding FontSize}" VerticalAlignment="Center"  Foreground="{TemplateBinding Foreground}"  />
   <ContentPresenter VerticalAlignment="Center" TextBlock.FontSize="{TemplateBinding FontSize}" Margin="5,0,0,0" TextBlock.Foreground="{TemplateBinding Foreground}" />
再询问下您,如果我想给图标和文字设置 不一样的颜色,如果还是用TemplateBinding 把Foreground开放出来,那么修改一个会同时两个都会改动。请教下有更好方法吗?

 <RadioButton Style="{StaticResource Rbt_1 }" Tag="▲" Content="测试1" FontSize="20" Foreground="Aqua" />
                <RadioButton Style="{StaticResource Rbt_1 }" Tag="☆"  Content="测试2" FontSize="20" Foreground="Red" />
github_36000833 2020-02-03
  • 打赏
  • 举报
回复
你要自定义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更容易。
qq_42254981 2020-02-02
  • 打赏
  • 举报
回复
引用 1 楼 github_36000833 的回复:
RadioButton的样式,可以管理自己的样式,不管自己有多复杂。但是,它不应该伸手太长,出界管理不属于自己的样式。 正常的做法是,由你说的那个“整个控件”来管理自己的背景色。它可以选择绑定到某个数据,也可以绑定到选定的子控件上。 比如说,使用测试1的背景可以这样做: <Grid Column="0" Background="{Binding Background, Mode=OneWay, ElementName=测试1}"> <StackPanel> <RadioButton x:Name="测试1" 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>
可能是我表达不清,想要实现这样的功能,测试1里面的StackPanel是在RadioButton包含里面的。
github_36000833 2020-02-02
  • 打赏
  • 举报
回复
RadioButton的样式,可以管理自己的样式,不管自己有多复杂。但是,它不应该伸手太长,出界管理不属于自己的样式。 正常的做法是,由你说的那个“整个控件”来管理自己的背景色。它可以选择绑定到某个数据,也可以绑定到选定的子控件上。 比如说,使用测试1的背景可以这样做: <Grid Column="0" Background="{Binding Background, Mode=OneWay, ElementName=测试1}"> <StackPanel> <RadioButton x:Name="测试1" 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>
内容概要:本文详细介绍了Anaconda的下载、安装与配置方法(2025最新版)。Anaconda是一个开源的Python/R数据科学集成开发平台,预装了1500多个科学计算库,并提供conda包管理和环境管理功能。文章首先列出了系统要求,接着分别讲述了适用于不同操作系统的下载方式,包括官方下载和国内镜像下载。然后,具体讲解了Windows、macOS和Linux三种操作系统的安装步骤,以及环境变量的手动配置方法。此外,还提供了验证安装是否成功的命令和配置国内镜像源的方法,以提高下载速度。最后,列出了一些常用conda命令和常见问题的解决方案。 适合人群:从事数据科学、机器学习领域的研究人员和开发者,特别是需要频繁使用Python科学计算库的用户。 使用场景及目标:①帮助用户快速搭建Python开发环境,尤其是需要多个Python版本共存或隔离环境的情况下;②解决因网络原因导致的下载速度慢的问题;③提供详细的安装指南,确保安装过程顺利进行;④指导用户正确配置环境变量,避免常见的安装后无法使用的错误。 阅读建议:由于Anaconda涉及多平台安装和配置,建议读者根据自己的操作系统选择相应的章节重点阅读,并严格按照步骤操作。对于初次使用者,建议先从简单的安装入手,再逐步学习环境管理和包管理的相关命令。

111,095

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术 C#
社区管理员
  • C#
  • AIGC Browser
  • by_封爱
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

让您成为最强悍的C#开发者

试试用AI创作助手写篇文章吧