如何在Expander的右上角添加按钮 - WPF DataGrid
How to add button at the right corner of Expander - WPF DataGrid
我想知道如何将按钮放在扩展器的右侧，这是我的扩展器折叠时的外观图片（无论是否展开我都需要按钮）。
我需要得到这个，所以当用户点击按钮时，我必须得到订单 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中的最后一个项目没有按钮，看看这个截图：
代码：
<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>
所以出于奇怪的原因 最后一项上的按钮不可见...
定义一个按钮DataTemplate：
<Window.Resources>
<DataTemplate x:Key="DataTemplateButton">
<Button Width="100" Height="30" Content="Button"/>
</DataTemplate>
</Window.Resources>
设置扩展头模板：
<Expander IsExpanded="true" Grid.Column="0" HeaderTemplate="{DynamicResource DataTemplateButton}">
啊，我以前遇到过这个问题。如果您 select DockPanel 组件，您可以快速看到问题，包含 header 内容的容器对齐 "Left" 而不是 "Stretch"，因此停靠面板对齐某些内容正确的结果不是你想要的：
由于停靠面板本身卡在 "Left" 对齐中，即使我们将其设置为 "Stretch".
解决方法是使用一些绑定，因此设置它的宽度：
<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" 填充按钮的右侧，否则它会被推出屏幕。
更好的解决方案是为扩展器创建您自己的样式。
编辑。 鉴于您面临的问题（这真的很奇怪），我认为最好的解决方案是 re-template 扩展，以便使用正确的结构一个网格。这是一个例子：
<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>
这意味着你必须改变它的外观（但看起来你无论如何都想这样做）。如果您注意到，header ContentPresenter 位于网格中，因此会拉伸 Expander 的整个长度。我还必须做一个自定义切换按钮。
结果如下：
我想知道如何将按钮放在扩展器的右侧，这是我的扩展器折叠时的外观图片（无论是否展开我都需要按钮）。
我需要得到这个，所以当用户点击按钮时，我必须得到订单 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中的最后一个项目没有按钮，看看这个截图：
代码：
<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>
所以出于奇怪的原因 最后一项上的按钮不可见...
定义一个按钮DataTemplate：
<Window.Resources>
<DataTemplate x:Key="DataTemplateButton">
<Button Width="100" Height="30" Content="Button"/>
</DataTemplate>
</Window.Resources>
设置扩展头模板：
<Expander IsExpanded="true" Grid.Column="0" HeaderTemplate="{DynamicResource DataTemplateButton}">
啊，我以前遇到过这个问题。如果您 select DockPanel 组件，您可以快速看到问题，包含 header 内容的容器对齐 "Left" 而不是 "Stretch"，因此停靠面板对齐某些内容正确的结果不是你想要的：
由于停靠面板本身卡在 "Left" 对齐中，即使我们将其设置为 "Stretch".
解决方法是使用一些绑定，因此设置它的宽度：
<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" 填充按钮的右侧，否则它会被推出屏幕。
更好的解决方案是为扩展器创建您自己的样式。
编辑。 鉴于您面临的问题（这真的很奇怪），我认为最好的解决方案是 re-template 扩展，以便使用正确的结构一个网格。这是一个例子：
<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>
这意味着你必须改变它的外观（但看起来你无论如何都想这样做）。如果您注意到，header ContentPresenter 位于网格中，因此会拉伸 Expander 的整个长度。我还必须做一个自定义切换按钮。
结果如下：
