Question

在我的WPF应用程序中，我有一个XAML窗口，其中包括自动调整大小的标题，子标题广告页脚，以及它们之间我还有其他区域可以填充剩余的空间。

中间有一个GridSplitter，允许用户调整屏幕的不同部分。

现在，由于一些奇怪的未知原因，当我移动分离器时，底部的一个自动调整大小的部分在分裂器的对立方向上进行缩放。

以下XAML代码是重现问题的测试布局：

<Window x:Class="TestWpfApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="5" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Border Grid.Row="0" Background="CornflowerBlue">
        <TextBlock>Title</TextBlock>
    </Border>

    <Border Grid.Row="1" Background="LightSkyBlue">
        <TextBlock>Sub-title</TextBlock>
    </Border>

    <Border Grid.Row="2">
        <TextBlock>Auto sizing element</TextBlock>
    </Border>

    <GridSplitter Grid.Row="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="5" />

    <Border Grid.Row="4" Background="CornflowerBlue">
        <TextBlock>Header</TextBlock>
    </Border>

    <Border Grid.Row="5">
        <TextBlock>Auto sizing element</TextBlock>
    </Border>

    <Border Grid.Row="6" Background="LightSkyBlue">
        <TextBlock>Footer</TextBlock>
    </Border>

</Grid>

有谁知道为什么会这样？

Answer 1

GridSplitter影响其顶部和底部元素。你现在有两个边框和它们之间的GridSplitter，所以它会＆＃34;拉伸＆＃34;这些元素之间。它不知道你想要在两个＆＃34;自动调整大小元素之间拉伸＆＃34;。它只会在放置它的两个元素之间调整大小。

我认为这是你想要的东西：

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Background="CornflowerBlue">
            <TextBlock>Title</TextBlock>
        </Border>

        <Border Grid.Row="1" Background="LightSkyBlue">
            <TextBlock>Sub-title</TextBlock>
        </Border>

        <Border Grid.Row="2">
            <TextBlock>Auto sizing element</TextBlock>
        </Border>

        <GridSplitter Grid.Row="3" HorizontalAlignment="Stretch"  Height="5" />

        <Border Grid.Row="4">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Border Background="CornflowerBlue" Grid.Row="0">
                    <TextBlock>Header</TextBlock>
                </Border>
                <TextBlock Grid.Row="1">Auto sizing element</TextBlock>
                </Grid>            
        </Border>

        <Border Grid.Row="5" Background="LightSkyBlue">
            <TextBlock>Footer</TextBlock>
        </Border>

    </Grid>

WPF：网格行在GridSplitter的相反方向上缩放

1 个答案: