[英]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.