WPF style for buttons

Question

I haven't used WPF for a very long time (close to 4 years). But now started to use it again for some usage, you can see one of my top asked questions is in WPF. The reason I mention is this because I do have some knowledge about WPF and how it works. My latest project invovlves using BLEND to achieve a very good UI. So here I have a Photoshop layout, and I am trying to get this layout design,

And so far I only have this,

So really would appreciate if someone could point me on the following things.

How to get the border glow effect and curves also how to group them to a particular style in a separate file and link it to the buttons. Thanks for your time and answers

EDIT: With my styles code.

I have the following styles code in Custom_Styles.xaml (Resource dictionary) How do I link it to the button?

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Keyboard_actual">

    <Style x:Key="Button" TargetType="Button">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border>
                        <Rectangle Margin="2" Stroke="#60000000" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

@FᴀʀʜᴀɴAɴᴀᴍ hey no worries bro.. tks! – JackyBoi Dec 19 '15 at 10:45 — JackyBoi, Dec 19 '15 at 10:45

Fᴀʀʜᴀɴ Aɴᴀᴍ · Accepted Answer · 2015-12-20T09:25:36.807

For the border glow effect, you can add a Drop Shadow Effect with a Shadow Depth of 0 and the desired color and a border brush of white for the Button.

To create the style in a separate file, you need to create a Resource Dictionary like this:

Project ► Add New Item... ► Resource Dictionary

Then name your file. In this example, I name it Styles.xaml.

Now open up your App.xaml and put this within the Application tag:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Styles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <!--Put all previous resources in the App.xaml here-->
    </ResourceDictionary>
</Application.Resources>

Now in the Styles.xaml file within the ResourceDictionary tag, put the style. I am working on a style too. Once I finish it I will post it.

To link the style, use:

<Button Style="{StaticResource Button}" .../>

It may not work since the key is "Button". If it doesn't change it to something like "ButtonStyle".

And the Drop Shadow Effect does a pretty decent job.

Here's an example (Zoomed at 200%):

and the XAML style:

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="BorderBrush">
        <Setter.Value>
            <SolidColorBrush Color="#FF00C3BA"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0.8" CornerRadius="3">
                    <Border.Effect>
                        <DropShadowEffect Color="#FF72FFE5" ShadowDepth="0"/>
                    </Border.Effect>
                    <TextBlock Foreground="{TemplateBinding BorderBrush}" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

used like this:

<Grid Background="#FF171717">
    <Button Content="Q" HorizontalAlignment="Left" Height="47" Margin="103,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
    <Button Content="Y" HorizontalAlignment="Left" Height="47" Margin="378,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
    <Button Content="T" HorizontalAlignment="Left" Height="47" Margin="323,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
    <Button Content="R" HorizontalAlignment="Left" Height="47" Margin="268,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
    <Button Content="E" HorizontalAlignment="Left" Height="47" Margin="213,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
    <Button Content="W" HorizontalAlignment="Left" Height="47" Margin="158,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
</Grid>

So this resources dictionary can contain multiple styles? and not only one right? cause as u can see from my photoshop image I need to have multiple sizes of the buttons — JackyBoi, Dec 19 '15 at 11:15
Yes infinite styles. But you can just set the width of each button. Why create so many styles. It might decrease performance. — Fᴀʀʜᴀɴ Aɴᴀᴍ, Dec 19 '15 at 11:17
I meant one for the top row all the esc - f12 buttons and then for the other alphabets. — JackyBoi, Dec 19 '15 at 11:20
Is it possible to show me how to get that effect on the button as I showed up top. Tks. — JackyBoi, Dec 19 '15 at 17:53
Hi, not to bother was wondering is that is all the anwer you are going to offer? — JackyBoi, Dec 20 '15 at 03:15
You can't expect anyone here to offer you complete styles. However I will post a sample. — Fᴀʀʜᴀɴ Aɴᴀᴍ, Dec 20 '15 at 09:04
Thankyou! wasn't expecting so.. but some guideline is great.. tks — JackyBoi, Dec 21 '15 at 13:24
Is there any way of animating this and adding a hover and click effect? — Mrbisquit, Dec 28 '22 at 17:21
@Mrbisquit See: https://stackoverflow.com/questions/50757498/color-transition-in-a-buttons-hover-effect-using-a-style-in-wpf — Fᴀʀʜᴀɴ Aɴᴀᴍ, Dec 30 '22 at 14:19

WPF style for buttons

1 Answers1

Linked