代码之家 › 专栏 › 技术社区 › egoodberry

在WPF中使用uielement作为剪辑

uielement clip opacity wpf

2

egoodberry · 技术社区 · 16 年前

请原谅我的无知-我对水渍险很陌生。

我希望在我的应用程序中实现一个小的视觉效果,使其看起来像“内部”圆角。有问题的窗口有一个黑色边框,它封装了几个ui元素,其中一个是位于窗口底部的statusbar。此状态栏具有与窗口边框匹配的深色背景。在状态栏的上方是一个内容视图,它当前是一个网格-它的背景是半透明的(我认为这是一个限制-您可以通过内容视图看到下面的桌面)。我希望内容视图(由下图中透明的内部区域表示)具有圆角的外观,尽管我希望自己也能创造出这种错觉。

(不能张贴图片,因为我是个潜伏者而不是海报- please find the drawing here )

我的第一个方法是在状态栏的正上方添加一个矩形(填充了与边框相同的深色),并将圆角边框指定给它的OpacityMask(类似于Chris Cavanagh**提出的解决方案)。不幸的是,产生的效果与我试图达到的效果完全相反。

我知道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 回复 | 直到 12 年前

1

Anvaka 16 年前

编辑: 现在我明白你的意思了。实际上,您可以使用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:您可以通过避免渲染转换来简化这个解决方案,但是您已经有了这个想法。