首页 文章

在WPF中使用UIElement作为Clip

提问于
浏览
2

请原谅我的无知 - 我对WPF很新 .

我希望在我的应用程序中实现一个小的视觉效果,给出“内部”圆角的外观 . 有问题的窗口有一个黑色边框,它封装了几个UIElements,其中一个是StatusBar,位于窗口的底部 . 此StatusBar具有与窗口边框匹配的深色背景 . StatusBar上方是一个内容视图,它当前是一个网格 - 它的背景是半透明的(我认为这是一个约束 - 你可以通过内容视图看到下面的桌面) . 我希望内容视图(由下图中的透明内部区域表示)具有圆角的外观,但我希望自己不得不创建幻觉 .

(Can't post the image because I'm a lurker and not a poster- please find the drawing here)

我的第一种方法是在StatusBar的正上方添加一个矩形(用边框填充相同的深色),并为其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 回答

  • 1

    EDIT: 现在我明白你的意思了 . 实际上你可以使用Path OpacityMask方法 . 您必须绘制"inverted"路径,以将其用作不透明蒙版 . 但我有更简单,更快速的解决方案:) . 使用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:你可以通过避免渲染变换来简化这个解决方案,但你明白了 .

相关问题