如何在扩展器的右角添加按钮 - WPF DataGrid

Question

我想知道如何将按钮放到扩展器的右侧，这里是我的扩展器折叠时的样子（我需要按钮不管它是否扩展）。

我需要这个，所以当用户点击按钮，我必须得到的订单ID和做一些动作！

这里是我的代码：

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="10*" /> 
    </Grid.ColumnDefinitions> 

    <DataGrid IsSynchronizedWithCurrentItem="False" Grid.Column="0" VerticalGridLinesBrush="Transparent" RowHeaderWidth="0" CanUserAddRows="False" AutoGenerateColumns="False" x:Name="datagrid1" Margin="10,150,8,50" Background="Transparent" RowBackground="#FF494949" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" ItemsSource="{Binding}"> 
     <DataGrid.Resources> 
      <Style TargetType="{x:Type DataGridColumnHeader}"> 
       <Setter Property="Background" Value="Black"/> 
       <Setter Property="Opacity" Value="0.5"/> 
       <Setter Property="Foreground" Value="White"/> 
       <Setter Property="HorizontalContentAlignment" Value="Center" /> 
       <Setter Property="FontSize" Value="15"/> 
       <Setter Property="FontFamily" Value="Arial"/> 
       <Setter Property="Height" Value="50"/> 
      </Style> 


    <Style x:Key="TextInCellCenter" TargetType="{x:Type TextBlock}" > 
     <Setter Property="TextAlignment" Value="Center"/> 
    </Style> 

    <Style TargetType="{x:Type TextBlock}" x:Key="RightAligElementStyle"> 
     <Setter Property="TextAlignment" Value="Right"/> 
    </Style> 

    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#83D744"/> 

    </DataGrid.Resources> 

     <DataGrid.Columns> 
      <DataGridTextColumn Binding="{Binding Title}"  Header="Product Name" Width="0.25*" Foreground="White" FontSize="20" FontFamily="Verdana" /> 
      <DataGridTextColumn Binding="{Binding Quantity}" ElementStyle="{StaticResource TextInCellCenter}"  Header="Quantity" Foreground="White"  Width="0.15*"  FontSize="20" FontFamily="Verdana" /> 
      <DataGridTextColumn Binding="{Binding User}"  ElementStyle="{StaticResource TextInCellCenter}"  Header="User"  Foreground="White"  Width="0.20*"  FontSize="20" FontFamily="Verdana" /> 
     </DataGrid.Columns> 

    <DataGrid.GroupStyle> 
     <!-- Style for groups at top level. --> 
     <GroupStyle> 
      <GroupStyle.ContainerStyle> 
       <Style TargetType="{x:Type GroupItem}"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="{x:Type GroupItem}"> 
           <Expander IsExpanded="True" Background="#83D744"> 
            <Expander.Header> 
             <DockPanel Height="50"> 
              <TextBlock FontWeight="Bold" FontSize="20" Height="25" Foreground="Black" Text="{Binding Path=Name,StringFormat= OrderNumber:# {0}}" /> 
             </DockPanel> 
            </Expander.Header> 
            <Expander.Content> 
             <ItemsPresenter /> 
            </Expander.Content> 
           </Expander> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </GroupStyle.ContainerStyle> 
     </GroupStyle> 
    </DataGrid.GroupStyle> 
</DataGrid> 

谢谢你们， 干杯

乔的回答后，我实现了这一点，但怎么就没有在DataGrid中最后一个项目没有按钮，取看看这个截图：

CODE：

<Grid> 
<Grid.ColumnDefinitions> 
    <ColumnDefinition Width="10*" /> 
</Grid.ColumnDefinitions> 

<DataGrid IsSynchronizedWithCurrentItem="False" Grid.Column="0" VerticalGridLinesBrush="Transparent" RowHeaderWidth="0" CanUserAddRows="False" AutoGenerateColumns="False" x:Name="datagrid1" Margin="10,150,8,50" Background="Transparent" RowBackground="#FF494949" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" ItemsSource="{Binding}"> 
    <DataGrid.Resources> 
     <Style TargetType="{x:Type DataGridColumnHeader}"> 
      <Setter Property="Background" Value="Black"/> 
      <Setter Property="Opacity" Value="0.5"/> 
      <Setter Property="Foreground" Value="White"/> 
      <Setter Property="HorizontalContentAlignment" Value="Center" /> 
      <Setter Property="FontSize" Value="15"/> 
      <Setter Property="FontFamily" Value="Arial"/> 
      <Setter Property="Height" Value="50"/> 
     </Style> 


<Style x:Key="TextInCellCenter" TargetType="{x:Type TextBlock}" > 
    <Setter Property="TextAlignment" Value="Center"/> 
</Style> 

<Style TargetType="{x:Type TextBlock}" x:Key="RightAligElementStyle"> 
    <Setter Property="TextAlignment" Value="Right"/> 
</Style> 

<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#83D744"/> 

