我想知道如何在扩展器的右侧放置按钮,这是扩展器折叠时的外观图片(无论是否扩展,我都需要按钮)。
我需要获取此信息,因此当用户单击按钮时,我必须获取订单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>
多谢你们,
干杯
在Joe回答之后,我实现了这一点,但是,为什么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>
因此,出于奇怪的原因,最后一项上的按钮不可见 ...
最佳答案
啊,我以前遇到过这个问题。如果选择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的全长。我还必须做一个自定义切换按钮。
结果如下: