Gebruik UIElement as Clip in die WPF

Question

Asseblief vergewe my onkunde - ek is baie nuwe te WPF.

Ek is op soek om te implementeer'n klein, visuele effek in my aansoek wat gee die voorkoms van die "innerlike" geronde hoeke.Die venster in die vraag het'n donker grens wat omvat verskeie UIElements, een van wat is'n StatusBar, geleë aan die onderkant van die venster.Hierdie StatusBar het'n donker agtergrond wat pas by die venster se grens.Bo die StatusBar is'n inhoud te kyk, wat is tans'n Rooster - sy agtergrond is semi-deursigtige (ek dink dat dit is iets van'n beperking - jy kan sien deur die inhoud te kyk na die lessenaar hieronder).Ek wil graag vir die inhoud te kyk (verteenwoordig deur die deursigtige, innerlike gebied in die figuur hieronder) om die voorkoms van geronde hoeke, al het ek verwag om te sorteer van die skep van die illusie myself.

(Kan nie die beeld nie, want ek is'n lurker en nie'n plakkaat- vind asseblief die teken hier)

My eerste benadering is om by te voeg'n Reghoek (gevul met die dieselfde, donker kleur as die grens) onmiddellik bo die StatusBar en te wys'n Grens met geronde hoeke van sy OpacityMask (soortgelyk aan die oplossing voorgestel deur Chris Cavanagh**).Ongelukkig, die uitwerking wat geproduseer word, is presies die teenoorgestelde van wat ek probeer om te bereik.

Ek verstaan dat die Clip eiendom kan wees van die gebruik in hierdie soort van situasie, maar dit blyk te my dat die gebruik van enige soort van Meetkunde sal bewys aan onvoldoende wees as dit sal nie wees dinamiese grootte van die streek waarin dit woon.

EDIT:Insluitend my 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>

Enige wenke is meer as welkom - ek is gereed om te bied'n meer indiepte detail indien nodig.

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

Answer 1

EDIT: Nou ek het wat jy bedoel.In die feit dat jy kan gebruik Pad + OpacityMask benadering.Jy het om te trek "omgekeerde" pad, om dit te gebruik as dekking masker.Maar ek het eenvoudiger en vinniger oplossing vir jou :).Gebruik Grens + CornerRadius, en vul die gapings met soliede paaie.Net probeer om die volgende kode in Kaxaml en laat my weet as dit is wat jy soek vir:

<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:Jy kan vereenvoudig hierdie oplossing deur die vermyding lewer verander, maar jy het die idee.