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>
...全文
1264 5 打赏 收藏 转发到动态 举报
写回复
用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开发教程 ----WPF C# 编程 界面开发(很不错)
WPF开发教程.rar 目录 WPF基础入门 3 1. WPF基础之体系结构 3 2. WPF基础之XAML 9 3. WPF基础之基元素 23 4. WPF基础之属性系统 26 5. WPF基础之路由事件 33 6. WPF基础之布局系统 46 7. WPF基础之样式设置和模板化 51 8. 详谈WPF开发中的数据虚拟化 64 XAML语法 74 1. XAML语法术语 74 2. 代码隐藏和XAML 82 3. XAML和自定义类 83 4. 标记扩展和XAML 87 5. XAML命名空间和命名空间映射 90 6. WPF名称范围 92 WPF控件开发 95 1. WPF控件开发之控件概述 95 2. 使用XAML创建按钮 103 3. WPF控件库之BUTTON 114 4. WPF控件库之MENU 115 5. WPF控件库之LABLE 119 6. WPF控件库之TOOLBAR 121 7. WPF控件开发之自定义控件 124 8. WPF控件开发之装饰器 140 WPF数据绑定 143 1. 数据绑定概述 143 2. WPF数据绑定之绑定源 164 3. WPF数据绑定之数据模板 166 4. WPF数据绑定之绑定声明 181 5. 实例一：绑定到ADO.NET数据源 184 6. 实例二：绑定到LINQ查询的结果 186 WPF图形和多媒体开发 187 1. WPF 图形动画和媒体概述 187 2. WPF的图形呈现 191 3. WPF的图像处理 205 4. WPF的三维图形应用 219 5. WPF的三维变换应用 229 6. WPF的动画开发 238 7. WPF的多媒体开发 250
WPF高仿360卫士9.0界面设计
WPF高仿360卫士9.0界面设计的源码
从新手入门WPF框架编程(C# VS2022)
WPF（Windows Presentation Foundation）是微软新一代图形系统，基于DirectX 9/10技术的WPF不仅带来了前所未有的3D界面， 程序员在WPF的帮助下，要开发出媲美Mac程序的酷炫界面已不再是遥不可及的奢望。 WPF框架提供了超丰富的.NET UI框架，集成了矢量图形、动画、丰富的流动文字支持，3D视觉效果和强大无比的控件模型框架，它提供了统一的编程模型、语言，依靠.Net平台的成熟生态 ，真正做到了分离界面设计与代码开发，让开发者可快速创建绚丽漂亮的基于Windows的桌面应用程序, 本课程是黄老师的 .Net平台开发系列课程之一，通过WPF框架控件与精炼知识点的梳理与细致讲解，结合代码实战演练，帮助学员迅速掌握WPF开发，达到企业级WPF框架开发的水平！
WPF界面设计
模仿金山卫士，360卫士，鲁大师等软件界面 完整源码奉上，一起学习，需要的来下载吧！
WPF自定义控件开发Sample
一个关于WPF自定义开发的小例子 13份WPF经典开发教程 http://download.csdn.net/album/detail/1115 C#资料合辑二[C#桌面编程入门篇] http://download.csdn.net/album/detail/957 C#资料合辑一[C#入门篇] http://download.csdn.net/album/detail/669 [Csharp高级编程(第6版)](共8压缩卷) http://download.csdn.net/album/detail/667 10个[精品资源]Java学习资料合辑[一] http://download.csdn.net/album/detail/663 10个C#Socket编程代码示例 http://download.csdn.net/album/detail/631 6份GDI+程序设计资源整合[全零分] http://download.csdn.net/album/detail/625 更多免费资源 http://download.csdn.net/user/cleopard
C#

110,533

社区成员

642,574

社区内容

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

加载中

查看更多榜单
社区公告

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

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

+ 用AI写文章