我的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:///AssetsActionIconslike-action.png"></Image>
<Image x:Name="HoverBackground" Width="25" Source="ms-appx:///AssetsActionIconslike-action-onHover.png" Visibility="Collapsed"></Image>
<Image x:Name="PressedBackground" Width="25" Source="ms-appx:///AssetsActionIconslike-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 = true
时,属性ToggleButton.IsChecked = true
但是背景图像是VisualState x:Name="Normal"
的图像。
再说一遍,换言之。。。我正在用LikeState = true
加载数据。如果我第一次点击ToggleButton,背景图像不会改变,但代码隐藏文件执行isChecked = true
的代码第二次点击ToggleButton将背景图像更改为VisualState x:Name="Pressed"
那么,我该怎么做才能根据动态填充属性isChecked={Binding LikeState}
设置正确的背景图像呢
干杯,
Chris
在绑定中尝试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;
}
}