Clever Geek Handbook

Use UIElement as Clip in WPF

Please forgive my ignorance - I am very new to WPF.

I want to implement a subtle visual effect in my application that gives the appearance of "inner" rounded corners. The window in question has a dark border that encapsulates several UIElements, one of which is the StatusBar located at the bottom of the window. This StatusBar has a dark background to match the border of the window. Above the StatusBar is the content view that is currently the Grid. Its background is semi-transparent (I think this is a bit of a limitation - you can see through the desktop content view below). I would like the content view (represented by the transparent inner area in the image below) to look like rounded corners, although I expect I'll have to create the illusion.

(Can't post image because I am a lurker and not a poster find the image here )

My first approach was to add a rectangle (filled with the same dark color as the border) directly above the StatusBar and assign a border with rounded corners to the OpacityMask (similar to the solution suggested by Chris Cavanagh **) Unfortunately, the effect created is the exact opposite what I am trying to achieve.

I understand that the Clip property can be useful in a situation like this, but it seems to me that using any geometry would be inadequate as it won't dynamically change in the region it is in.

EDIT: Including 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>

Any pointers are more than welcome - I'm willing to provide more details if needed.

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

+2


source to share


1 answer


EDIT: Now I get what you mean. You can actually use the Path + OpacityMask approach. You have to draw an "upside down" path to use as an opacity mask. But I have a faster and faster solution for you :). Use Border + CornerRadius and fill in the blanks with solid paths. Just try the following code in Kaxaml and let me know if this is what you were looking for:

<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: You can simplify this solution by avoiding render transformations, but you got the idea.

+1


source






More articles:


All Articles