带有图像的 WPF 单选按钮 [英] WPF radio button with Image
本文介绍了带有图像的 WPF 单选按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我必须创建类似于图片的东西.如果单击其中一个按钮,则其他按钮应变暗.非常感谢!
这就是我需要的
解决方案
当 RadioButton
没有被样式触发器选中时,你可以改变 Opacity
<Style TargetType="RadioButton"><Style.Triggers><Trigger Property="IsChecked" Value="False"><Setter Property="Opacity" Value="0.5"></Setter></触发器></Style.Triggers></风格></RadioButton.Style>
里面的图片可以通过修改Template
<ControlTemplate TargetType="RadioButton"><!-- 新模板--></控制模板></RadioButton.Template>
可以在
<StackPanel.Resources><Style x:Key="Flag" TargetType="RadioButton"><Style.Triggers><Trigger Property="IsChecked" Value="False"><Setter Property="Opacity" Value="0.5"/></触发器></Style.Triggers><Setter Property="BorderThickness" Value="2"/><Setter 属性="模板"><Setter.Value><ControlTemplate TargetType="RadioButton"><Border BorderThickness="{TemplateBinding BorderThickness}"BorderBrush="{TemplateBinding BorderBrush}"背景=透明"CornerRadius="20"><Image Source="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"/></边框></控制模板></Setter.Value></Setter></风格></StackPanel.Resources><项目控制><RadioButton Content="../Resources/radio.png" Style="{StaticResource Flag}" BorderBrush="Red" Width="40" Height="40"/><RadioButton Content="../Resources/radio.png" Style="{StaticResource Flag}" BorderBrush="Orange" Width="40" Height="40"/><RadioButton Content="../Resources/radio.png" Style="{StaticResource Flag}" BorderBrush="Green" Width="40" Height="40"/></ItemsControl></StackPanel>
I have to create something similar to the picture. If one of the button is clicked the others should become darker. Thanks a lot!
That's what I need
解决方案
you can change Opacity
when RadioButton
is not checked via style trigger
<RadioButton.Style>
<Style TargetType="RadioButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Opacity" Value="0.5"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</RadioButton.Style>
image inside can be created by modification of Template
<RadioButton.Template>
<ControlTemplate TargetType="RadioButton">
<!-- new template -->
</ControlTemplate>
</RadioButton.Template>
default template can be found here
my primitive template looks like this (i have added 3 radioButtons into ItemsControl
, the 2nd is checked)
<StackPanel Grid.Row="0" Grid.Column="1">
<StackPanel.Resources>
<Style x:Key="Flag" TargetType="RadioButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Opacity" Value="0.5"/>
</Trigger>
</Style.Triggers>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="Transparent"
CornerRadius="20">
<Image Source="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<ItemsControl>
<RadioButton Content="../Resources/radio.png" Style="{StaticResource Flag}" BorderBrush="Red" Width="40" Height="40"/>
<RadioButton Content="../Resources/radio.png" Style="{StaticResource Flag}" BorderBrush="Orange" Width="40" Height="40"/>
<RadioButton Content="../Resources/radio.png" Style="{StaticResource Flag}" BorderBrush="Green" Width="40" Height="40"/>
</ItemsControl>
</StackPanel>
这篇关于带有图像的 WPF 单选按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文