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>
...全文
1441 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>
WPF界面设计
模仿金山卫士，360卫士，鲁大师等软件界面 完整源码奉上，一起学习，需要的来下载吧！
WPF仿360卫士9.0界面设计
WPF仿360卫士9.0界面设计 http://www.cnblogs.com/bdstjk/
WPF高仿360卫士9.0界面设计
WPF高仿360卫士9.0界面设计的源码
WPF经典教程之WPF控件内容模型
WPF控件内容模型主要指派生于System.Windows.Controls.Control类的各种控件，其主要分为四部分： • ContentControl • HeaderedContendControl • ItemsControl • HeaderedItemsControl 其继承关系请参考我上一篇博客的内容。.... (更多资源：http://cleopard.download.csdn.net/) (福利：http://xuemeilaile.com/) WPF经典教程之WPF体系结构 http://download.csdn.net/detail/cleopard/7999393 WPF经典教程之WPF应用程序管理 http://download.csdn.net/detail/cleopard/8002969 WPF经典教程之WPF窗体 http://download.csdn.net/detail/cleopard/8002979 WPF经典教程之StackPanel、WrapPanel、DockPanel布局 http://download.csdn.net/detail/cleopard/8002985 WPF经典教程之Grid、UniformGrid布局 http://download.csdn.net/detail/cleopard/8002993 WPF经典教程之Canvas、InkCanvas布局 http://download.csdn.net/detail/cleopard/8002997 WPF经典教程之WPF控件模型 http://download.csdn.net/detail/cleopard/8002999
WPF主题包（20款不同风格的皮肤）
20多款WPF主题皮肤样式，包含使用示例和代码，可轻松实现换肤，也可将样式代码复制到自己程序的资源文件中
C#

111,098

社区成员

642,554

社区内容

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

加载中

查看更多榜单
社区公告

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

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

+ 用AI写文章