WP8.1 Wie kann ich die Eigenschaft in den visuellen Status-Manager eines Toggle-Button-Stils binden

Question

Ich habe mich entschieden, eine Schaltfläche mit einem benutzerdefinierten Stil anzupassen: Es enthält ein Bild und Text. Der normale Zustand meiner Schaltfläche verwendet ein bestimmtes Bild und einen bestimmten Text Vordergrund. der überprüfte Zustand verwendet andere.

Allerdings ... der Schalter funktioniert nicht für meine Bilder.

Ich habe eine benutzerdefinierte Umschaltfläche erstellt. Der Code ist hier:

class CustomToggleButton : ToggleButton 
{ 

    public String ImageSource 
    { 
     get { return (String)GetValue(ImageSourceProperty); } 
     set { SetValue(ImageSourceProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for ImageSource. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty ImageSourceProperty = 
     DependencyProperty.Register("ImageSource", typeof(String), typeof(CustomToggleButton), new PropertyMetadata(String.Empty)); 



    public String SelectedImageSource 
    { 
     get { return (String)GetValue(SelectedImageSourceProperty); } 
     set { SetValue(SelectedImageSourceProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for SelectedImageSource. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty SelectedImageSourceProperty = 
     DependencyProperty.Register("SelectedImageSource", typeof(String), typeof(CustomToggleButton), new PropertyMetadata(String.Empty)); 


} 

ich meine Kontrolle wie folgt aus:

<controls:CustomToggleButton ImageSource="/Resources/home.png" SelectedImageSource="/Resources/home-neg.png" FontSize="18" 
          Content="Acceuil" Style="{StaticResource HamburgerMenuItemStyle}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/> 

Hier wird die individuelle Umschaltknopf Stil:

<x:Double x:Key="TextStyleLargeFontSize">18.14</x:Double> 
    <Thickness x:Key="PhoneButtonContentPadding">9.5,0,9.5,3.5</Thickness> 
    <x:Double x:Key="PhoneButtonMinHeight">57.5</x:Double> 
    <x:Double x:Key="PhoneButtonMinWidth">109</x:Double> 
    <Style x:Key="HamburgerMenuItemStyle" TargetType="ToggleButton"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="BorderBrush" Value="{ThemeResource PhoneForegroundBrush}"/> 
     <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/> 
     <Setter Property="BorderThickness" Value="0"/> 
     <Setter Property="FontFamily" Value="{StaticResource StandardFont}"/> 
     <Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/> 
     <Setter Property="Padding" Value="{ThemeResource PhoneButtonContentPadding}"/> 
     <Setter Property="MinHeight" Value="{ThemeResource PhoneButtonMinHeight}"/> 
     <Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/> 
     <Setter Property="HorizontalAlignment" Value="Left"/> 
     <Setter Property="VerticalAlignment" Value="Center"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="controls:CustomToggleButton"> 
        <Grid Background="Transparent"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="White"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource IaF-SColor-DarkGreen}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="ToggleImage"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding ImageSource}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="PointerOver"/> 
           <VisualState x:Name="Pressed"/> 
           <VisualState x:Name="Disabled"/> 
           <VisualState x:Name="Checked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource IaF-SColor-DarkGreen}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EnabledContent"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="White"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="ToggleImage"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding SelectedImageSource}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="CheckedPointerOver"/> 
           <VisualState x:Name="CheckedPressed"/> 
           <VisualState x:Name="CheckedDisabled"/> 
           <VisualState x:Name="Indeterminate"/> 
           <VisualState x:Name="IndeterminatePointerOver"/> 
           <VisualState x:Name="IndeterminatePressed"/> 
           <VisualState x:Name="IndeterminateDisabled"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="EnabledBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{ThemeResource PhoneTouchTargetOverhang}"> 
          <ContentPresenter AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" 
               Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Padding}" > 
           <Grid> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition/> 
             <ColumnDefinition/> 
             <ColumnDefinition/> 
             <ColumnDefinition/> 
            </Grid.ColumnDefinitions> 
            <Image x:Name="ToggleImage" Source="{Binding ImageSource}"/> 
            <TextBlock Grid.Column="1" Grid.ColumnSpan="3" x:Name="EnabledContent" Style="{StaticResource BaseTextBlockStyle}" Foreground="{TemplateBinding Foreground}" 
               FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" Text="{TemplateBinding Content}" Margin="10,0,0,0" 
               TextAlignment="Left" VerticalAlignment="Center"/> 
           </Grid> 
          </ContentPresenter> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Wie Sie sehen können, ich versuche zu setzen Meine benutzerdefinierten Umschalttasteneigenschaften für zwei verschiedene Zustände:

Normalzustand:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="ToggleImage"> 
    <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding ImageSource}"/> 
</ObjectAnimationUsingKeyFrames> 

Und Karo Zustand:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="ToggleImage"> 
    <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding SelectedImageSource}"/> 
</ObjectAnimationUsingKeyFrames> 

Und ... es funktioniert nicht bei allen.

EDIT:

Für den interessierten Mitmenschen, ist meine Lösung verfügbar unten.

Answer 1

Nach dieser link es ist nicht möglich, abhängig Bilder ändern. Sie können keine dynamischen Ressourcen Referenzen oder Datenbindungsausdrücke verwenden, um Storyboard- oder Animationseigenschaftswerte festzulegen. Das liegt daran, dass alles in einem ControlTemplate Thread-sicher sein muss und das Timing-System Storyboard-Objekte einfrieren muss, um sie threadsicher zu machen. Ein Storyboard kann nicht eingefroren werden, wenn es oder seine Child-Timelines dynamische Ressourcenverweise oder Datenbindungsausdrücke enthalten

