使用UIElement作爲WPF中的剪輯

Question

請原諒我的無知 - 我對WPF很陌生。

我正在尋找在我的應用程序中實現一個次要的視覺效果，該效果給出了「內部」圓角的外觀。所討論的窗口有一個黑色邊框，它封裝了幾個UIElements，其中一個是StatusBar，位於窗口的底部。此StatusBar具有與窗口邊框相匹配的黑色背景。在StatusBar之上是一個內容視圖，它目前是一個Grid--它的背景是半透明的（我認爲這是一個約束 - 你可以通過內容視圖看到下面的桌面）。我希望內容視圖（由下圖中的透明內部區域表示）具有圓角的外觀，但我希望自己能夠創造幻覺。

（不能發佈圖片，因爲我是一個潛伏者，而不是生成海報please find the drawing here）

我的第一種方法是添加一個矩形（填充相同，深色爲界）立即在StatusBar之上，併爲它的OpacityMask指定一個帶有圓角的邊界（類似於Chris Cavanagh提出的解決方案**）。可悲的是，所產生的效果與我試圖達到的效果完全相反。

我知道剪輯屬性可以用於這種情況，但在我看來，使用任何形式的幾何將被證明是不夠的，因爲它不會動態調整大小到它所在的區域駐留。

編輯：包括我的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> 

任何指針比welcome-我準備在必要時提供更詳細深入的多。

** http://www.dotnetkicks.com/wpf/WPF_easy_rounded_corners_for_anything

Answer 1

編輯：現在，我得到你的意思。實際上你可以使用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：您可以通過避免渲染變換簡化了這一解決方案，但你有這個想法。