Verwenden Sie UIElement als Clip in WPF

Question

Bitte entschuldigen Sie meine ignorance- Ich bin sehr neu in WPF.

Ich suche eine kleine, optische Wirkung in meiner Anwendung zu implementieren, die das Aussehen der „innere“ gibt abgerundete Ecken. Das Fenster in Frage hat einen dunklen Rand, der mehrere UIElements einkapselt, von denen eines ein StatusBar ist, am unteren Rand des Fensters. Diese StatusBar hat einen dunklen Hintergrund, dass das Fenster der Grenze entspricht. Oberhalb der StatusBar eine Inhaltsansicht ist, die derzeit ein Grid- seinen Hintergrund ist halbtransparent (ich glaube, dass dies etwas von einem Constraint ist man unten durch die Inhaltsansicht auf dem Desktop sehen). Ich würde für den Inhalt Ansicht wie (dargestellt durch den transparenten, inneren Bereich in der Abbildung unten), um den Blick der abgerundeten Ecken zu haben, obwohl ich erwarte, dass Art zu haben, um die Illusion selbst zu erstellen.

(kann das Bild nicht veröffentlichen, weil ich ein Lurker bin und kein Plakat- Sie bitte die Zeichnung hier finden)

Mein erster Ansatz war es, ein Rechteck (gefüllt mit der gleichen, dunklen Farbe, wie die Grenze) unmittelbar über dem StatusBar hinzuzufügen und eine gemeinsame Grenze mit abgerundeten Ecken seiner OpacityMask (ähnlich die Lösung von Chris Cavanagh ** vorgeschlagen) zuweisen . Leider, dass die Wirkung erzeugt wird, ist das genaue Gegenteil von dem, was ich zu erreichen versuchen.

Ich verstehe, dass die Clip-Eigenschaft der Verwendung in einer solchen Situation sein kann, aber es scheint mir, dass jede Art von Geometrie verwendet, wird als unzureichend erweisen, da es nicht dynamisch in die Region so bemessen sein, in dem er sich befindet .

EDIT: Einschließlich meinem 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>

Alle Zeiger sind mehr als Willkommens- Ich bin bereit, vertiefende Detail bei Bedarf zur Verfügung zu stellen.

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

Answer 1

EDIT: Jetzt habe ich, was Sie meinen. In der Tat können Sie Pfad + OpacityMask Ansatz. Sie haben „invertiert“ Pfad zu zeichnen, als Opazitätsmaske zu verwenden. Aber ich habe einfachere und schnellere Lösung für Sie :). Verwenden Border + Cornerradius, und füllt die Lücken mit festen Pfaden. Versuchen Sie einfach den folgenden Code in Kaxaml und lassen Sie mich wissen, ob dies ist, was Sie suchen:

<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:. Sie können diese Lösung vereinfachen, indem Transformationen zu vermeiden machen, aber Sie haben die Idee,