Search

The Alchemy Bin

Gavin's Space

Lidnug & Scott Guthrie – 4th August 2015

LidnugScottGuImage-01

It is with great pleasure that I add this to my blog.

On the 4th of August, Scott Guthrie (Microsoft Corporate VP) himself will be kindly holding is 18th live Q&A session with Lidnug. This is a free event hosted online via Live Meeting and all are welcome to come along.

The time of this event is Tuesday, August 4th 2015, from 10:00AM to 11:30 AM (PDT)

You can register your interest on Eventbrite here…

Eventbrite

Do note you can add this even to your calendar via Eventbrite and please double check time conversions to your local time when doing so.

Once the event is close to starting, the links required to join the session will be posted/sent out. Also; we strongly advise that if you’re going to this session, to use a windows machine and install the Windows LM Client.

Look forward to see you there and if you have any questions please visit the LIDNUG group on LinkedIn, or find us on twitter @Lidnug

Advertisements

A Simple XAML Button in the World of WPF – Flat Design with a Bit of Affordance.

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.

User Experience Design Goes Deeper Than Tools or Strategies

As many have said, it is fair to say that if you are designing a User Experience for software you are probably doing one or more of the following – Visual Design, Interaction Design, and User Research.

This is in no way a complete list.

These disciplines are the tools or patterns which are used to implement a great user experience. Great, so according to what we’ve just talked about, if we use these tools and mix in many of the well talked about strategies dotted around we should end up with a great user experience.

Well, maybe; depending on the context of the design you are chasing after.

A good friend of mine recently told me about a conversation he’d had with a company offering their services as software developers. Only they weren’t offering their services as software developers, instead they were offering experiences. In their words—’people don’t want software anymore, they want experiences’. Let us say the remainder of the conversation did not go well once their ability at software development was tested and left wanting. When you’ve worked with companies who don’t give two shakes of a rat’s tail about the experience your software brings; and not many do. You are rewarded by creating great software and designs which simply work. In some cases, I would even go as far as saying UX design, at its core, doesn’t even come into the mix. Instead, good UI design has the stage here. And yes, even though UI and UX are not the same thing, they do share a very strong relationship.

Which brings me to this…

Please please please stop throwing titles like Experience Design, Software Design and Engineering up in the air like they were nothing. We need to start treating these words with the respect they deserve. There are those out there that do, but there appears to be a generation rising up which do not. The heart is going out of it, and with it I can see a myriad of applications out there which just look at act like many others preceding them. Each one of the mentioned disciplines can take decades to truly master.

Anyway, as I said before, there are times which UX can be happily left sitting on the side-lines watching. What I mean by this is that to those who are starting up, or have limited resources; not thinking about UX too much could actually be helpful. Why? Focusing on building great software with attention paid to a robust, easy to manage, repair and maintain product; which does what it’s supposed to do well. Delivers with it as a bi-product a good response.

However, even sitting at the side, UX can still dish out a little advice. During those times, making use of good design disciplines can govern a UI design and achieve good results. These disciplines of design were certainly not spawned from UX design, they are just good practices we see in many designs. We can also name some of these too; like the gestalt principle, colour theory, graphics design, spacing and typography.

Though I must add a warning here…

Like subjects mentioned such as Interaction Design, their mastery is no trivial thing. Take typography for example. You may be able to select a nice typeface that affords your application legibility and a pleasant appearance. With a little more practice you may be able to select a typeface which best suits the purpose of your application. To take that further, and design or select a typeface specifically for the context of your application is an entirely different level of craftsmanship.

In the world of UX design where the Context is king, going beyond tips, practices, tools and or strategies. We begin to enter a subject which truly demands a life time of dedication. Designing experiences is possible, but only if we understand the context of its existence.

And this is where the true heart of UX design lives—inside the context of its existence.

This is where I shall leave you, but if you want to know more about context. Please take a look at my course on building the Context of a UX design here on Pluralsight. Feedback and criticism is always welcome.

http://www.pluralsight.com/courses/user-experience-first-in-context

a demo of which can also be found here…
UX First and in Context Demo

You can also find me floating around on twitter @GLanata

WPF Pack URI Authority

