C#•5mo ago

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?

2 Replies

Ellen Joe.♡OP•5mo ago

I currently have this

Hannsen•5mo 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

Gaming

Programming

Bevel effect in Style Template