Manipulation togglebutton ControlTemplate

Question

Si j'utilise ce code:

yeux sur "Path" élément

<ToggleButton Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton"> 
            <ToggleButton.Template> 
             <ControlTemplate> 
              <Grid> 
               <Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/> 
               <Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center" 
               Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB"/> 
              </Grid> 
             </ControlTemplate> 
            </ToggleButton.Template> 
            <ToggleButton.RenderTransform> 
             <RotateTransform x:Name="RotateButtonTransform"/> 
            </ToggleButton.RenderTransform> 
           </ToggleButton> 

Tous les spectacles très bien.

Exemple:

Mais quand j'utiliser le code entier avec des animations, la position est réglée sur gauche, mais il apparaît à droite

<ResourceDictionary 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="clr-namespace:Expander"> 
<Style TargetType="local:Expander"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:Expander"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="ViewStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="0:0:0.0"/> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="Expanded"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="ContentScaleTransform" 
            Storyboard.TargetProperty="ScaleY" To="1" Duration="0"/> 
            <DoubleAnimation Storyboard.TargetName="RotateButtonTransform" 
            Storyboard.TargetProperty="Angle" To="180" Duration="0"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Collapsed"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="ContentScaleTransform" 
            Storyboard.TargetProperty="ScaleY" To="0" Duration="0"/> 
            <DoubleAnimation Storyboard.TargetName="RotateButtonTransform" 
            Storyboard.TargetProperty="Angle" To="0" Duration="0"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}" 
        CornerRadius="{TemplateBinding CornerRadius}" 
        Background="{TemplateBinding Background}"> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="*"/> 
          </Grid.RowDefinitions> 
          <Grid Background="#FFDBDBDB" Margin="0"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="50"/> 
            <ColumnDefinition Width="*"/> 
           </Grid.ColumnDefinitions> 
           <ContentPresenter Grid.Column="1" VerticalAlignment="Center" Content="{TemplateBinding HeaderContent}" Canvas.ZIndex="2"/> 
           <ToggleButton Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton"> 
            <ToggleButton.Template> 
             <ControlTemplate> 
              <Grid> 
               <Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/> 
               <Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center" 
               Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB"/> 
              </Grid> 
             </ControlTemplate> 
            </ToggleButton.Template> 
            <ToggleButton.RenderTransform> 
             <RotateTransform x:Name="RotateButtonTransform"/> 
            </ToggleButton.RenderTransform> 
           </ToggleButton> 
          </Grid> 
          <ContentPresenter Grid.Row="1" Margin="5" Content="{TemplateBinding Content}" x:Name="Content"> 
           <ContentPresenter.RenderTransform> 
            <ScaleTransform x:Name="ContentScaleTransform"/> 
           </ContentPresenter.RenderTransform> 
          </ContentPresenter> 
         </Grid> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Quand je appuyez sur mon expandeur le chemin saute de gauche à droite - où est le p roblem?

Exemple:

Lorsque la position est Centre il montre correct

AJOUT:

Si je supprime l'animation x: Name = "RotateButtonTransform "alors chemin élément est affiché correctement - mais j'ai besoin cette transformation pour tourner le chemin

AJOUT 2:

supprimé animation ToggleButtons, et a ajouté ces lignes:

To story-board de l'état visuel:

<DoubleAnimation Storyboard.TargetName="RotatePath" 
Storyboard.TargetProperty="Angle" To="180" Duration="0"/> 

à l'élément de chemin:

<Path.RenderTransform> 
    <RotateTransform x:Name="RotatePath"/> 
</Path.RenderTransform> 

Code ne ... Pour certaines raisons

Erreur:

Une exception du type 'System.InvalidOperationException' a eu lieu en System.Windows.ni.dll mais n'a pas été traitée dans le code utilisateur

Answer 1

Parce que votre ToggleButton ce qui signifie que ToggleButton aura une largeur de l'en-tête entier et quand vous développez et appliquez 180 rotation qui tourne autour de son centre et ce qui était sur le côté gauche est maintenant sur le côté droit à l'envers . Changez HorizontalAlignment sur votre ToggleButton en Left et cela devrait résoudre votre problème.

Si vous voulez garder ToggleButton étirées alors ne pas tourner le bouton, mais Path à l'intérieur:

<ToggleButton.Template> 
    <ControlTemplate> 
     <Grid> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="ViewStates"> 
        <VisualStateGroup.Transitions> 
         <VisualTransition GeneratedDuration="0:0:0.0"/> 
        </VisualStateGroup.Transitions> 
        <VisualState x:Name="Checked"> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="180" Duration="0"/> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Unchecked"> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="0" Duration="0"/> 
         </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <Rectangle HorizontalAlignment="Stretch" Height="50" Fill="#FFDBDBDB"/> 
      <Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Center" Data="M2,3L9,10 16,3" Stroke="Black" StrokeThickness="6" Fill="#FFDBDBDB"> 
       <Path.RenderTransform> 
        <RotateTransform x:Name="RotateButtonTransform"/> 
       </Path.RenderTransform> 
      </Path> 
     </Grid> 
    </ControlTemplate> 
</ToggleButton.Template>