代码之家 › 专栏 › 技术社区 › VRage

为什么在调整网格大小时,边框停止渲染其负边距

border grid xaml wpf c#

VRage · 技术社区 · 5 年前

我使用了一个带负边距的边框来标记网格行。但我在调整窗口大小时有一个奇怪的行为。剪切该行的第二列会使边框的边距消失:

当然,这是一个小例子,在主应用程序中,我使用了网格拆分器,但bahaviour保持不变。是否有可能以某种方式修复此问题,还是这是一个WPF错误?

MainWindow.xaml:

<Window x:Class="TestHighlightBorder.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"
    xmlns:local="clr-namespace:TestHighlightBorder"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">

<Grid Margin="100,0,0,0" >

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>

    <Border Background="DarkRed" Opacity="0.3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Margin="-80,0,0,0" Panel.ZIndex="1" />
    <TextBlock Text="column 0" Background="LightBlue" Grid.Row="0" Grid.Column="0" />
    <TextBlock Text="column 2" Background="LightGreen" Grid.Row="0" Grid.Column="2" />

</Grid>

ps: 这就是主应用程序的样子。这是一种属性网格。负边距的大小取决于嵌套对象的级别。

0 回复 | 直到 5 年前

Tongle 5 年前

我试过你的例子,结果就像你说的:第2栏不见了,边距也不见了。
每当网格无法完全显示时,这种情况似乎就会发生。
例如,如果将第三列定义设置为200,则一旦第2列没有完整显示,边距就会消失。当你从底部调整窗口大小时,也会发生同样的事情。

如果将现有网格放入另一个容器(网格、StackPanel等)中,并将MinWidth设置为至少等于列宽度+边距的大小(在您的示例中为310),则不会发生这种情况。

像这样:

<StackPanel MinWidth="310">
    <Grid Margin="100,0,0,0" >

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="10" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>

        <Border Background="DarkRed" Opacity="0.3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Margin="-80,0,0,0" Panel.ZIndex="1" />
        <TextBlock Text="column 0" Background="LightBlue" Grid.Row="0" Grid.Column="0" />
        <TextBlock Text="column 2" Background="LightGreen" Grid.Row="0" Grid.Column="2" />

    </Grid>
</StackPanel>

Aly Elhaddad 5 年前

您可以不在网格中添加100的左边距,而是在开始处固定一个宽度为100的列,将边框的列跨度设置为4,将负边距替换为20的正左边距(100-80=20),并将值加1 Grid.Column 对于您的每个控件。因此,最终的方法看起来是这样的:

<Grid>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="10" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>

    <Border Background="DarkRed" Opacity="0.3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" Margin="20,0,0,0" Panel.ZIndex="1" />
    <TextBlock Text="column 0" Background="LightBlue" Grid.Row="0" Grid.Column="1" />
    <TextBlock Text="column 2" Background="LightGreen" Grid.Row="0" Grid.Column="3" />

</Grid>