WPF Radio Button mit Bild

Question

Ich muss etwas ähnliches wie das Bild erstellen. Wenn einer der Knöpfe angeklickt wird, sollten die anderen dunkler werden. Danke vielmals!

Das ist, was ich

Answer 1

benötigen, können Sie Opacity ändern, wenn RadioButton nicht über Stil Trigger

geprüft

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

Bild nach innen durch Modifikation von Template erstellt werden können

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

Standardvorlage können here

---

meine primitive Vorlage sieht wie folgt zu finden (ich habe hinzugefügt 3 Radiobuttons in ItemsControl wird die zweite geprüft)

<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

nach einiger Zeit, die ich einen anderen Ansatz gefunden. Anstelle von benutzerdefinierten RadioButton- kann man verwenden ListBox mit benutzerdefinierten ItemTemplate

Ansichtsmodell für ein einzelnes Element

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"}, 
}; 

Ergebnis