取決於IsChecked的UWP ToggleButton圖像

Question

我試圖根據ToggleButton的IsChecked狀態給我的ToggleButton取一個不同的圖像，但是在UWP Style觸發器不再存在，因此必須以不同的方式完成。

我跑到討論的地方，假設的解決方案是使用DataTriggerBehavior，但我無處可去。

我想實現（藍色未被選中，綠色被選中）：

是在好的方向以下？

<ToggleButton 
    x:Name="ToggleButton" 
    IsChecked="{Binding SignalButtonSelected, Mode=TwoWay}" 
    Command="{Binding SignalButtonCommand}"> 
    <Grid> 
    <Image x:Name="IsCheckedImage" Source="Images/Buttons/Button signal.png"> 
     <Interactivity:Interaction.Behaviors> 
      <Core:DataTriggerBehavior Binding="{Binding IsChecked, ElementName=ToggleButton}" Value="True"> 
       <Core:ChangePropertyAction TargetObject="{Binding ElementName=IsCheckedImage}" PropertyName="Visibility" Value="Collapsed" /> 
      </Core:DataTriggerBehavior> 
     </Interactivity:Interaction.Behaviors> 
    </Image> 
    <Image x:Name="IsUncheckedImage" Source="Images/Buttons/Button electric ns.png"> 
     <Interactivity:Interaction.Behaviors> 
      <Core:DataTriggerBehavior Binding="{Binding IsChecked, ElementName=ToggleButton}" Value="False"> 
       <Core:ChangePropertyAction TargetObject="{Binding ElementName=IsUncheckedImage}" PropertyName="Visibility" Value="Collapsed" /> 
      </Core:DataTriggerBehavior> 
     </Interactivity:Interaction.Behaviors> 
    </Image> 
    </Grid> 
</ToggleButton> 

還是有更好/更簡單的方法來實現這一目標嗎？我也看過一些關於VisualStateManager，這我也有零經驗...

希望有人可以把我在正確的方向...

Answer 1

試試這個

<ToggleButton x:Name="ToggleButton" 
       IsChecked="{Binding SignalButtonSelected, Mode=TwoWay}" 
       Command="{Binding SignalButtonCommand}"> 
    <Grid> 
     <Image x:Name="IsCheckedImage" 
       Source="Images/Buttons/Button signal.png"> 
      <Interactivity:Interaction.Behaviors> 
       <Core:DataTriggerBehavior Binding="{Binding IsChecked, ElementName=ToggleButton}" 
              Value="True"> 
        <Core:ChangePropertyAction TargetObject="{Binding ElementName=IsCheckedImage}" 
               PropertyName="Visibility" 
               Value="Collapsed" /> 
        <Core:ChangePropertyAction TargetObject="{Binding ElementName=IsUncheckedImage}" 
               PropertyName="Visibility" 
               Value="Visible" /> 
       </Core:DataTriggerBehavior> 
      </Interactivity:Interaction.Behaviors> 
     </Image> 
     <Image x:Name="IsUncheckedImage" 
       Source="Images/Buttons/Button electric ns.png"> 
      <Interactivity:Interaction.Behaviors> 
       <Core:DataTriggerBehavior Binding="{Binding IsChecked, ElementName=ToggleButton}" 
              Value="False"> 
        <Core:ChangePropertyAction TargetObject="{Binding ElementName=IsCheckedImage}" 
               PropertyName="Visibility" 
               Value="Visible" /> 
        <Core:ChangePropertyAction TargetObject="{Binding ElementName=IsUncheckedImage}" 
               PropertyName="Visibility" 
               Value="Collapsed" /> 
       </Core:DataTriggerBehavior> 
      </Interactivity:Interaction.Behaviors> 
     </Image> 
    </Grid> 
</ToggleButton>