UWP ToggleButton 图像取决于 IsChecked

Question

我正在尝试根据 ToggleButton 的 IsChecked 状态为我的 ToggleButton 提供不同的图像，但在 UWP 样式中触发器不再存在，因此它必须是以不同的方式完成。

我运行讨论了假定的解决方案是使用 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>

UWP ToggleButton 图像取决于 IsChecked

UWP ToggleButton image depending on IsChecked

c#

xaml

uwp

win-universal-app