Блог

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

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

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

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

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

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

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

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

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

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

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