Wpf around the weird border

Question

Hello

I have been trying for 2 days to create a toggle button that is depressed, as shown above, but this upper bound gives me a headache. Does anyone know how to create this round corner that goes down? The background is a linear gradient from top to bottom: # b8c7d6 - # a8b3c4

Any help at all would be greatly appreciated!

I have something like this, but it is far from design:

<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}"> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Padding" Value="1"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Grid> <Border Background="Black" BorderThickness="1" BorderBrush="#FF4E4F50" CornerRadius="3"/> <Border Background="Black" Margin="1" CornerRadius="3"/> <Border Margin="2" CornerRadius="3"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#0099B9D1" Offset="0"/> <GradientStop Color="#FF99B9D1" Offset="1"/> <GradientStop Color="#B299B9D1" Offset="0.054"/> </LinearGradientBrush> </Border.Background> </Border> <Border Margin="2" CornerRadius="3" Opacity="0.3"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <LinearGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterY="0.5" CenterX="0.5"/> <SkewTransform CenterY="0.5" CenterX="0.5"/> <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/> <TranslateTransform/> </TransformGroup> </LinearGradientBrush.RelativeTransform> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="Black" Offset="1"/> <GradientStop Color="#00090909" Offset="0.022"/> <GradientStop Color="#00000000" Offset="0.99"/> <GradientStop Color="#45060606" Offset="0.001"/> </LinearGradientBrush> </Border.Background></Border> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsKeyboardFocused" Value="true"> </Trigger> <Trigger Property="IsChecked" Value="true"> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="#ADADAD"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> 

Answer 1

Here is what worked for me. I found that rounded corners added some additional problems when creating the shadow of the upper area correctly, but I was able to get this working by combining several methods.

the first technique involves the smart use of two boundaries. The outer border is ClipToBounds true, and the inner border is DropShadowEffect , with ShadowDepth set to 0 and a BlurRadius around 5. This gives us some of what we need, but it won’t handle the rounded corner problem (we get to that) . This method can be found in this article . Here is its essence:

 <Border BorderBrush="DarkGray" BorderThickness="1" ClipToBounds="True"> <Border BorderBrush="Black" BorderThickness="1" Margin="-1"> <Border.Effect> <DropShadowEffect ShadowDepth="0" BlurRadius="6"> </Border.Effect> </Border> </Border> 

If I recall correctly, at the moment we will have something close to what you want, except that DropShadowEffect "bleeds" from rounded corners (we will talk about this again).

Another problem we now have is that any children that we place inside the internal Border also applied DropShadowEffect to them! To fix this problem, we need a second method . Place the two Borders together with another container (to save the contents) in the Grid , so that the external Border and the new container will be siblings. This will cause siblings to overlap with each other only by applying DropShadowEffect to Border . See this answer .

Now, to address the bleed problem, where DropShadowEffect does not follow the outline of rounded corners, but rather acts as if the corners were right. This requires a third method . We need to use the Michah ClippingBorder user control. We need to replace the aforementioned external Border element with its ClippingBorder , while maintaining the ClipToBounds true. This will reduce bleeding in rounded corners.

I was able to combine these three methods to create the look of the “immersed in” (or “insert”) border. It looked something like this:

 <Grid> <local:ClippingBorder x:Name="TopShadowClippingBorder" BorderThickness="0" CornerRadius="5" ClipToBounds="True"> <Border x:Name="TopShadowBorder" BorderBrush="#D8333333" BorderThickness=".5,1,.5,0" Padding="0" CornerRadius="5" ClipToBounds="True"> <Border.Effect> <DropShadowEffect Direction="270" ShadowDepth="0.5"/> </Border.Effect> </Border> </local:ClippingBorder> <Border x:Name="InsetBorder" BorderBrush="#99A1A1A1" BorderThickness="0.5,0,0.5,1" CornerRadius="5" /> <StackPanel x:Name="Contents_StackPanel" Orientation="Horizontal" Margin="5,5,5,5"> (Contents go here...) </StackPanel> </Grid> 

Note that the top “glow” (DropShadowEffect) perfectly follows the outline of the rounded corner of the border:

Answer 2

I would use two borders: the outer would look something like this:

 <Border CornerRadius="3" BorderBrush="White" BorderThickness="1"> 

Internal will create a shadow effect as follows:

 <Border CornerRadius="3" BorderThickness="2,4,2,0"> <Border.BorderBrush> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="Black"/> <GradientStop Offset="0.2" Color="#00000000"/> </LinearGradientBrush> </Border.BorderBrush> 

Obviously, you will need to adjust the values, but this should at least produce the effect you need.