Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

12. fejezet - Resources and Styles (written by Gergely Kovásznai)

12. fejezet - Resources and Styles (written by Gergely Kovásznai)

It is tiring and tedious to set certain attributes of certain XAML elements, especially in practice, since GUI elements usually share their design with each other. For example, the buttons on a stylish GUI have the same height, textboxes have the same font, the margins of images are set to the same value, etc. That is to say, WPF must support uniform formatting. Such unification has several advantages. First, it supports source code recycling, i.e. common settings have to be defined only at a single location in the XAML source code; at other locations in the code we just reference to that single definition. Furthermore, it becomes easy to modify the source code, since any modification in the definition immediately appears at other locations in the code.

Styles in WPF serve the above-mentioned purposes. They have been inspired by the Cascading Style Sheets (CSS) used in web development. A style is actually a bunch of formatting settings, as detailed in Section XII.2. But first, in Section Hiba! A hivatkozási forrás nem található., we are introducing the so-called resources, which can be used for similar purposes.

Resources

For programmers, a resource usually means an external object (e.g. audio or video file) that can be accessed from any location of the application and used by any module. Resources in WPF have a slightly more general meaning; any object can be used to make a resource from.

As we have already mentioned, each XAML element results in constructing a completely new object. What to do if we intended to use the same object from several GUI locations; e.g. the same image or brush or shape? Let us consider the case when we would like to paint the buttons on our GUI uniformly by using the same brush. For the sake of example, we are going to use an ImageBrush. First, let us add an image file to our project (c.f. Section XVIII.1.1), which is called panda.png and referenced in the source code below, and then add a Resource to our Window, as follows:

<Window.Resources>

        <ImageBrush x:Key="pandaBrush" ImageSource="panda.png"/>

        <LinearGradientBrush x:Key="gradientBrush">

                <GradientStop Offset="0.2" Color="DarkBlue"/>

                <GradientStop Offset="0.5" Color="#FF1CB433"/>

                <GradientStop Offset="0.8" Color="DarkBlue"/>

        </LinearGradientBrush>

</Window.Resources>

As can be seen, for the sake of example, we have also defined another brush, a LinearGradientBrush, as another resource. It is very important to assign a unique identifier to each of our resources, by using the x:Key attribute, since later we will be able to reference to each resource by its identifier, at any location of Window. Referencing can be done by using a StaticResource element[1], which provides the ResourceKey default property for specifying a resource identifier.

For instance, let us create a few controls (two buttons and one ListBox) in our window, and use the resources defined above.

<Button Content="Panda button!"

        Background="{StaticResource ResourceKey=pandaBrush}"/>

        <Button Content="Color button!"

                Background="{StaticResource gradientBrush}"/>

        <ListBox Background="{StaticResource pandaBrush}">

                <StackPanel Orientation="Horizontal">

                        <Image Source="giant_panda.jpg"/>

                        <TextBlock Text="Giant panda"></TextBlock>

                </StackPanel>

                <StackPanel Orientation="Horizontal">

                        <Image Source="red_panda.jpg"/>

                        <TextBlock Text="Red panda"/>

                </StackPanel>

        </ListBox>

The GUI can be seen in Figure 1. It is important to emphasize that whenever we modify our resources, e.g. we replace panda.png or make the ImageBrush transparent (by setting its Opacity property), the modification gets applied to every GUI elements that use the given resource.

XII.1. Using brushes as resources



[1] There exists a DynamicResource as well, however we are not giving details here.