[英]XAML ToggleButton change background image with isChecked={Binding xyz}
我的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
的绑定并不像我希望的那样完美。
很难解释,但我会尝试一下...
我可以选择和取消选择ToggleButton
,背景图片将始终翻转。 LikeState
背后的LikeState
似乎适用于该属性,但不适用于该图像。 这意味着,当数据加载且布尔值LikeState = true
,属性ToggleButton.IsChecked = true
但背景图像是VisualState x:Name="Normal"
。
再说一遍...我正在用LikeState = true
加载数据。 如果我第一次单击ToggleButton,则背景图像不会更改,但是代码隐藏文件将执行isChecked = true
的代码。第二次单击ToggleButton时,背景图像将变为VisualState x:Name="Pressed"
因此,我该怎么做才能根据动态填充的属性isChecked={Binding LikeState}
设置正确的背景图像。
干杯,
克里斯
尝试在绑定中使用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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.