WPF switch with image

Question

I need to create something that looks like an image. If you press one of the buttons, the rest should become darker. Thank you very much!

What I need

Answer 1

you can change the Opacity when the RadioButton not checked with a 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 changing Template

 <RadioButton.Template> <ControlTemplate TargetType="RadioButton"> <!-- new template --> </ControlTemplate> </RadioButton.Template> 

the default template can be found here

---

my primitive template is as follows (I added 3 radioButtons to ItemsControl , second 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> 

Answer 2

After a while I found a different approach. Instead of a custom RadioButton, you can use a ListBox with a custom ItemTemplate

ViewModel for one item

 public class CountryVm { public CountryVm() { ImageUri = new Uri("Resources/rgb.png", UriKind.Relative); } public string Name { get; set; } public Uri ImageUri { get; set; } } 

ListBox Markup

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

test DataContext :

 DataContext = new List<CountryVm> { new CountryVm {Name = "123"}, new CountryVm {Name = "Abc"}, new CountryVm {Name = "Xyz"}, }; 

result