處理切換按鈕控件模板

Question

如果我用這個代碼：

眼睛 「路徑」 元素

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

的節目就好上。

實施例：

但是當我使用與動畫整個代碼，的位置被設定爲左但它出現在右

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

當我點擊我的擴展器路徑從左到右跳 - 其中是p roblem？

實施例：

當位置是中心它顯示正確

ADDITION：

如果刪除動畫X：名稱=「RotateButtonTransform 「然後路徑元件被正確顯示 - 但我需要此變換旋轉路徑

ADDITION 2：

刪除的ToggleButtons動畫，並加入該行：

爲了視覺狀態故事板：

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

To Path元件：

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

代碼somewhy失敗...

錯誤：

'System.InvalidOperationException' 類型的異常出現在System.Windows.ni.dll但因爲你的ToggleButton不是在用戶代碼中處理

Answer 1

跨越2列，並將其設置爲HorizontalAlignment至Stretch，這意味着ToggleButton將具有整個標題的寬度，並且當您展開並應用180個繞其中心旋轉的旋轉時，左側的內容現在在右側顛倒。更改HorizontalAlignment在您的ToggleButton到Left並且應該解決您的問題。

如果你想保持ToggleButton拉伸那就不要在它裏面旋轉按鈕，但Path：

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