Используйте UIElement как клип в WPF
Вопрос
Прошу прощения за мое невежество. Я очень новичок в WPF.
Я пытаюсь реализовать небольшой визуальный эффект в своем приложении, который придает вид "внутренний" закругленные углы. У рассматриваемого окна есть темная граница, которая инкапсулирует несколько элементов UIE, одним из которых является StatusBar, расположенный в нижней части окна. Этот StatusBar имеет темный фон, который соответствует границе окна. Над StatusBar находится представление контента, которое в настоящее время является Grid - его фон полупрозрачен (я думаю, что это что-то вроде ограничения - вы можете видеть это через представление контента на рабочем столе ниже). Мне бы хотелось, чтобы представление контента (представленное прозрачной внутренней областью на рисунке ниже) выглядело закругленными углами, хотя я ожидаю, что мне придется создавать иллюзию самостоятельно.
(Не могу опубликовать изображение, потому что я скрываюсь, а не являюсь постером- пожалуйста, найдите рисунок здесь )
Мой первый подход состоял в том, чтобы добавить прямоугольник (заполненный темным темным цветом, что и граница) непосредственно над StatusBar и назначить границу с закругленными углами для ее OpacityMask (аналогично решению, предложенному Крисом Кавана **) , К сожалению, эффект, который создается, является полной противоположностью того, чего я пытаюсь достичь. Р>
Я понимаю, что свойство Clip может быть полезно в подобной ситуации, но мне кажется, что использование любого вида геометрии окажется неадекватным, поскольку оно не будет динамически изменяться по отношению к области, в которой оно находится . р>
РЕДАКТИРОВАТЬ: Включая мой XAML:
<Grid Background="{StaticResource ClientBg}" Tag="{Binding OverlayVisible}" Style="{StaticResource mainGridStyle}">
<DockPanel LastChildFill="True">
<!-- Translates to a StackPanel with a Menu and a Button -->
<local:FileMenuView DockPanel.Dock="Top" />
<!-- Translates to a StatusBar -->
<local:StatusView DockPanel.Dock="Bottom" />
<!-- Translates to a Grid -->
<local:ContentView />
</DockPanel>
</Grid>
Любые указатели приветствуются. Я готов предоставить более подробную информацию, если это необходимо.
** http://www.dotnetkicks.com/wpf/WPF_easy_ounded_corners_for_anything
Решение
РЕДАКТИРОВАТЬ: Теперь я понял, что вы имеете в виду. Фактически вы можете использовать подход Path + OpacityMask. Вы должны нарисовать "перевернутый" путь, чтобы использовать его в качестве маски непрозрачности. Но у меня есть более простое и быстрое решение для вас :). Используйте Border + CornerRadius и заполните пробелы сплошными контурами. Просто попробуйте следующий код в Kaxaml и дайте мне знать, если это то, что вы искали:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="240"
Height="320"
AllowsTransparency="True"
Background="Transparent"
WindowStyle="None">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="*"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<Border Background="Black"/>
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="5">
<Grid>
<Border Background="White" CornerRadius="0, 0, 5, 5" Opacity="0.7"/>
<Path
Width="15"
Height="15"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z"
Fill="Black"
Stretch="Fill"/>
<Path
Width="15"
Height="15"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z"
Fill="Black"
Stretch="Fill">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<TranslateTransform X="15"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<Border Grid.Row="2" Background="Black"/>
</Grid>
</Window>
PS: Вы можете упростить это решение, избегая преобразований рендеринга, но у вас есть идея.