XAML ToggleButton ändern Hintergrundbild mit isChecked = {Binding xyz}

Question

Ich bin jetzt die folgenden Arbeits Code in meinem app.xaml mit ...

<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> 

Und ich rufe diese Vorlage mit:

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

Die Bindung der LikeState funktioniert nicht so perfekt, wie ich es möchte.

Es ist schwer zu erklären, aber ich werde es versuchen ...

Ich kann die ToggleButton und das Hintergrundbild auswählen und deaktivieren Sie wird immer kippen. Die Bindung hinter der LikeState scheint für die Eigenschaft, aber nicht für das Bild zu arbeiten. Das bedeutet, wenn die Daten geladen werden und der boolesche LikeState = true die Eigenschaft ToggleButton.IsChecked = true aber das Hintergrundbild ist das Bild für VisualState x:Name="Normal".

Wieder mit anderen Worten ... Ich lade die Daten mit LikeState = true. Wenn ich das erste Mal auf der ToggleButton klicken, wird das Hintergrundbild nicht ändern, aber die Code-Behind-Datei führt den Code für isChecked = true zum zweiten Mal eines Klick auf dem ToggleButton jetzt Bild Hintergrund, so zu VisualState x:Name="Pressed"

ändert was muß ich tun, um das richtige Hintergrundbild in Abhängigkeit zu der dynamisch gefüllt Eigenschaft isChecked={Binding LikeState}

Cheers,

Chris

Answer 1

Versuchen Mode=TwoWay in Bindung zu setzen. Da Ihr Wechsel Eigenschaftswert in Code hinter begrenzt, dass reflektieren in Sie Blick-Modus als TwoWay

aktualisieren

ich Ihren Code überprüft zu geben. Es funktioniert einfach ohne Zwei-Wege-Bindung.

Verwenden visueller Zustand geprüft

<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> 

Hoffen, dass Ihr INotifyPropertyChanged für die LikeState Eigenschaft der Umsetzung, so dass zunächst wird es überprüft werden. Wenn nicht, bitte folgendes tun. Hier ist was ich tat

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; 

     } 
}