且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-05-25 02:01:16

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

Ah, I've come across this problem before. If you select the DockPanel component you can quickly see the issue, the container that holds the header content is aligned "Left" instead of "Stretch", so the dock panel aligning something on the right doesn't result in what you want:

由于停靠面板本身卡在了

As the dock panel itself is stuck in "Left" alignment, even if we set it to "Stretch".

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

A workaround is to use some bindings so set it's width:

   <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 填充按钮的右侧,否则它将被推离屏幕。

However it's not ideal. Notice I've had to pad out the right of the button with Padding="0,0,28,0" otherwise it's pushed off the screen.

更好的解决方案是为扩展器创建自己的样式。

A better solution would be to create your own style for the expander.

编辑。您面临的问题(这确实很奇怪),我认为***的解决方案是重新设计扩展模板,以便使用网格正确地构造它。例如:

Edit. Given the problems you're facing (which are really weird) I think the best solution is to re-template the expanded so it is correctly structured using a grid. Here's an example:

<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的全长。我还必须做一个自定义切换按钮。

It means you have to change the way it looks (but it looks like you want to do that anyway). If you notice, the header ContentPresenter is in a grid, so stretches the full length of the Expander. I also had to do a custom toggle button.

结果是: