Ghi đè ToggleButton Style

Question

Tôi có ToggleButton trong cửa sổ và được tạo kiểu trong ResourceDictionary. Lý do tại sao nó trong ResourceDictionary là bởi vì tôi có một vài hoặc nhiều ToggleButton sớm mà phải có cùng một cái nhìn.

<Style x:Key="Standardbutton" TargetType="{x:Type ToggleButton}"> 
    <Setter Property="FontSize" Value="18" /> 
    <Setter Property="Foreground" Value="White" /> 
    <Setter Property="Background"> 
     <Setter.Value> 
      <ImageBrush ImageSource="Resources/Standard_Button_Normal.png" /> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Height" Value="56" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ToggleButton"> 
       <Border Name="border" BorderThickness="0" Padding="0,0" BorderBrush="DarkGray" CornerRadius="0" Background="{TemplateBinding Background}"> 
        <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" Name="content" Margin="15,0,0,0"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsChecked" Value="True"> 
         <Setter Property="Background"> 
          <Setter.Value> 
           <ImageBrush ImageSource="Resources/Standard_Button_Pressed.png" /> 
          </Setter.Value> 
         </Setter> 
         <Setter Property="Foreground"> 
          <Setter.Value> 
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
            <GradientStop Color="#FFF9CE7B" Offset="0"/> 
            <GradientStop Color="#FFE88C41" Offset="1"/> 
           </LinearGradientBrush> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Bây giờ kiểu ToggleButton này có nền mặc định và khi "IsChecked" là đúng, nó sẽ có nền khác (như bạn có thể thấy trên mã XAML ở trên).

Bây giờ những chuyển nút phải có biểu tượng dấu + văn bản kết hợp, giống như những gì tôi đã làm ở đây (xin lỗi cho mã XAML què của tôi)

<ToggleButton Style="{DynamicResource Standardbutton}" Margin="0,0,0,4"> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="Resources/scan_26x26.png" /> 
     <TextBlock Text="Scan"/> 
    </StackPanel> 
</ToggleButton> 

Câu hỏi đặt ra là, làm thế nào tôi có thể có một biểu tượng khác khi ToggleButton được chọn (IsChecked = True)?

Dưới đây là một số hình ảnh mà có thể giúp bạn hiểu được những câu hỏi

Bình thường ToggleButton Phong cách

IsChecked = True Phong cách

mục tiêu thiết kế của tôi là phải có một biểu tượng khác nhau khi IsChecked = True

Answer 1

Thêm cả hai hình ảnh vào mẫu điều khiển và liên kếtcủa chúngbất động sản cho các tài sản IsChecked (sử dụng một IValueConverter để chuyển đổi từ đúng/sai thành giá trị enum thích hợp Visibility).

<ToggleButton Style="{DynamicResource Standardbutton}" Margin="0,0,0,4"> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="Resources/scan_26x26.png" 
       Visibility="{Binding 
        RelativeSource={RelativeSource AncestorType=ToggleButton}, 
        Path=IsChecked, 
        Converter={StaticResource BoolToVisibleConverter}}" /> 
     <Image Source="Resources/anotherimage.png" 
        Visibility="{Binding 
        RelativeSource={RelativeSource AncestorType=ToggleButton}, 
        Path=IsChecked, 
        Converter={StaticResource BoolToCollapsedConverter}}" /> 
     <TextBlock Text="Scan"/> 
    </StackPanel> 
</ToggleButton> 

tôi đã sử dụng hai bộ chuyển đổi BoolToVisibleConverter và BoolToCollapsedConverter, nhưng bạn cũng có thể sử dụng một ConverterParameter để thực hiện điều tương tự.