Question

我有以下XAML：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="11" />
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
    <ListView ... Grid.Column="2"/>
    <controls:GridSplitter 
    Grid.Column="1"
        Width="11"
    ResizeBehavior="BasedOnAlignment"
    ResizeDirection="Auto"
        Background="Gray"
        Foreground="White" 
        FontSize="13">
        <controls:GridSplitter.Element>
            <Grid>
                <TextBlock HorizontalAlignment="Center" 
                           IsHitTestVisible="False"
                           VerticalAlignment="Center"  
                            Text="&#xE784;"
                           Foreground="Black" 
                           FontFamily="Segoe MDL2 Assets">
                </TextBlock>
            </Grid>
        </controls:GridSplitter.Element>
    </controls:GridSplitter>
    <Canvas Canvas.ZIndex="1">
        <ContentControl MaxWidth="750" Content="{Binding CAV, Mode=TwoWay}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
    </Canvas>
</Grid>

如果没有Canvas在第一列中的ContentControl周围，ContentControl的子项正确地保留在内容控件中，我可以使它更宽，以便水平地看到更多的子项。

当我添加Canvas并设置ZIndex时，内容控件的子节点会在gridsplitter和ListView上溢出而不考虑contentcontrol的宽度。

我试图通过网格分割器扩展内容控件的宽度并让内容控件扩展＆＃34; over＆＃34;列表视图（而不是减少列表视图的宽度）。

我错过了什么？我很困惑为什么内容控件的宽度不会因为我将它包装在Canvas中而突然被尊重。或者我不应该使用Canvas来获得＆＃34; overlay＆＃34;我想要的效果？

Answer 1

Canvas不会拉伸其子女。它只给他们所需的空间。事实上，您不必将ContentControl包裹在Canvas内以设置Canvas.ZIndex;它是一个附加属性，可以直接附加到ContentControl。如果您想要一个允许其孩子/孩子伸展的面板，请尝试Border（仅限一个孩子）或Grid。

但是，在这里设置ZIndex对我来说似乎没有必要。由于GridSplitter只是调整了列的宽度，因此不会发生任何重叠。

如果您想要叠加效果，则需要创建另一个具有相同列布局的Grid并将ListView放在那里，如下所示 -

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="11" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <Grid x:Name="ListView" Background="LightGreen" Grid.Column="2" />
    </Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="11" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <controls:GridSplitter Grid.Column="1" Background="LightBlue">
        </controls:GridSplitter>
        <Grid x:Name="ContentControl" Background="LightPink" Opacity="0.5" />
    </Grid>
</Grid>

Answer 2

作为附录，Canvas告诉布局树它没有空间。尽管它可能有很多孩子，但它并不关心它的孩子的大小。作为参考，这里是Canvas'MeasureOverride：

protected override Size MeasureOverride(Size constraint)
{
    Size childConstraint = new Size(Double.PositiveInfinity, Double.PositiveInfinity);

    foreach (UIElement child in InternalChildren)
    {
        if (child == null) { continue; }
        child.Measure(childConstraint);
    }

    return new Size();
}

有效地说“我没有占用任何空间，我的孩子可以使用他们想要的任何空间”。

Canvas导致contentcontrol孩子过度控制溢出

2 个答案: