Pulsante di scelta WPF con immagine

Question

Devo creare qualcosa di simile all'immagine. Se si fa clic su uno dei pulsanti, gli altri dovrebbero diventare più scuri. Molte grazie!

Questo è quello che mi serve

Answer 1

è possibile modificare Opacity quando RadioButton non è selezionata attraverso lo stile di innesco

immagine

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

all'interno può essere creato da modificazione della Template

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

modello predefinito può essere trovato here

---

mio modello primitivo assomiglia a questo (ho aggiunto 3 radiobuttons in ItemsControl, il 2 ° è selezionata)

<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

dopo qualche tempo ho trovato un altro approccio. Invece di costume RadioButton, si può usare ListBox con l'abitudine ItemTemplate

ViewModel per un singolo elemento

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> 

prova DataContext:

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

risultato