エキスパンダーボタンをDataGridRowHeaderの上部に垂直に整列する

Question

DataGridでは、エキスパンダーを行ヘッダーに追加しました。

最初にクリックされたヘッダーの上部にとどまりたいと思います。

私はここで何が欠けていますか？ここで

<DataGrid Name="dgAudit" 
      CanUserReorderColumns="False" 
      CanUserAddRows="False" 
      CanUserDeleteRows="False" 
      CanUserResizeColumns="False" 
      CanUserResizeRows="False" 
      CanUserSortColumns="False" 
      IsReadOnly="True" 
      ItemsSource="{Binding GEOM_ASSET_OC_LIST}" 
      HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" 
      AutoGenerateColumns="False" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      RowDetailsVisibilityMode="Collapsed" 
      > 
    <DataGrid.RowHeaderTemplate> 
     <DataTemplate> 
      <Expander Template="{StaticResource NewExpander}" 
         OverridesDefaultStyle="True" 
         Header="" 
         HorizontalAlignment="Right" 
         VerticalAlignment="Top" 
         Expanded="Expander_Expanded" Collapsed="Expander_Collapsed" 
         > 
      </Expander> 
     </DataTemplate> 
    </DataGrid.RowHeaderTemplate> 

    <DataGrid.Columns>... 

はメインテンプレートです：ここでは

<ControlTemplate x:Key="NewExpander" TargetType="{x:Type Expander}"> 
    <DockPanel> 
     <ToggleButton x:Name="ExpanderButton" 
         DockPanel.Dock="Top" 
         Template="{StaticResource AnimatedExpanderButtonTemp}" 
         Content="{TemplateBinding Header}" 
         IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" 
         OverridesDefaultStyle="True" 
         Padding="0.5,0"> 
     </ToggleButton> 
    </DockPanel> 
</ControlTemplate> 

は、アニメーションのテンプレートです：ここで

<ControlTemplate x:Key="AnimatedExpanderButtonTemp" TargetType="{x:Type ToggleButton}"> 
    <Border x:Name="ExpanderButtonBorder" 
      Background="{TemplateBinding Background}" 
      BorderBrush="{TemplateBinding BorderBrush}" 
      BorderThickness="{TemplateBinding BorderThickness}" 
      Padding="{TemplateBinding Padding}" > 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Rectangle Fill="Transparent" 
         Grid.ColumnSpan="2"/> 
      <Ellipse Name="Circle" 
        Grid.Column="0" 
        Stroke="DarkGray" 
        Fill="LightGray" 
        Width="15" 
        Height="15" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" /> 
      <Path x:Name="Arrow" 
        Grid.Column="0" 
        Data="M 1,1.5 L 4.5,5 8,1.5" 
        Stroke="#FF666666" 
        StrokeThickness="2" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        RenderTransformOrigin="0.5,0.5" > 
       <Path.RenderTransform> 
        <RotateTransform Angle="0"/> 
       </Path.RenderTransform> 
      </Path> 
     </Grid> 
    </Border> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsChecked" 
       Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="Arrow" 
             Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)" 
             To="180" 
             Duration="0:0:0.4"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="Arrow" 
             Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)" 
             To="0" 
             Duration="0:0:0.4"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.ExitActions> 
     </Trigger> 

     <Trigger Property="IsMouseOver" Value="true"> 
      <Setter Property="Stroke" Value="#FF3C7FB1" TargetName="Circle"/> 
      <Setter Property="Stroke" Value="#222" TargetName="Arrow"/> 
     </Trigger> 
     <Trigger Property="IsPressed" Value="true"> 
      <Setter Property="Stroke" Value="#FF526C7B" TargetName="Circle"/> 
      <Setter Property="StrokeThickness" Value="1.5" TargetName="Circle"/> 
      <Setter Property="Stroke" Value="#FF003366" TargetName="Arrow"/> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

崩壊イベントを拡張されています

private void Expander_Expanded(object sender, RoutedEventArgs e) 
{ 
    for (var vis = sender as Visual; vis != null; vis = VisualTreeHelper.GetParent(vis) as Visual) 
    if (vis is DataGridRow) 
    { 
     var row = (DataGridRow)vis; 
     row.DetailsVisibility = row.DetailsVisibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible; 
     break; 
    } 
} 

private void Expander_Collapsed(object sender, RoutedEventArgs e) 
{ 
    for (var vis = sender as Visual; vis != null; vis = VisualTreeHelper.GetParent(vis) as Visual) 
    if (vis is DataGridRow) 
    { 
     var row = (DataGridRow)vis; 
     row.DetailsVisibility = row.DetailsVisibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible; 
     break; 
    } 
} 

Answer 1

ContentPresenterデフォルトではDataGridRowHeaderテンプレートはVericalAlignmentがCenterにハードコードされています。あなたはこれを修正することができるようにテンプレートを変更する必要があります。

<DataGrid.Resources> 
    <BooleanToVisibilityConverter x:Key="bool2VisibilityConverter"/> 
    <Style x:Key="RowHeaderGripperStyle" TargetType="{x:Type Thumb}"> 
     <Setter Property="Height" Value="8"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Cursor" Value="SizeNS"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Thumb}"> 
        <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style TargetType="{x:Type DataGridRowHeader}" 
         xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type DataGridRowHeader}"> 
        <Grid> 
         <Themes:DataGridHeaderBorder BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" IsPressed="{TemplateBinding IsPressed}" IsHovered="{TemplateBinding IsMouseOver}" IsSelected="{TemplateBinding IsRowSelected}" Orientation="Horizontal" Padding="{TemplateBinding Padding}" SeparatorBrush="{TemplateBinding SeparatorBrush}" SeparatorVisibility="{TemplateBinding SeparatorVisibility}"> 
          <StackPanel Orientation="Horizontal"> 
           <ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Stretch"/> 
           <Control SnapsToDevicePixels="false" Template="{Binding ValidationErrorTemplate, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Visibility="{Binding (Validation.HasError), Converter={StaticResource bool2VisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}"/> 
          </StackPanel> 
         </Themes:DataGridHeaderBorder> 
         <Thumb x:Name="PART_TopHeaderGripper" Style="{StaticResource RowHeaderGripperStyle}" VerticalAlignment="Top"/> 
         <Thumb x:Name="PART_BottomHeaderGripper" Style="{StaticResource RowHeaderGripperStyle}" VerticalAlignment="Bottom"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</DataGrid.Resources> 

はPresentationFramework.Aero2.dllへの参照を追加するfortgetないでください。