Canvas приводит к тому, что дочерние элементы contentcontrol выливаются из-под контроля

У меня есть следующий 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, дочерние элементы элемента управления содержимым распространяются на разделитель сетки и ListView без учета ширины элемента управления содержимым.

Эффект, который я пытаюсь получить, позволяет расширить ширину элемента управления содержимым с помощью разделителя сетки и заставить этот элемент управления содержимым расширяться «поверх» представления списка (вместо уменьшения ширины представления списка).

Что мне не хватает? Я не понимаю, почему ширина элемента управления контентом внезапно не соблюдается только потому, что я помещаю его в Canvas. Или мне не следует использовать Canvas для получения желаемого эффекта «наложения»?


xaml uwp uwp-xaml
person JT Smith    schedule 07.07.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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>

введите описание изображения здесь

person Justin XL    schedule 07.07.2017

arrow_upward
1
arrow_downward

Как добавление 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();
}

Что эффективно говорит: «Я не занимаю места, и мои дети могут использовать все, что захотят».

person Johnny Westlake    schedule 07.07.2017