Ich habe vor einer Woche über Templatebinding mit Expression Blend geschrieben. Dieses Beispiel möchte ich heute nochmal kurz aufgreifen, aber in Verbindung mit Ressource Dictionarys. Ressource Dictionary unterstützen UI Designer bei der Teamarbeit in einem Projekt. Zum Beispiel können in Ressource Dictionarys Farben abgelegt werden und entweder in einem anderen Projekt wieder verwendet werden.

Umfangreiche Software besteht oftmals aus mehreren Oberflächen und Dialogen und wird im Team gestaltet und entwickelt. Und gerade bei der Programmierung von Software ist man darum bemüht programmierte Software Komponenten wieder zu verwenden, um sich zum einen doppelte Programmierarbeit zu sparen, den Sourcecode übersichtlicher zu halten, aber auch um sicher zu stellen, dass Änderungen nur an einer Stelle vorgenommen werden müssen. Warum soll das bei der Gesaltung von Oberflächendesign nicht genauso sein und dabei unterstützen Ressource Dictionarys den UI Designer. Ich verwende hier bewusst den Plural von Ressource Dictionarys, da ich in Expression Blend bzw. auch in WPF mit mehreren Ressource Dictionarys arbeiten kann.

So nun zurück zu unserem Button Beispiel aus dem Blogeintrag How To: Template Binding mit Expression Blend. In diesem How To Beispiel wurde das Button Template direkt in der Anwendung angelegt.

Hinweis: Dieses How To basiert auf dem How To Blogein trag How To: Template Binding mit Expression Blend

Jetzt wird bei der Anlage des ButtonTemplates ein Resssource Dictionary ausgewählt bzw. in diesem Fall neu angelegt.

image

Auf den den Button "Neu..." klicken

image

Auf den Button "Ok" klicken

image

Das Template wurde nicht in der Application angelegt sondern in dem Ressource Dictionary wie das auch der XAML Code zeigt

<ResourceDictionary
    xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Hier werden Einträge für Ressourcenverzeichnisse definiert. -->
    <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}"/>
</ResourceDictionary>

Als nächsten Schritt das Design des Layouts wie in dem Blogeintrag How To: Template Binding mit Expression Blend anpassen. Der Button sollte dann so aussehen.

image

Oder folgenden XAML Code haben:

<ResourceDictionary
    xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Hier werden Einträge für Ressourcenverzeichnisse definiert. -->
    <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
        <Grid>
            <Rectangle Fill="#FF000000" Stroke="#FF000000" RadiusX="20" RadiusY="20"/>
            <Rectangle Stroke="#FF000000" RadiusX="20" RadiusY="20">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,0.02" StartPoint="0.5,0.583">
                        <GradientStop Color="#FF000000" Offset="0"/>
                        <GradientStop Color="#7FFFFFFF" Offset="1"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontSize="18" Foreground="#FFFFFFFF" Text="{TemplateBinding Content}" TextWrapping="Wrap"/>
        </Grid>
    </ControlTemplate>
</ResourceDictionary>

Das wäre für dieses Projekt erstmal alles.

Dieses Buttontemplate soll jetzt in einem anderem Projekt weiter verwendet werden. Dafür muss zuerst ein neues Projekt Blend Projekt angelegt werden oder ein bereits bestehendes Projekt auswählen.

In dem TabPanel Projekt wird als nächstes ein vorhandenes Element über den Context Menü Eintrag "Ein vorhandenes Element hinzufügen..." hinzugefügt. Dafür mit der rechten Maustaste auf das Projekt klicken.

image

Anschließend zu dem angelegten Ressource Dictionary XAML File aus dem vorherigen Projekt navigieren und dieses auswählen.

image 

Jetzt sind es nur noch folgende zwei Steps:

1. Ein Button Control auf der Arbeitsfläche plazieren

image

2. Rechter Mausklick auf das Button Control über das Context Menü den Eintrag das angelegte Template aus dem vorherigen Projekt auswählen.

image

Das Ergebnis sollte jetzt wie im Screenshot aussehen:

image 

Und das ist der dazugehörige XAML Code:

<Window
    xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="UntitledProject1.Window1"
    x:Name="Window"
    Title="Window1"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <Button Margin="83,71,57,74" Content="Button" Template="{DynamicResource ButtonControlTemplate1}"/>
    </Grid>
</Window>

 

Hinweis: Als das Template angelegt wurde, musste in Expression Blend eine CLR Datasource angelegt werden um das Template Binding mit Expression Blend durch zu führen. Die CLR Datenquelle muss nicht in Expression Blend angelegt werden um das Template zu verwenden!