覆蓋ToggleButton樣式

Question

我的窗口中有一個ToggleButton，並在我的ResourceDictionary中有樣式。它在ResourceDictionary中的原因是我很快有幾個或更多的ToggleButton，它們必須具有相同的外觀。

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

現在這個切換按鈕風格有一個默認的背景，也當「器isChecked」是真的，這將有不同的背景（你可以在我的XAML代碼見上文）。

現在這些切換按鈕必須有圖標+文字相結合，像我一樣在這裏（對不起我的跛腳XAML代碼）

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

的問題是，我怎麼能有不同的圖標，當切換按鈕被檢查（IsChecked = True）？

這裏有一些圖像，可能有助於您瞭解這個問題

正常切換按鈕樣式

器isChecked =真風格

我的設計目標是有不同的圖標時器isChecked =真

Answer 1

將這兩個圖像添加到控件模板，並綁定它們的Visibility屬性到IsChecked屬性（使用IValueConverter將真/假轉換爲適當的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> 

我用了兩個轉換器BoolToVisibleConverter和BoolToCollapsedConverter，但你也可以使用一個ConverterParameter來完成同樣的事情。