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

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>