Используйте UIElement как клип в WPF - PullRequest
Новая
       32

Используйте UIElement как клип в WPF

2 голосов
/ 22 октября 2009

Прошу прощения за мое невежество - я очень новичок в 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_rounded_corners_for_anything

1 Ответ

1 голос
/ 22 октября 2009

РЕДАКТИРОВАТЬ: Теперь я понял, что вы имеете в виду. Фактически вы можете использовать подход 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: Вы можете упростить это решение, избегая преобразований рендеринга, но у вас есть идея.

...