答案 0 :(得分:22)
如果未通过样式触发器
检查Opacity
,则可以更改RadioButton
<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">
<!-- new template -->
</ControlTemplate>
</RadioButton.Template>
可以找到默认模板here
我的原始模板看起来像这样(我在ItemsControl
添加了3个radioButtons,第二个被检查了)
<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>
答案 1 :(得分:2)
ListBox
与自定义ItemTemplate
一起使用,而不是自定义RadioButton
单个项目的ViewModel
public class CountryVm
{
public CountryVm()
{
ImageUri = new Uri("Resources/rgb.png", UriKind.Relative);
}
public string Name { get; set; }
public Uri ImageUri { get; set; }
}
ListBox标记
<ListBox Name="Countries" ItemsSource="{Binding}" SelectionMode="Single"
HorizontalAlignment="Center" VerticalAlignment="Top"
BorderThickness="0">
<!--changing default ListBoxItem to hide selection highlight-->
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Background="Transparent" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
<!--changing default orientation-->
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type wpf2:CountryVm}">
<!--circle image border-->
<Border Name="Border"
BorderThickness="1" BorderBrush="Black" Background="{x:Null}"
Width="48" Height="48" CornerRadius="24" Margin="4"
ToolTip="{Binding Name}">
<Image Source="{Binding Path=ImageUri}" Stretch="None"/>
<!--changing selected item opacity via trigger-->
<Border.Style>
<Style TargetType="Border">
<Setter Property="Opacity" Value="0.5"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected,
RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
Value="True">
<Setter Property="Opacity" Value="1"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
测试DataContext
:
DataContext = new List<CountryVm>
{
new CountryVm {Name = "123"},
new CountryVm {Name = "Abc"},
new CountryVm {Name = "Xyz"},
};
结果