Utilisez UIElement comme Clip dans WPF

Question

S'il vous plaît pardonnez mon ignorance, je suis très nouveau à WPF.

Je cherche à implémenter un effet visuel mineur dans mon application qui donne l'apparence de coins arrondis "intérieurs". La fenêtre en question a une bordure sombre qui encapsule plusieurs UIElements, dont l'un est un StatusBar, situé en bas de la fenêtre. Ce StatusBar a un fond sombre qui correspond à la bordure de la fenêtre. Au-dessus de la StatusBar est une vue de contenu, qui est actuellement une grille - son arrière-plan est semi-transparent (je pense que c'est quelque chose d'une contrainte - vous pouvez voir à travers la vue de contenu sur le bureau ci-dessous). Je voudrais que la vue de contenu (représentée par la zone intérieure transparente dans la figure ci-dessous) ait l'aspect de coins arrondis, bien que je m'attendais à devoir créer moi-même l'illusion.

(ne peut pas afficher l'image parce que je suis un rôdeur et non un d'affiche please find the drawing here)

Ma première approche a été d'ajouter un rectangle (rempli de la même couleur foncée que la frontière) immédiatement au-dessus de StatusBar et d'assigner une Bordure avec des coins arrondis à son OpacityMask (similaire à la solution proposée par Chris Cavanagh **). Malheureusement, l'effet produit est exactement le contraire de ce que j'essaie d'atteindre. Je comprends que la propriété Clip peut être utile dans ce genre de situation, mais il me semble que l'utilisation de n'importe quelle sorte de géométrie s'avérera inadéquate car elle ne sera pas dimensionnée dynamiquement à la région dans laquelle elle se trouve. 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> 

Les pointeurs sont plus Welcome- je suis prêt à fournir des détails plus approfondie si nécessaire.

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

Answer 1

EDIT: Je obtenu ce que vous voulez dire. En fait, vous pouvez utiliser l'approche Path + OpacityMask. Vous devez dessiner un chemin "inversé", 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 avec des chemins solides. Essayez le code suivant dans Kaxaml et laissez-moi savoir si cela est ce que vous recherchez:

<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 de rendre des transformations, mais vous avez l'idée.