帶有圖片的WPF單選按鈕

Question

我必須創建類似於圖片的東西。如果其中一個按鈕被點擊，其他人應該變黑。非常感謝！

這就是我需要

Answer 1

你可以改變Opacity當通過風格觸發

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

修改創建未選中 RadioButton

默認模板，可以發現here

---

我的原始模板看起來像這樣（我已經添加3個單選按鈕進入ItemsControl，第二個被選中）

<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

一段時間後，我發現另一種方法。相反，自定義單選按鈕的，可以使用ListBox定製ItemTemplate

視圖模型對單個項目

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

    public string Name { get; set; } 

    public Uri ImageUri { get; set; } 
} 

列表框標記

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

結果