As many are aware, there is a fashion of flat design going around at the moment; and many are jumping on the bandwagon, some with futility I feel. Flat design, like many other styles of design, is not a way of life. It is one possible result of the needs of a given project. Those who go for this style of design without really thinking if it’s really what is needed, do so and end up losing more than they gain. As an example; one issue with flat designed buttons is that if not done correctly, they don’t appear as buttons. If this is the case, how do users know it can be pressed?

Of course, done correctly and armed with knowledge and experience, it can be a beautiful thing.

Anyway, back to the point of this post; which is to show you how to put together a very simple XAML button which is of a flat design, but still encompasses the idea of affordance.

In this short tutorial I’ll be using Expression Design 4 (free version) which can be found here…
http://www.microsoft.com/en-gb/download/details.aspx?id=36180

and Visual Studio 2013 Community Edition; which can be found here…
https://www.visualstudio.com/

Let’s begin.

To start with I’m going to create a simple WPF application like so.

NewWPFProject

And before I do anything else I’m going to add a folder called ‘Resources’, in which I’m going to add two folders. One called ‘Vectors’ and the other called ‘Styles’. See attached image below.

NewFolders

Now, let’s go to Expression Design. I’ve chosen to do it this way as I would like to show you an old feature of this application which is very useful for WPF and isn’t used in Silverlight. Once you have Exp Design open, go to file > new and setup your new file something like this.

NewExpDesign

Once you have this open you will be looking at something similar to what I have here.

NewFIleExpDesignReady

You’ll also notice a grid. If you can’t see this grid you can go to View > Show > Grid or use the default keyboard short-cut of Ctrl + #. To alter the cell size of your grid, you can do so in Edit > Options > Units and Grids; and I’m using a Grid size of 5px; When drawing vectors you can snap to grid by View > Snap to Grid or Ctrl + Shift + #. This is a handy tip if you’re new to vector drawing and need a little hand with placement. It’s also worth noting that the more capable vector artists still use this feature.

For this post, I’m only go to draw a very simple vector using the rectangle tool which can be seen on your toolbox. Press F5 to open/close it if it is not on your window. Then using that tool I’m going to draw something like we see here, and I’ve filled with an amber like colour since it’s a sunny day here.

ToolBoxDrawnRectColoursAndCornerRadius

Also take note that under the colours panel titled appearance there is an Edit Rectangle section which allows us to set our corner radius. Set this to how you’d like it; I’m going for a setting of 25px.

Now we have our vector for our project. But before we export this to something WPF can use, I’m going to do one last thing and that’s set the layer name to something better than Layer 1. And I’ve gone for ‘ButtonBackground’.Layers

The importance of this will be noticeable when we go back to our WPF application. For now, let us export this vector and to start this, go to File > Export or Ctrl + E. Which produces a window like this.Export

Note that the settings I have already given here. Which is Format has been set to ‘XAML WPF Resource Dictionary’. This is a very important setting as it will produce an object of T DrawingBrush, and make it available as a resource. Also make sure Group by is set to ‘Layers’ with Live effects to its default of ‘Rasterize all’.

Now set your location—which can be found at the bottom of this window—to the location of the vector folder we created earlier inside our WPF application. This will be our output directory and once you are ready, hit Export All.

We can now go back to VS and clicking the Show All Files button we can add that exported file to our project.

Now for a bit of XAML. I’m going to create a button style in a new Resource Dictionary which will be placed in the Styles folder we created earlier called ‘ButtonStyles’. At the top of this Dictionary I first need to access the ButtonVector Dictionary we created with Expression Design. This line of XAML looks something like this.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.MergedDictionaries>;
        <ResourceDictionary Source="..\Vectors\ButtonVector.xaml">
    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

If you look inside the ButtonVector.xaml, you’ll see a resource of T DrawingBrush which has it’s x:Key set to the name we gave to the Layer.

Back to the ButtonStyles.xaml file. I’m going to add a button style after the ‘MergedDictionaries’ which looks something like this…

<Style TargetType="Button" x:Key="ButtonStyle.FlatButton">

    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Background" Value="{StaticResource ButtonBackground}"/>
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="FontWeight" Value="600"/>
    <Setter Property="Width" Value="200"/>
    <Setter Property="Height" Value="75"/>
    <Setter Property="Padding" Value="0,0,4,4"/>
        
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                    
                <Grid Background="Transparent">
                        
                    <Rectangle Fill="{TemplateBinding Background}"
                                Margin="{TemplateBinding Padding}"
                                x:Name="rect">
                        <Rectangle.Effect>
                            <DropShadowEffect BlurRadius="0" Color="Black" ShadowDepth="4"/>
                        </Rectangle.Effect>
                    </Rectangle>
                        
                    <ContentPresenter HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        Margin="{TemplateBinding Padding}"/>
                        
                </Grid>
                    
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Padding" Value="4,4,0,0"/>
                        <Setter TargetName="rect" Property="Effect" Value="{x:Null}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
                    
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Before we put this button on our main window, let’s take a look at the XAML. In this style I am creating a custom Control Template which contains a few other UIElements. The first is a Grid which holds everything else. Inside that Grid there’s a Rectangle and a Content Presenter. Looking at this Rectangle first, I’ve set the x:Name=“rect” as we need to access this Rectangle with a Trigger. Also, the Effect property has been set with a DropShadowEffect. Take note of the BlurRadius, Color and ShadowDepth of this DropShadowEffect as it produces a very flat drop shadow. Remember we are going for flat design here. Furthermore, the Fill property on the Rect is set to {TemplateBinding Backgournd}. The Rectangle will take whatever background the Button’s property of the same name is set to; and in this case we are setting this to the vector we produced in Exp Design by this line here.

<Setter Property="Background" Value="{StaticResource ButtonBackground}"/>

Also note the how I’ve set the Margin property on both the Rectangle and Content Presenter. It is template bound to the Padding property of the button itself. If you go back to the setters at the top of the style definition, you’ll see that Padding is set to ‘0,0,4,4’. When the user presses this button, it is this Padding property that we will inverse via the trigger; and give the appearance the button has been pressed.

And now the code for the MainWindow.xaml is…

<Window x:Class="FlatDesignButton.WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources\Styles\ButtonStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    
    <Grid>
        
        <Button Style="{StaticResource ButtonStyle.FlatButton}"
                Content="Press Me!"/>;
        
    </Grid>
    
</Window>;

And the end result is this…
ButtonWindow

When you press the button, the button will appear it has been pressed by moving to the position of the drop shadow. The drop shadow is solid and keeping in with the idea of flat design, but at the same time we are giving this button the affordance of something that is pressable. If the rest of your UI is to the style of Flat Design, and your buttons are blending in to the rest of the UI; this can be an option for you.

As always, all feedback and criticism is welcome and you can find me on Twitter @GLanata.

Advertisements