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
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
3.) Gestaltung eines neuen ButtonControls
Für den Button benötigen wir folgende Elemente
Einstellungen für das erste Rechteck
Einstellungen für das zweite Rechteck
Einstellungen für den TextBlock
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!
4.) Anlage einer neuen Objektdatenquelle in dem Projektpanel => Daten => CLR-Objekt
5.) TemplateBinding an der Textboxeigenschaft in dem Buttontemplate
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>