带图片的WPF单选按钮 [英] WPF radio button with Image

问题描述

我必须创建类似于图片的内容。如果单击其中一个按钮，则其他按钮应变暗。非常感谢！

这就是我需要的

解决方案

当 RadioButton <时，您可以更改不透明度 / code>不会通过样式触发器进行检查

 < 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> 
  

里面的图像可以通过修改 Template

 < RadioButton.Template> 
< ControlTemplate TargetType = RadioButton> 
<！-新模板-> 
< / ControlTemplate> 
< /RadioButton.Template> 
  

可以找到默认模板

 < 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> 
  




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屋！