WPF RadioButton/ToggleThiết kế kiểu nút

Question

Tôi muốn bắt chước kiểu cho nhóm ToggleButton như trong hình bên dưới. Chỉ một trong các nút có thể là "Đã kiểm tra" bất cứ lúc nào.

Câu hỏi của tôi có liên quan đến phong cách:

• Tôi muốn có góc tròn vào nút bên trái và nút ngoài cùng bên phải như trong hình ảnh, nhưng nếu có một nút giữa (giống như trong hình ảnh), không nên có các góc tròn. Đôi khi có thể chỉ có hai nút để chuyển đổi.
• Tôi cần kiểu dáng cho các trạng thái khác nhau: "Bình thường/Không được chọn", "Di chuột", "Đã nhấn" và "Đã chọn" ở mức tối thiểu.

Việc kiểm soát hiện tại tôi đang sử dụng cho điều này được thực hiện như thế này:

<StackPanel Orientation="Horizontal" > 
    <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="All" Padding="12,8,12,8" GroupName="View" /> 
    <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Geolocated" Padding="12,8,12,8" GroupName="View" /> 
    <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Content="Non Geolocated" Padding="12,8,12,8" GroupName="View" /> 
</StackPanel> 

Trong Tài StackPanel Tôi cố gắng để thiết lập Style cho ToggleButton nhưng tôi khá mất làm thế nào để đạt được kết quả như trong hình trên.

Answer 1

này có thể không phải là phương pháp đơn giản nhất/tốt nhất, nhưng tôi mất một đâm vào gõ lên một số ControlTemplates sử dụng Kaxaml, để sản xuất cái gì đó trông như thế này:

Bạn có thể lưu trữ những mẫu này trong a ResourceDictionary và áp dụng chúng khi cần hoặc sử dụng chúng nếu bạn đang xây dựng danh sách nút của mình khi đang di chuyển. Tôi thực sự tạo ra ba phong cách hơi khác nhau, một cho các nút trái và phải, và một cho giữa (bạn có thể đơn giản hóa điều này với mở rộng/kế thừa phong cách). Một số mã lặp lại bị bỏ qua.

<Grid> 
    <Grid.Resources> 
     <!-- Brushes for colours/backgrounds --> 
     <SolidColorBrush x:Key="FontBrush" Color="#DDDDDD"/> 

     <LinearGradientBrush x:Key="BgBrush1" StartPoint="0,0" EndPoint="0,1"> 
      <GradientStop Offset="0" Color="#888888"/> 
      <GradientStop Offset="1" Color="#222222"/> 
     </LinearGradientBrush> 

     <SolidColorBrush x:Key="BorderBrush1" Color="#333333"/> 
     <LinearGradientBrush x:Key="CheckedBrush" StartPoint="0,0" EndPoint="0,1"> 
      <GradientStop Offset="0" Color="#555555"/> 
      <GradientStop Offset="1" Color="#111111"/> 
     </LinearGradientBrush> 

     <!-- Left Button Template --> 
     <ControlTemplate x:Key="ToggleButtonLeft" TargetType="{x:Type ToggleButton}"> 
      <Border 
       Name="Border" 
       Background="{StaticResource BgBrush1}" 
       BorderBrush="{StaticResource BorderBrush1}" 
       BorderThickness="1" 
       CornerRadius="5,0,0,5"> 
       <ContentPresenter 
        HorizontalAlignment="Center" 
        Margin="{TemplateBinding Padding}" 
        VerticalAlignment="Center" 
        Content="{TemplateBinding Content}" 
        TextBlock.FontWeight="Bold" 
        TextBlock.Foreground="{StaticResource FontBrush}"/> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger Property="ToggleButton.IsMouseOver" Value="true"> 
        <Setter TargetName="Border" Property="Background" Value="#808080"/> 
       </Trigger> 
       <Trigger Property="IsChecked" Value="true"> 
        <Setter TargetName="Border" Property="Background" Value="{StaticResource CheckedBrush}"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 

     <!-- Middle Button(s) Template --> 
     <ControlTemplate x:Key="ToggleButtonMid" TargetType="{x:Type ToggleButton}"> 
      <Border 
       Name="Border" 
       Background="{StaticResource BgBrush1}" 
       BorderBrush="{StaticResource BorderBrush1}" 
       BorderThickness="0,1,0,1" 
       CornerRadius="0" /> 
     <!-- Other code identical to Left Button Template -->  
     </ControlTemplate> 

     <!-- Right Button Template --> 
     <ControlTemplate x:Key="ToggleButtonRight" TargetType="{x:Type ToggleButton}"> 
      <Border 
       Name="Border" 
       Background="{StaticResource BgBrush1}" 
       BorderBrush="{StaticResource BorderBrush1}" 
       BorderThickness="1" 
       CornerRadius="0, 5, 5, 0" /> 
     <!-- Other code identical to Left Button Template --> 
     </ControlTemplate> 
    </Grid.Resources> 

    <!-- Example Usage --> 
    <Grid Background="#555555"> 
     <StackPanel Height="25" Orientation="Horizontal" Margin="5"> 
      <RadioButton Content="All" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonLeft}"/> 
      <RadioButton Content="Geolocated" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonMid}"/> 
      <RadioButton Content="Non Geolocated" GroupName="View" Padding="2" Template="{DynamicResource ToggleButtonRight}"/> 
     </StackPanel> 
    </Grid> 
</Grid> 

Bạn sẽ phải bổ sung thêm Triggers vv cho tình trạng IsPressed, và bất kỳ những người khác yêu cầu (ví dụ IsEnabled).