Как настроить Canvas.ZIndex для рисования черной панели между элементами управления?

С помощью следующего кода я могу продемонстрировать, как черная панель с непрозрачностью 50% находится поверх каждого прямоугольника:

 <Grid>
    <Rectangle Fill="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.5" Canvas.ZIndex="1"/>
    <Rectangle Fill="Red" Width="200" Height="200" Canvas.ZIndex="0"/>
    <Grid>
        <Rectangle Fill="Blue" Width="100" Height="100" Canvas.ZIndex="0"/>
        <Rectangle Fill="Yellow" Width="50" Height="50" Canvas.ZIndex="1"/>
    </Grid>
</Grid>

Это выглядит так:

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

Я хотел бы иметь желтый прямоугольник над черной панелью, но это кажется невозможным.

Я могу добиться чего-то близкого, установив ZIndex сетки, содержащей синий и желтый прямоугольники, на «1». Но это также подняло бы синий прямоугольник над черным, и это проблема.

<Grid>
    <Rectangle Fill="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.5" Canvas.ZIndex="1"/>
    <Rectangle Fill="Red" Width="200" Height="200" Canvas.ZIndex="0"/>
    <Grid Canvas.ZIndex="1">
        <Rectangle Fill="Blue" Width="100" Height="100" Canvas.ZIndex="0"/>
        <Rectangle Fill="Yellow" Width="50" Height="50" Canvas.ZIndex="1"/>
    </Grid>
</Grid>

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

Как получить только желтый прямоугольник над черным? В моем реальном приложении у меня есть пользовательские элементы управления вместо прямоугольников. Мне нравится выделять определенный элемент управления, покрывая все остальное получерным оттенком.

Огромное спасибо,


.net c# wpf z-index silverlight
person Houman    schedule 15.10.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я не думаю, что вы сможете добиться этого с вашим нынешним расположением элементов управления.

Здесь есть два уровня элементов управления: элементы управления «Синий» и «Желтый» внутри внутренней сетки, а затем элементы управления «Черный» и «Красный» вместе с внутренней сеткой.

ZIndex работает с элементами управления на одном «уровне», поэтому вы можете убедиться, что желтый элемент управления находится поверх синего, но затем на более высоком уровне они сгруппированы под внутренней сеткой, поэтому обрабатываются как единое целое.

Это сработало бы только в том случае, если бы все ваши элементы управления были на одном уровне. Если вы добавите второй полупрозрачный прямоугольник во внутреннюю сетку, вы можете получить желтый цвет поверх этого, но это может привести к тому, что другие элементы управления станут слишком темными.

person ChrisF    schedule 15.10.2011
comment
Спасибо, Крис, я так и сделал. Немного болезненно разбивать вложенные сетки и объединять их с родительскими сетками, чтобы все объекты находились на одном уровне. Но, по крайней мере, это работает сейчас. - person Houman; 16.10.2011

arrow_upward
0
arrow_downward

Один из подходов может состоять в том, чтобы не использовать простой черный прямоугольник.

Вместо этого используйте Path, состоящий из двух прямоугольников. Первый прямоугольник будет охватывать всю область, а второй будет охватывать только доступный элемент управления.

Это создает большой прямоугольник с отверстием в нем, через которое ваш целевой элемент управления может просвечиваться и принимать ввод.

Нижняя сторона разрабатывает геометрию прямоугольника, чтобы добавить его для создания отверстия, но это довольно прямолинейно.

person AnthonyWJones    schedule 15.10.2011
comment
Спасибо, Энтони, это определенно было бы одним из решений, но мне кажется, что это требует много работы и может оказаться слишком неудобным после изменения разрешения. В итоге я объединил сетки в одну. Спасибо, что указали на альтернативное решение. - person Houman; 16.10.2011