Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

Styles

Styles

There is much room for improving the design of the application above. For instance, it would be nice to apply bigger font size or, perhaps, some coloring to the TextBlocks, and, furthermore, the increase their left margin. Therefore, we are defining a style, which will be referenced from each TextBlock. As can been seen in the source code below, a style (Style) can be defined as a resource. One of its important attributes is called TargetType, which specifies a class (TextBlock in the example) to which the given style can be applied. In the body of a Style one is allowed to give a list of Setters, each of which can be used to specify a concrete value for one of the properties of the class referenced by TargetType.

<Window.Resources>

        ...

        <Style TargetType="TextBlock" x:Key="fancyStyle">

                <Setter Property="FontSize" Value="28"/>

                <Setter Property="FontWeight" Value="Bold"/>

                <Setter Property="VerticalAlignment" Value="Center"/>

                <Setter Property="Margin" Value="40,0,0,0"/>

                <Setter Property="Foreground">

                        <Setter.Value>

                                <LinearGradientBrush>

                                        <GradientStop Offset="0.2" Color="#FFA4002D"/>

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

                                        <GradientStop Offset="0.8" Color="#FFA4002D"/>

                                </LinearGradientBrush>

                        </Setter.Value>

                </Setter>

        </Style>

</Window.Resources>

<ListBox Background="{StaticResource ResourceKey=pandaBrush}">

        <StackPanel Orientation="Horizontal">

                <Image Source="giant_panda.jpg"/>

                <TextBlock Text="Giant panda" Style="{StaticResource fancyStyle}/>

        </StackPanel>

        <StackPanel Orientation="Horizontal">

                <Image Source="red_panda.jpg"/>

                <TextBlock Text="Red panda" Style="{StaticResource fancyStyle}/>

        </StackPanel>

</ListBox>

As can be seen, Setter.Value can be either some simple value (e.g., number, text) or some compound one, i.e. an instance of a class, just like the LinearGradientBrush in the example.

If a style does not have an x:Key specified, then it becomes the default style for the type given in TargetType. We could modify the source code above for the sake of example. Let us assign a default style (using a DropShadowBitmapEffect, c.f. Section IX.) to the StackPanel type:

<Style TargetType="TextBlock">

        ...

</Style>

<Style TargetType="StackPanel">

        <Setter Property="VerticalAlignment" Value="Center"/>

        <Setter Property="Margin" Value="40,20,0,0"/>

        <Setter Property="BitmapEffect">

                <Setter.Value>

                        <DropShadowBitmapEffect/>

                </Setter.Value>

        </Setter>

</Style>

...

<StackPanel Orientation="Horizontal">

        <Image Source="giant_panda.jpg"/>

        <TextBlock Text="Giant panda"/>

</StackPanel>

<StackPanel Orientation="Horizontal">

        <Image Source="red_panda.jpg"/>

        <TextBlock Text="Red panda"/>

</StackPanel>

As a result, we get a form similar to the following one:

XII.2. Using styles

Regarding styles, two more facts are still worth to mention. One of them is that styles can be inherited from each other by the use of the Style.BasedOn property. By doing so, one can construct an inheritance tree of styles, in which each style inherits all the Setters of all its ascendants, and it is even able to overwrite them.

The other important thing is the possibility of assigning event handlers to styles. By doing so, styles are able to specify not only outlook, but also behavior. Style.EventSetter is a special setter, which assigns an event handler specified by its Handler property to an event given by its Event property. Let us modify the above example in order to execute event handlers whenever the mouse pointer is dragged over a StackPanel:

<Style TargetType="StackPanel">

        ...

        <EventSetter Event="MouseEnter" Handler="StackPanel_MouseEnter"/>

        <EventSetter Event="MouseLeave" Handler="StackPanel_MouseLeave"/>

</Style>

Let the StackPanel_MouseEnter event handler rotate the given StackPanel by 5 degrees (by using transformations introduced in Section Hiba! A hivatkozási forrás nem található.), and StackPanel_MouseLeave set them back to their original position (by removing the transformation)! All of these can be implemented in C# as follows:

private void StackPanel_MouseEnter(object sender, MouseEventArgs e)

{

        StackPanel s = sender as StackPanel;

        s.RenderTransform = new RotateTransform(5);

        }

private void StackPanel_MouseLeave(object sender, MouseEventArgs e)

{

        StackPanel s = sender as StackPanel;

        s.RenderTransform = null;

}