XAMLトグルボタンの変化の背景画像

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のバインディングは、私が望むように完全ではありません。

それは説明するのは難しいのですが、私はそれを試してみるよ...

私が選択し ToggleButtonと背景画像は常に反転する選択を解除することができます。 LikeStateの背後にあるバインディングは、プロパティでは機能しているようですが、イメージでは機能していないようです。これは、データがロードされ、ブール値 LikeState = trueが ToggleButton.IsChecked = trueのプロパティであるが、背景イメージが VisualState x:Name="Normal"のイメージであることを意味します。

もう一度... 私はLikeState = trueでデータをロードしています。私はトグルボタンに最初の時間をクリックすると、背景画像が変更されませんが、コードビハインドファイルには、そうVisualState x:Name="Pressed"

になりました背景画像を変更するんトグルボタン上の第二の時間をクリックするisChecked = true ためのコードを実行します私は動的に満たされたプロパティに依存して右の背景画像を設定するisChecked={Binding LikeState}

乾杯、

クリス

Answer 1

を行う必要がありますすることは結合で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; 

     } 
}