How to allow full customization with a Resource Dictionary? (Part II)

ResourceDictionary:

In all my applications I’ve opted to center all the visual information in a single file for several reasons. First, it is easy for the designer to edit just one file. Second, you can load that file from the filesystem, this way the user has the chance to edit the file to fit his needs (assuming he knows XAML and all the commands implemented in the application). And even if you don’t want to give that option to the user it is easy to edit just one file to fix any kind of glitch.

Now lets see a simple button:


<Page xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

  <Grid>

    <Grid.Resources>

      <Style x:Key="btnStyle" TargetType="{x:Type Button}">

        <Setter Property="Width" Value="120" />

        <Setter Property="Height" Value="25" />

        <Setter Property="Foreground" Value="#FFF" />

        <Setter Property="Template">

          <Setter.Value>

            <ControlTemplate TargetType="{x:Type Button}">

              <Border CornerRadius="10">

                <Border.Background>

                  <LinearGradientBrush EndPoint="0,1">

                    <GradientStop Color="#ACF" Offset="0" />

                    <GradientStop Color="#004499" Offset="1" />

                  </LinearGradientBrush>

                </Border.Background>

                <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" />

              </Border>

            </ControlTemplate>

          </Setter.Value>

        </Setter>   

      </Style>

    </Grid.Resources>

    <button Content="Hello World" Style="{StaticResource btnStyle}"/>

  </Grid>

</Page>

This is a very simple example to show how to create a style for a button, this style will result in a button with a gradient blue and rounded edges. The setters are used to set propeties of the class Button, as you can see the Template section is somewhat special, it has the ControlTemplate structure inside the value of the setter. You could put it outside and just reference the ControlTemplate’s key.
The ControlTemplate is used to create the visual of the button from the ground up! Yep, that means you can put there anything you want, from 2D flat button to a 3D animated globe or cd etc..

As you can imagine part of the secret for the customization is here! You can create anything you want for the button, but it still lacks the feature I’ll will cover in the next part, Bindings (yes, you can see one in the template) and Commands, these are the key points to have the visual you want without changing a single line of C# code after you compile :).

Update:

After I read what Thylux said I realised I wasn’t completely clear about everything and the code wasn’t quite right too.

Thylux asked:
How is the style you created being applied to the button at the end?

Yep, the code wasn’t there, somehow wordpress removed that part of the code when I submitted the post. But you have two ways to make a button use a style. Imagine you want all buttons in your application to have the exact same look, you would set the key of Style to {x:Type Button} This way WPF recognizes I’m refering to the class Button and will implement that style to all references of Button (unless you have a specific button calling other style). If you want a specific button to have a specific look you can give a name to the key of the style, in this case “btnStyle”, and in the control, depending on the scope of the button and where the resources are you could use Style={StaticResource btnStyle} or Style={DynamicResource btnStyle}, the diference is in performance and in the scope, StaticResource looks in the same file where the control is, and the resource has to be defined in one of the button’s parents. DynamicResource will look everywhere, including ApplicationResources.

About the Content property, in WPF Buttons don’t have a Text property anymore, instead they have a content property because this way you can put anything you want inside a button :). And no, you can’t create properties dynamically.

Advertisements

6 Responses to “How to allow full customization with a Resource Dictionary? (Part II)”

  1. thylux Says:

    How is the style you created being applied to the button at the end?
    Shouldn´t the button have some kind of style attribute (like HTML) to specify the style used?

  2. thylux Says:

    In order to have some text in this button, you have to bind to some property?
    Isn’t there a default Text property, like in Windows Forms?

    That Content property you used already exists in the Button Class, or is it dinamically created?
    That is, could you specify a XPTO property and it would be dinamically created for the Button?

    If so, it would be created just for that instance of a button (or instances with that particular style applied), or any other button (without that style) would have it to?

  3. Bruno Silva Says:

    I’ve updated the Post Thylux, feel free to ask more questions if you have any doubts.

  4. thylux Says:

    When’s the ‘juice’ comming?

  5. Dai Says:

    Hi!
    I’m new with WPF, can you tell me how to add button by C# (in code-behind file)
    Thanks

  6. Bruno Silva Says:

    after the InitializeComponent() at any time you can do the following:

    create the button
    Button btn = new Button();
    Button.Content = “My Button”;

    put it as the content of your window
    this.Content = btn;


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: