Как настроить Canvas.ZIndex для рисования черной панели между элементами управления? - PullRequest
2 голосов
/ 16 октября 2011

С помощью следующего кода я могу продемонстрировать, как черная панель с непрозрачностью 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>

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

enter image description here

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

Я могу достичь чего-то близкого, установив 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>

enter image description here

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

Большое спасибо,

Ответы [ 2 ]

1 голос
/ 16 октября 2011

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

Здесь есть два уровня элементов управления: «синий» и «желтый» элементы управления во внутренней сетке.а затем «черный» и «красный» элементы управления вместе с внутренней сеткой.

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

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

0 голосов
/ 16 октября 2011

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

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

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

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

...