Vielen WPF Entwicklern ist das Stichwort TemplateBinding ein Begriff. In meinem Blogeintrag möchte ich heute einfach mal zeigen wie TemplateBinding mit Expression Blend möglich ist. Wieder einmal ist das Controlopfer ein Button :-).

 

1.) Neues Button Control aufrufen

Databinding_S1_Bild1

Databinding_S1_Bild3Databinding_S1_Bild2

 

2.) Der nächste Schrit ist die Erstellung eines neuen Button ControlTemplates. Ein rechter MouseKlick auf das Button Control Template öffnet ein Kontextmenu: Steuerelement bearbeiten(Vorlage) => Leere Vorlage erstellen

Databinding_S2_Bild1

 

Databinding_S2_Bild2

3.) Gestaltung eines neuen ButtonControls

Databinding_S2_BildDesign

Für den Button benötigen wir folgende Elemente

  • Grid
  • 2 Rechtecke
  • Textblock

Databinding_S3_Bild1

Einstellungen für das Grid

Databinding_S3_Bild2

Einstellungen für das erste Rechteck

Databinding_S3_Bild3 Databinding_S3_Bild4

 

Einstellungen für das zweite Rechteck

Databinding_S3_Bild5 Databinding_S3_Bild6

 

Einstellungen für den TextBlock

Databinding_S3_Bild7 Databinding_S3_Bild8

 

Man könnte natürlich auch einen Contentpresenter anstatt einer Textbox verwenden. Hier wurde jetzt ein Textblock verwendet um in dem Template die Schriftgröße anzugeben. Das wäre mit einem Contentpresenter in dem Template nicht möglich. Wenn das Template für weitere Buttons verwenden werden soll, besteht jedoch folgendes Problem! Der Content des Buttons kann nicht angepasst werden!

Databinding_S3_Bild9

 

4.) Anlage einer neuen Objektdatenquelle in dem Projektpanel => Daten => CLR-Objekt

Databinding_S4_Bild1

Databinding_S4_Bild2

Databinding_S4_Bild3

 

5.) TemplateBinding an der Textboxeigenschaft in dem Buttontemplate

Databinding_S5_Bild1

Databinding_S5_Bild2

 

Das ist der XAML Code nach der Vorlagenbindung:

<Window.Resources>
        <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
            <Grid>
                <Rectangle Fill="#FF000000" Stroke="#FF000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto"/>
                <Rectangle Stroke="#FF000000" HorizontalAlignment="Stretch" VerticalAlignment="Top" Width="Auto" Height="150">
                    <Rectangle.Fill>
                        <LinearGradientBrush EndPoint="0.5,0.047" StartPoint="0.5,0.933">
                            <GradientStop Color="#FF000000" Offset="0"/>
                            <GradientStop Color="#7FFFFFFF" Offset="1"/>
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" FontSize="24" Foreground="#FFFFFFFF" TextWrapping="Wrap" Text="{TemplateBinding Content}"/>
            </Grid>
        </ControlTemplate>
        <ObjectDataProvider x:Key="ButtonDS" d:IsDataSource="True" ObjectType="{x:Type Button}"/>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <Button HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Content="Hallo Blogbesucher" Template="{DynamicResource ButtonControlTemplate1}"/>
    </Grid>

Databinding_S6_Bild1

Ergebnis

Databinding_S6_Bild3