Those who are no stranger to wpf, and who strive to separate out their work across multiple projects to maintain order with a chaotic world; will have no doubt come across the WPF Pack Uri; and more specifically, the authority. This blog is based on the scenario that you are maintaining your resources in an assembly separate to your executable assembly.

Pack Uri’s in their absolute state can look something like this.

pack://application:,,,/ApplicationResources;component/Cursors/a-custom-cursor.cur

There are two settings you will come across that are directly related to the authority. These settings are…

application
(which is the option selected in the above example of an absolute pack Uri)

&

siteoforigin

Starting with a simple wpf application. Let us begin…

ProjectSetup

The application has a simple structure. A project for the application, and a second project to hold the resources we will use in this application. I have already added a folder to the resources project called ‘Cursors’. In which we’ll add as it says; our custom cursors.

Now at this point we can pause a moment to think. To think about how we want to output our custom cursors when the application is built. Do we either include them as a resource embedded in the ‘ApplicationResources’ assembly, or do we copy the file to the output folder, in a folder called cursors and grab the cursor from there?

How you do this is of course your decision and how you prefer to work it. Depending on what your choice is, let’s now look at how your decision effects the choice over which authority to use.

Application

The application authority is the default, and this is why…

I’ve added a cursor to the ApplicationResources project into its relevant folder.

.AddedCursor

Now if we take a look at the properties of that newly added cursor, we see the following…

CursorProperties

Two things to note here. Firstly, the build action is set to ‘Resource’ and we are not copying the file to the output directory. We don’t need to copy the file to the output directory because we are embedding it as a resource directly into the assembly. As the ApplicationResources project is referenced by the main project, we will see something like this when we build the application in our output directory.

OutputEmbeddedResources

Note the size of the ‘ApplicationResource.dll’, it’s this size because it has the ‘a-cursom-cursor.cur’ embedded in it; all nicely tucked away for the application to consume at will.

So now we wish to consume this cursor in our application and we shall do so via a pack Uri using the application authority. In the XAML I’m loading the cursor as a resource, using the Pack Uri thusly…

CursorResourceApplicationUri

And that is it. We have a button that has a custom cursor when we hover over it with the mouse, and the cursor is being retrieved by a Pack Uri using ‘application’ as the authority. One word of caution however, WPF has a funny tendency to throw its toys out the pram when you bring in new resources from other assemblies. If you finding it doing so, you can pacify it by doing a clean and rebuild.

As ‘application’ is the default authority, we do have the option here to shorten that Uri. You will be able to come away clean with the following…

/ApplicationResources;component/Cursors/a-custom-cursor.cur

And not have wpf slap you over the head about it.

Site Of Origin

Firstly, unlike we mentioned above, a site of origin Uri must be absolute; there are no ways to shorten the Uri to make things look tidy here.

Going back to when we added the cursor, we need to change a few settings on that file. Those settings are as shown below…

CursorPropertiesSiteOfOrigin

Changing the Build Action to ‘Content’ and setting the Copy to Output Directory to anything but ‘Do not copy’, I went for ‘Copy Always’; which produces for us what we see below in our output directory after a new build.

OutPutDirectorySiteOfOrigin

Note the size of the ‘ApplicationResources.dll’, and in our Cursors folder…

CursorInFolder

Now, at this point we have not made any changes to the Pack Uri in our application. We can build and run this application, but when we reach the point of using the cursor. WPF won’t just throw the toys out the pram, it will proceed to pick the pram up and throw it at you while shouting naughty words in ten different languages. Score one to .NETs culture support!

So, to avoid such a spectacle, let us make the needed changes to that Pack Uri so we can access the cursor again. And what we end up with is something that looks like this…

XamlSiteOfOrigin

As you may have noticed, the assembly reference is no longer present. We don’t need it as the file is no longer associated with the assembly when we build.

And that’s it, from this page of babble we can see how we use the two different authorities when building a WPF Pack Uri and how each is useful depending on the chosen architecture. ‘Application’ authority can lead us to resources embedded inside our assemblies. ‘Siteoforigin’ allows us to access resources relative to the location of our application’s executable after output.

Blog at WordPress.com.

Up ↑