</DataGrid.Resources> 

    <DataGrid.Columns> 
     <DataGridTextColumn Binding="{Binding Title}"  Header="Product Name" Width="0.25*" Foreground="White" FontSize="20" FontFamily="Verdana" /> 
     <DataGridTextColumn Binding="{Binding Quantity}" ElementStyle="{StaticResource TextInCellCenter}"  Header="Quantity" Foreground="White"  Width="0.15*"  FontSize="20" FontFamily="Verdana" /> 
     <DataGridTextColumn Binding="{Binding User}"  ElementStyle="{StaticResource TextInCellCenter}"  Header="User"  Foreground="White"  Width="0.20*"  FontSize="20" FontFamily="Verdana" /> 
    </DataGrid.Columns> 



    <DataGrid.GroupStyle> 
     <!-- Style for groups at top level. --> 
     <GroupStyle> 
      <GroupStyle.ContainerStyle> 
       <Style TargetType="{x:Type GroupItem}"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="{x:Type GroupItem}"> 
           <Expander IsExpanded="True" Background="Black" Opacity="0.7"> 
            <Expander.Header> 
             <DockPanel Height="50" Width="{Binding 
                  RelativeSource={RelativeSource 
                  Mode=FindAncestor, 
                  AncestorType={x:Type Expander}}, 
                  Path=ActualWidth}"> 
              <Button DockPanel.Dock="Right" Content="Test Button" Margin="0,0,28,0"/> 
              <TextBlock FontWeight="Normal" FontFamily="Verdana" FontSize="20" Height="25" Foreground="#83D744" Text="{Binding Path=Name,StringFormat= Order Number:# {0}}" /> 
             </DockPanel> 
            </Expander.Header> 
            <Expander.Content> 
             <ItemsPresenter /> 
            </Expander.Content> 
           </Expander> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </GroupStyle.ContainerStyle> 
     </GroupStyle> 
    </DataGrid.GroupStyle> 
</DataGrid> 

所以对于奇怪的原因，在最后一个项目按钮不可见 ...

Answer 1

啊，我之前遇到过这个问题。如果您选择DockPanel组件，您可以很快看到问题，容纳标题内容的容器将对齐“左”而不是“拉伸”，因此对齐右侧某个对象的停靠面板不会导致您想要的结果：

作为固定面板本身是停留在“左”的排列，即使我们将其设置为“拉伸”。

一种解决方法是使用一些映射，所以设置它的宽度：

<Expander.Header> 
     <DockPanel Height="50" Width="{Binding 
           RelativeSource={RelativeSource 
            Mode=FindAncestor, 
            AncestorType={x:Type Expander}}, 
           Path=ActualWidth}"> 
      <Button DockPanel.Dock="Right" Content="Test" Margin="0,0,28,0"/> 
      <TextBlock FontWeight="Bold" FontSize="20" Height="25" Foreground="Black" Text="Heading" /> 
     </DockPanel> 
    </Expander.Header> 

，导致：

但是它的效果并不理想。注意我必须用Padding="0,0,28,0"填充按钮的右边，否则它会被推离屏幕。

更好的解决方案是为扩展器创建自己的样式。

编辑。鉴于你面临的问题（这真的很奇怪），我认为最好的解决方案是重新模板扩展，以便使用网格正确地构造它。这里有一个例子：

<Expander.Template> 
    <ControlTemplate TargetType="Expander"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Name="ContentRow" Height="0"/> 
      </Grid.RowDefinitions> 

      <Border Background="Green"> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto" /> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 

        <ToggleButton IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, 
            RelativeSource={RelativeSource TemplatedParent}}"> 
         <ToggleButton.Template> 
          <ControlTemplate TargetType="ToggleButton"> 
           <Border Padding="6,4" Background="Transparent"> 
            <Path Name="Arrow" 
              Fill="Black" 
              HorizontalAlignment="Center" 
              VerticalAlignment="Center" 
              Data="M 0 0 L 8 8 L 16 0 Z"/> 
           </Border> 
           <ControlTemplate.Triggers> 
            <Trigger Property="ToggleButton.IsMouseOver" Value="true"> 
             <Setter TargetName="Arrow" Property="Fill" 
               Value="LightGreen" /> 
            </Trigger> 
            <Trigger Property="IsPressed" Value="true"> 
             <Setter TargetName="Arrow" Property="Fill" 
               Value="DarkGreen" /> 
            </Trigger> 
            <Trigger Property="IsChecked" Value="true"> 
             <Setter TargetName="Arrow" Property="Data" 
               Value="M 0 8 L 8 0 L 16 8 Z" /> 
            </Trigger> 
            <Trigger Property="IsEnabled" Value="False"> 
             <Setter TargetName="Arrow" Property="Opacity" 
               Value="0.5" /> 
            </Trigger> 
           </ControlTemplate.Triggers> 
          </ControlTemplate> 
         </ToggleButton.Template> 
        </ToggleButton> 
        <ContentPresenter Grid.Column="1" 
             Margin="4" 
             ContentSource="Header" 
             RecognizesAccessKey="True" /> 
       </Grid> 
      </Border> 
      <ContentPresenter Grid.Row="1"/> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsExpanded" Value="True"> 
       <Setter TargetName="ContentRow" Property="Height" 
         Value="{Binding ElementName=Content,Path=DesiredHeight}" /> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
</Expander.Template> 

这意味着你必须改变它的样子（但它看起来像你想这样做，反正）。如果您注意到，标题ContentPresenter位于网格中，因此会延伸Expander的全长。我也必须做一个自定义切换按钮。

这里的结果：

Answer 2

定义按钮的DataTemplate：

<Window.Resources> 
    <DataTemplate x:Key="DataTemplateButton"> 
     <Button Width="100" Height="30" Content="Button"/> 
    </DataTemplate> 
</Window.Resources> 

设置扩展HeaderTemplate中：

<Expander IsExpanded="true" Grid.Column="0" HeaderTemplate="{DynamicResource DataTemplateButton}">