Answer 2

Es ist besser, haben Bilder überlappen, und die Sichtbarkeit der auf dem Stand der Umschaltknopf

Answer 3

Schließlich unterscheidet sich meine Lösung ein wenig von der ursprünglichen Idee: Ich habe ein zusätzliches Bild integriert, um den "ausgewählten Zustand" zu verwalten. Dann spiele ich mit dem Bildsichtbarkeitsattribut im visuellen Zustandsmanager.

<controls:CustomToggleButton ImageSource="/Resources/home.png" SelectedImageSource="/Resources/home-neg.png" FontSize="18" Click="CustomToggleButton_Click" 
          Content="Acceuil" Style="{StaticResource HamburgerMenuItemStyle}" 
          VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/> 

:

ich eine zusätzliche Eigenschaft auf benutzerdefinierte Umschaltknopf Klasse, um die „ausgewählte Bildquelle“

public class CustomToggleButton : ToggleButton 
{ 

    [...] 

    public String SelectedImageSource 
    { 
     get { return (String)GetValue(SelectedImageSourceProperty); } 
     set { SetValue(SelectedImageSourceProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for SelectedImageSource. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty SelectedImageSourceProperty = 
     DependencyProperty.Register("SelectedImageSource", typeof(String), typeof(CustomToggleButton), new PropertyMetadata(String.Empty)); 


} 

Dann habe ich den Aufruf dieses benutzerdefinierten Steuerelement geändert hätte Schließlich habe ich den benutzerdefinierten Umschalttastenstil geändert, indem ich ein anderes Bild, "SelectedItemImage", eingestellt habe, und ich habe das Sichtbarkeitsattribut verwendet, um das richtige Bild auszublenden oder anzuzeigen.

<Style x:Key="HamburgerMenuItemStyle" TargetType="ToggleButton"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="BorderThickness" Value="0"/> 
     <Setter Property="FontFamily" Value="{StaticResource StandardFont}"/> 
     <Setter Property="HorizontalAlignment" Value="Left"/> 
     <Setter Property="VerticalAlignment" Value="Center"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="controls:CustomToggleButton" > 
        <Grid Background="Transparent"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ItemBorder"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="White"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ItemTextBlock"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource IaF-SColor-DarkGreen}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ItemImage"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectedItemImage"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="PointerOver"/> 
           <VisualState x:Name="Pressed"/> 
           <VisualState x:Name="Disabled"/> 
           <VisualState x:Name="Checked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ItemBorder"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource IaF-SColor-DarkGreen}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ItemTextBlock"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="White"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ItemImage"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectedItemImage"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="CheckedPointerOver"/> 
           <VisualState x:Name="CheckedPressed"/> 
           <VisualState x:Name="CheckedDisabled"/> 
           <VisualState x:Name="Indeterminate"/> 
           <VisualState x:Name="IndeterminatePointerOver"/> 
           <VisualState x:Name="IndeterminatePressed"/> 
           <VisualState x:Name="IndeterminateDisabled"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="ItemBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
          <ContentPresenter AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" 
               Margin="{TemplateBinding Padding}" VerticalAlignment="Center"> 
           <Grid> 
            <Grid.ColumnDefinitions> 
             <ColumnDefinition Width="*"/> 
             <ColumnDefinition Width="5*"/> 
            </Grid.ColumnDefinitions> 
            <Image x:Name="ItemImage" Source="{Binding Path=ImageSource, RelativeSource={RelativeSource TemplatedParent}}" 
              VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MaxHeight="{StaticResource MenuButtonImageSize}" MaxWidth="{StaticResource MenuButtonImageSize}"/> 
            <Image x:Name="SelectedItemImage" Source="{Binding Path=SelectedImageSource, RelativeSource={RelativeSource TemplatedParent}}" 
              VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MaxHeight="{StaticResource MenuButtonImageSize}" MaxWidth="{StaticResource MenuButtonImageSize}"/> 
            <TextBlock Grid.Column="1" x:Name="ItemTextBlock" Style="{StaticResource BaseTextBlockStyle}" Foreground="{TemplateBinding Foreground}" 
               FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" Text="{TemplateBinding Content}" Margin="20,0,0,0" 
               TextAlignment="Left" VerticalAlignment="Center"/> 
           </Grid> 
          </ContentPresenter> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Wichtigste Änderungen sind hier:

<Image x:Name="ItemImage" Source="{Binding Path=ImageSource, RelativeSource={RelativeSource TemplatedParent}}" 
              VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MaxHeight="{StaticResource MenuButtonImageSize}" MaxWidth="{StaticResource MenuButtonImageSize}"/> 
<Image x:Name="SelectedItemImage" Source="{Binding Path=SelectedImageSource, RelativeSource={RelativeSource TemplatedParent}}" 
              VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MaxHeight="{StaticResource MenuButtonImageSize}" MaxWidth="{StaticResource MenuButtonImageSize}"/> 

Wir binden Quelle an die benutzerdefinierte Klasse Abhängigkeitseigenschaften (dank Archana Vorschlag), und dann spielen wir mit Sicht in visuellen Status-Manager, wie folgt aus:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ItemImage"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
</ObjectAnimationUsingKeyFrames> 
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="SelectedItemImage"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
</ObjectAnimationUsingKeyFrames>