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>

谢谢你们，干杯

在Joe的回答之后我实现了这一点，但是为什么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组件，您可以快速查看问题，保存标题内容的容器对齐“左”而不是“拉伸”，因此停靠面板对齐右侧的内容不会产生您想要的结果：< / p>

由于停靠面板本身陷入“左”对齐，即使我们将其设置为“拉伸”。

解决方法是使用一些绑定，因此设置它的宽度：

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

设置Expander HeaderTemplate：

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

如何在Expander - WPF DataGrid的右上角添加按钮

2 个答案: