是否可以在网格顶部显示扩展器

Question

除了面板网格之外，我还想使用垂直对齐的扩展器（在左列中）。当扩展器展开时，它应该显示在面板上方，而不是推到一边。

编辑：在测试示例代码后，我注意到，这可能是我想要的方式。但不幸的是，将示例应用于我的项目并不是那么简单。这是我想使用的网格和扩展器的示例。但是没有示例代码。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="0.50*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="0.50*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="60"/>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Aqua">
        <TextBlock HorizontalAlignment="Center" FontSize="32" Text="Fixed height"></TextBlock>
    </StackPanel>
    <StackPanel Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Azure">
        <TextBlock HorizontalAlignment="Center" FontSize="32" Text="50% left"></TextBlock>
    </StackPanel>
    <GridSplitter Grid.Row="1" Grid.Column="2" Grid.RowSpan="4" Width="1" HorizontalAlignment="Stretch" />
    <DockPanel LastChildFill="True" Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue">
        <TextBlock HorizontalAlignment="Center" FontSize="32" Text="50% right"></TextBlock>
    </DockPanel>
    <Expander ExpandDirection="Right" Grid.Row="0" Grid.RowSpan="2">
        <Expander.Header>
            <TextBlock Text="Control1" VerticalAlignment="Top">
                <TextBlock.LayoutTransform>
                    <RotateTransform Angle="-90"/>
                </TextBlock.LayoutTransform>
            </TextBlock>
        </Expander.Header>
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Input1" Margin="5"></TextBlock>
                <TextBox Name="tbxInput1" Width="100" Margin="5"></TextBox>
            </StackPanel>
        </StackPanel>
    </Expander>
    <Expander ExpandDirection="Right" Grid.Row="2" Margin="0,0,0,-44" IsExpanded="{Binding IsSettingsExpanded}">
        <Expander.Header>
            <TextBlock Text="Control2">
                <TextBlock.LayoutTransform>
                    <RotateTransform Angle="-90"/>
                </TextBlock.LayoutTransform>
            </TextBlock>
        </Expander.Header>
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Input2" Margin="5"></TextBlock>
                <TextBox Name="tbxInput2" Width="130" Margin="5"></TextBox>
            </StackPanel>
        </StackPanel>
    </Expander>
</Grid>

Answer 1

一个想法是将 Expander 放在面板的顶部，面板上有一个小边距，这样 Expander 就不会挡住它们。这是一个例子：

<Grid>
    <UniformGrid
        Rows="2" Columns="2"
        Margin="24,0,0,0"
        >
        <StackPanel Background="Blue" />
        <StackPanel Background="Red" />
        <StackPanel Background="Yellow" />
        <StackPanel Background="Green" />
    </UniformGrid>
    <Expander
        ExpandDirection="Right"
        HorizontalAlignment="Left"
        >
        <Grid Background="White">
            <TextBlock Text="Content" />
        </Grid>
    </Expander>
</Grid>

您可以通过以下方式将此示例应用到您的案例中：

<Grid>
    <Grid Margin="24,0,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="0.50*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="0.50*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Aqua">
            <TextBlock HorizontalAlignment="Center" FontSize="32" Text="Fixed height"></TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Azure">
            <TextBlock HorizontalAlignment="Center" FontSize="32" Text="50% left"></TextBlock>
        </StackPanel>
        <GridSplitter Grid.Row="1" Grid.Column="2" Grid.RowSpan="4" Width="1" HorizontalAlignment="Stretch" />
        <DockPanel LastChildFill="True" Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue">
            <TextBlock HorizontalAlignment="Center" FontSize="32" Text="50% right"></TextBlock>
        </DockPanel>
    </Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Expander ExpandDirection="Right" HorizontalAlignment="Left" Grid.Row="0">
            <Expander.Header>
                <TextBlock Text="Control1" VerticalAlignment="Top">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="-90"/>
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </Expander.Header>
            <StackPanel Orientation="Vertical" Background="White">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Input1" Margin="5"></TextBlock>
                    <TextBox Name="tbxInput1" Width="100" Margin="5"></TextBox>
                </StackPanel>
            </StackPanel>
        </Expander>
        <Expander ExpandDirection="Right" HorizontalAlignment="Left" Grid.Row="1" IsExpanded="{Binding IsSettingsExpanded}">
            <Expander.Header>
                <TextBlock Text="Control2">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="-90"/>
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </Expander.Header>
            <StackPanel Orientation="Vertical" Background="White">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Input2" Margin="5"></TextBlock>
                    <TextBox Name="tbxInput2" Width="130" Margin="5"></TextBox>
                </StackPanel>
            </StackPanel>
        </Expander>
    </Grid>
</Grid>

是否可以在网格顶部显示扩展器

Is it possible to have expanders show on top of the grid

wpf

xaml

controls

overlay

expander