C
C#4mo ago
Firefly.♡

Bevel effect in Style Template

I'm trying to get the same style as in the shown screenshot: I currently have this
<Style x:Key="NavPanelButton" TargetType="RadioButton">
<Setter Property="Width" Value="60"/>
<Setter Property="Height" Value="60"/>
<Setter Property="Margin" Value="0,5,0,0"/>
<Setter Property="Background" Value="Red" />
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border x:Name="ButtonBorder"
CornerRadius="5"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="1" ShadowDepth="2" Opacity="1"/>
</Border.Effect>
<ContentPresenter x:Name="ContentPresenter"
Focusable="False"
RecognizesAccessKey="True"/>
</Border>
<!---- Rest Code---->
</Style>
<Style x:Key="NavPanelButton" TargetType="RadioButton">
<Setter Property="Width" Value="60"/>
<Setter Property="Height" Value="60"/>
<Setter Property="Margin" Value="0,5,0,0"/>
<Setter Property="Background" Value="Red" />
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border x:Name="ButtonBorder"
CornerRadius="5"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="1" ShadowDepth="2" Opacity="1"/>
</Border.Effect>
<ContentPresenter x:Name="ContentPresenter"
Focusable="False"
RecognizesAccessKey="True"/>
</Border>
<!---- Rest Code---->
</Style>
How do i add this semi transparent border on the top of the button where the content presenter is laying below it as well?
No description
2 Replies
Firefly.♡
Firefly.♡4mo ago
I currently have this
No description
Hannsen
Hannsen3mo ago
You could place a Grid within your Border, within the Grid you place a Rectangle and set RadiusX and RadiusY. Fill it with "White" And set the Opacity as how you want it. Opacity is a value between 0 and 1
Want results from more Discord servers?
Add your server