XAML ToggleButton 使用 isChecked={Binding xyz} 更改背景图片

Question

我现在 app.xaml 中有以下工作代码...

<Style x:Key="likeActionButton" TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="HoverBackground"
                                                Storyboard.TargetProperty = "Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="PressedBackground"
                                                Storyboard.TargetProperty = "Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border>
                                <Grid>
                                    <Image Width="25" Source="ms-appx:///Assets\ActionIcons\like-action.png"></Image>
                                    <Image x:Name="HoverBackground" Width="25" Source="ms-appx:///Assets\ActionIcons\like-action-onHover.png" Visibility="Collapsed"></Image>
                                    <Image x:Name="PressedBackground" Width="25" Source="ms-appx:///Assets\ActionIcons\like-action-on-pressed.png" Visibility="Collapsed"></Image>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

我用以下方式调用此模板：

<ToggleButton Grid.Column="4" HorizontalAlignment="Center" 
                                          Style="{StaticResource likeActionButton}" 
                                          IsChecked="{Binding LikeState}"  
                                          Tapped="Favourite_Tapped"></ToggleButton>

LikeState 的绑定并不像我希望的那样完美。

很难解释，但我会试一试...

我可以 select 和 deselect ToggleButton 并且背景图像将始终翻转。 LikeState 后面的绑定似乎适用于属性但不适用于图像。这意味着当数据加载和布尔值 LikeState = true 属性 ToggleButton.IsChecked = true 但背景图像是 VisualState x:Name="Normal".

的图像

换句话说... 我正在使用 LikeState = true 加载数据。如果我第一次单击 ToggleButton，背景图像不会改变，但代码隐藏文件会执行 isChecked = true 的代码第二次单击 ToggleButton 确实会将背景图像更改为 VisualState x:Name="Pressed"

那么我需要做什么才能根据动态填充设置正确的背景图像属性 isChecked={Binding LikeState}

干杯，

克里斯

Answer 1

尝试Mode=TwoWay绑定。由于您在后面的代码中更改了有界属性值，因此为了反映这一点，您必须将 Mode 指定为 TwoWay

更新

我已经检查了你的代码。没有双向绑定就可以正常工作。

使用视觉状态选中

<VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver"/>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled">
                                      </VisualState>
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="PressedBackground"
                                                Storyboard.TargetProperty = "Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                           </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CheckedPointerOver">

                                    </VisualState>
                                    <VisualState x:Name="CheckedPressed"/>
                                    <VisualState x:Name="CheckedDisabled">
                                    </VisualState>
                                    <VisualState x:Name="Indeterminate"/>
                                    <VisualState x:Name="IndeterminatePointerOver"/>
                                    <VisualState x:Name="IndeterminatePressed"/>
                                    <VisualState x:Name="IndeterminateDisabled">
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

希望您为 LikeState 属性实施 INotifyPropertyChanged，以便最初会对其进行检查。如果没有，请执行以下操作。这是我所做的

 public sealed partial class MainPage : Page, INotifyPropertyChanged
    {
        bool likeState=true;
        public bool LikeState 
        {
            get { return likeState; }
            set
            {
                if(value!=likeState)
                {
                    value = likeState;
                    OnPropertyChanged("LikeState");
                }
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        void OnPropertyChanged(string propertyName)
        {
           if(this.PropertyChanged!=null)
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));

        }
        public MainPage()
        {
            this.InitializeComponent();

            this.NavigationCacheMode = NavigationCacheMode.Required;
            LikeState = true;
            toggle.DataContext = this;

        }
}

XAML ToggleButton 使用 isChecked={Binding xyz} 更改背景图片

XAML ToggleButton change background image with isChecked={Binding xyz}

c#

wpf

xaml

windows-phone-8.1