Wie kann ich mein Logo in BizCardFlow einbinden?

Voraussetzungen:

Plattform
.NET Framework 3.5 SP1
Sprachen
XAML, C#
Werkzeuge
Visual C# 2008, Expression Blend 2.0 (optional), Expression Design (optional)
Zu bearbeitende Projekte
Microsoft.WPF.Samples.BizCardFlow

Einleitung:

In diesem Dokument wird aufgezeigt, wie Sie die WPF-Komponente BizCardFlow individuell gestalten können. Dabei werden wir kurz auf die grundlegenden visuellen Elemente des WPF-Steuerelements eingehen.

Einen eigenen Hintergrund für das Steuerelement definieren:

Da es sich bei BizCardFlow um ein WPF-Steuerelement handelt, können wir Eigenschaften des Steuerelements direkt ansprechen. Hierfür können Sie beispielsweise die Eigenschaft „Background“ auf die Farbe Azure stellen. Standardmäßig ist ein transparenter Hintergrund im Steuerelement definiert, so dass der Hintergrund von einem übergeordneten Element in das BizCardFlow-Element eingeblendet wird.

Gehen wir dieses Beispiel einmal am Quellcode durch.

  1. Öffnen Sie die WPFApp.sln und editieren Sie die Datei Window1.xaml. Hier wird die Referenz auf das BizCardFlow-Steuerelement gesetzt. Der Namespace custom wurde bereits im Window Tag deklariert:
  2. Ab diesem Zeitpunkt haben wir die Möglichkeit auf das Steuerelement zuzugreifen.
  3. Für das Ändern der Hintergrundfarbe können Sie die Eigenschaften des Steuerelements verändern. So zum Beispiel:

Die Visitenkarten individuell gestalten

Im ersten Beispiel konnten wir keinen Einfluss auf das Erscheinungsbild der Visitenkarten nehmen, da sich diese innerhalb des Steuerelements befinden. Um nun die Visitenkarten individuell gestalten zu können, müssen wir innerhalb der WPFApp.sln die Ressourcen für das Front- und BackTemplate der Visitenkarte bearbeiten. Das Erscheinungsbild jeder Visitenkarte und deren Daten werden in den Templates definiert. Wenn Sie sich also dazu entscheiden, andere Daten auf einer Visitenkarte anzuzeigen oder Sie einfach nur ein paar grafische Elemente innerhalb der Visitenkarte verändern möchten, müssen Sie lediglich das Front- bzw. Back-Template innerhalb des ResourceDictionary bearbeiten. Als Editor für diese Arbeit eignet sich Microsoft Expression Blend, weil wir hier jede Veränderung am Template sofort nachverfolgen können (What You See Is What You Get).

Zum Bearbeiten der Templates öffnen Sie innerhalb des Microsoft.WPF.Samples.BizCardFlow die Datei ResourceDictionary.xaml. Innerhalb dieser Datei sind alle visuellen Komponenten des BizCardFlow ausgelagert und können hier editiert werden. Wenn Sie nun einen Blick in das ResourceDictionary werfen, werden Sie erkennen, dass alle grafischen Elemente (ausgenommen der Bilder für jede Person) hier als XAML definiert wurden. Dafür haben wir uns der neuen Möglichkeiten der Windows Presentation Foundation bedient, um beispielsweise eine DrawingBrush oder DataTemplates für die Visitenkarten anzulegen. Diese Elemente können nun von Ihnen individuell bearbeitet und ausgetauscht werden.

Um Ihnen an einem kurzen Beispiel demonstrieren zu können, wie leicht Sie diese Elemente bearbeiten können, setzen wir uns als Aufgabe, ein eigenes Logo auf die Vorderseite einer jeden Visitenkarte zu setzen.

  1. Öffnen Sie hierfür die WPFApp.sln in Ihrem Microsoft Expression Blend oder im Visual Studio 2008.
  2. Öffnen Sie die ResourceDictionary.xaml und öffnen Sie in Microsoft Expression Blend die Registerkarte Resources.

  3. Hier finden Sie das Front- und BackTemplate für den BizCardFlow, welche Sie nun nach Ihren Bedürfnissen anpassen können.


    Abbildung 1: Bearbeiten des FrontTemplate für den BizCardFlow

  4. In unserem Beispiel werden wir eine Grafik innerhalb des FrontTemplates einfügen. Hierfür bedienen wir uns der Werkzeuge von Microsoft Expression Blend und zeichnen ein Image-Element innerhalb des FrontDataTemplate. (Siehe Abbildung 2)


    Abbildung 2: Einfügen eines Branding Image im FrontTemplate

    Hier haben Sie auch die Möglichkeit andere Elemente in das Template einzufügen und die Datenbindung der Windows Presentation Foundation auszunutzen.

WPF Fast Start