WP8 – Erstellen von statischen Resourcen – Auslagern von Styles in eigenes Stylesheet

Hallo Leute,

XAML kann ziemlich schnell sehr unüberschaubar werden. Wie im HTML kann man Elementen/Objekten Styles mitgeben. Im HTML gibt es dafür die nützlichen CSS-Stylesheets. In Windows Phone 8 funktioniert dies etwas anders. Und zwar über die Möglichkeit von „Static Resources“.

Statische Resourcen verwendet man am einfachsten wie folgt:


<TextBlock Text="Avatar" Style="{StaticResource WIT_ControlLabel}"></TextBlock>

Nachdem man „StaticResource“ eingegeben hat, bekommt man von Visual Studio out-of-the-box ein Set an Vorlagen angeboten. Diese Liste lässt sich aber auch erweitern (Im Beispiel verwende ich einen eigenen Style, mehr dazu später), womit wir zum eigenen Stylesheet kommen. Dieses Stylesheet wird als normale XAML-Page erstellt und über die App.xaml eingebunden.

Änderungen App.xaml

<!--Application Resources-->
    <Application.Resources>
        
        <ResourceDictionary>
<em>            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles.xaml"/>
                <ResourceDictionary Source="Resources/StaticContent.xaml"/>
            </ResourceDictionary.MergedDictionaries></em>
            <app:LocalizedStrings x:Key="LocalizedStrings"/>
        </ResourceDictionary>
    </Application.Resources>

Wie man im Codebeispiel sehen kann, binde ich zwei XAML-Dateien ein. Die beiden XAML-Dateien sind nahezu ident (nur die Styles unterscheiden sich), deshalb stelle ich euch nur eine der beiden vor.

Styles.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone">

<Style x:Key="WIT_ControlLabel" TargetType="TextBlock">
        <Setter Property="Style" Value="{StaticResource PhoneTextSmallStyle}"></Setter>
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
        <Setter Property="FontSize" Value="20"></Setter>
        <Setter Property="Margin" Value="12,0,0,0"></Setter>
        <Setter Property="Foreground" Value="DarkGray"></Setter>
    </Style>
</ResourceDictionary>

Das Codebeispiel zeigt die Definition des Styles „WIT_ControlLabel“, welches ich bereits oben verwendet habe.

Cheers,
Christian

Leave a reply