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

如何在Expander-WPF DataGrid的右角添加按钮,wpf,forms,datagrid,window,expander,Wpf,Forms,Datagrid,Window,Expander,我想知道如何把按钮放在扩展器的右边,这里是我的扩展器折叠时的图片(我需要按钮,无论它是否展开) 我需要得到这个,所以当用户点击按钮,我必须得到订单的ID,并做一些行动! 这是我的密码: <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="10*" /> </Grid.ColumnDefinitions> <DataGrid IsSync

我想知道如何把按钮放在扩展器的右边,这里是我的扩展器折叠时的图片(我需要按钮,无论它是否展开)

我需要得到这个,所以当用户点击按钮,我必须得到订单的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的回答之后,我实现了这一点,但为什么数据网格中的最后一项上没有按钮,请看下面的屏幕截图:

代码:



因此,出于奇怪的原因,最后一项上的按钮不可见。

定义按钮数据模板:

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

啊,我以前遇到过这个问题。如果选择DockPanel组件,您可以快速看到问题,保存标题内容的容器将“左”对齐,而不是“拉伸”,因此,对齐右侧某个内容的dock面板不会产生您想要的结果:

由于坞面板本身卡在“左”对齐,即使我们将其设置为“拉伸”

解决方法是使用一些绑定,以便设置其宽度:

   <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>
这意味着你必须改变它的外观(但看起来你无论如何都想这么做)。如果您注意到,标题ContentPresenter位于网格中,因此会拉伸扩展器的整个长度。我还必须做一个自定义切换按钮

结果如下:


您已经在添加自定义文本块作为标题,只需在Dock Panel中添加按钮即可。是的,但如何将其向右移动?在Expander.Header的右角?它在一个dock面板中,使用DockPanel.dock=“right”你能发布更多的代码吗?我试过了,但按钮没有移到右边。一切都很清楚,伙计,我不太了解宽度部分,但我会努力弄清楚为什么伙计,我在数据网格的最后一项上看不到按钮。让我为你发布屏幕截图。在我的帖子上检查编辑嗯,这真的很奇怪。我想不出有什么理由它会那样做。你也可以发布你的更新代码吗?嘿,伙计,我会编辑我的帖子并发布我的新代码,在最后一项上的按钮不可见的地方添加一个更好的解决方案。
   <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>
<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>