Utiliser UIElement en tant que clip dans WPF

Question

Je vous en prie, excusez mon ignorance. Je suis très nouveau dans WPF.

Je souhaite implémenter dans mon application un effet visuel mineur qui donne l'apparence de "interne". coins arrondis. La fenêtre en question a une bordure sombre qui encapsule plusieurs UIElements, dont l’un est un StatusBar, situé au bas de la fenêtre. Cette barre d'état a un arrière-plan sombre qui correspond à la bordure de la fenêtre. Au-dessus de la barre d'état se trouve une vue de contenu, qui est actuellement une grille - son arrière-plan est semi-transparent (je pense qu'il s'agit d'une contrainte - vous pouvez voir à travers la vue de contenu sur le bureau ci-dessous). J'aimerais que la vue du contenu (représentée par la zone transparente intérieure dans la figure ci-dessous) ressemble à des coins arrondis, bien que je m'attende à devoir créer une sorte d'illusion moi-même.

(Je ne peux pas publier l'image car je suis un lurker et non une affiche - Veuillez trouver le dessin ici )

Ma première approche consistait à ajouter un rectangle (rempli de la même couleur sombre que la bordure) immédiatement au-dessus du StatusBar et à attribuer une bordure aux coins arrondis à son masque Opacity (similaire à la solution proposée par Chris Cavanagh **). . Malheureusement, l’effet produit est exactement le contraire de ce que j’essaie d’obtenir.

Je comprends que la propriété Clip peut être utile dans ce type de situation, mais il me semble qu'utiliser une géométrie quelconque se révélera inadéquat, car elle ne sera pas dimensionnée dynamiquement à la région dans laquelle elle réside. .

EDIT: y compris mon 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>

Tous les indicateurs sont les bienvenus. Je suis prêt à fournir des détails plus détaillés si nécessaire.

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

Answer 1

MODIFIER: Maintenant, j'ai compris ce que vous voulez dire. En fait, vous pouvez utiliser l'approche Path + OpacityMask. Vous devez dessiner " inversé " chemin, pour l'utiliser comme masque d'opacité. Mais j'ai une solution plus simple et plus rapide pour vous :). Utilisez Border + CornerRadius et remplissez les espaces vides avec des chemins pleins. Essayez simplement le code suivant dans Kaxaml et dites-moi si c’est ce que vous cherchiez:

<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: Vous pouvez simplifier cette solution en évitant les transformations de rendu, mais vous en avez l’idée.