我想知道如何在扩展器的右侧放置按钮,这是扩展器折叠时的外观图片(无论是否扩展,我都需要按钮)。

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

我需要获取此信息,因此当用户单击按钮时,我必须获取订单ID并执行一些操作!
wpf - 如何在Expander的右上角添加按钮-WPF DataGrid-LMLPHP

这是我的代码:

<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中最后一项没有按钮,请看下面的屏幕截图:
wpf - 如何在Expander的右上角添加按钮-WPF DataGrid-LMLPHP

码:
<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组件,您可以快速看到问题,保存标题内容的容器将对齐“左”而不是“拉伸”,因此,停靠面板在右侧对齐不会产生您想要的结果:

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

由于扩展坞面板本身停留在“左”对齐状态,即使我们将其设置为“拉伸”也是如此。

一种解决方法是使用一些绑定,因此设置其宽度:

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

导致:

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

但是,这并不理想。注意,我必须用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的全长。我还必须做一个自定义切换按钮。

结果如下:

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

09-30 17:51
查看更多