I am trying to give my ToggleButton
a different image depending on the IsChecked
state of the ToggleButton
, but in UWP Style triggers no longer exist, so it has to be done in a different way.
I ran into discussions where the supposed solution is to use DataTriggerBehavior
, but I am getting nowhere.
What I want to achieve (blue is unchecked, green is checked):
Is the following in the good direction?
<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>
Or is there a better / easier way to achieve this? I also read something about VisualStateManager, which I also have zero experience with...
Hope that somebody can push me in the right direction...
Try this
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.