Style Content via Setters v ContentTemplate

Question

xaml for the first style works the way I want, creating a button with the Wingding glyph, using setters to place the content and its properties. The second version of this style tries to do the same, but with a DataTemplate for Content, but it just displays the DataTemplate type (i.e. System.Windows.DataTemplate).

• Why does the second version not display the same content as the first?
• Assuming the fix is ​​trivial, can one version of the style be preferred over another for any reason other than personal preference?

NOTE. I show the bindings and triggers in case there is something there that affects the content, but this is only the first part of the style that changes

Cheers
Berryl

Style 1

Displays:

<Style x:Key="EditCommandButtonStyle" TargetType="{x:Type Button}" > <Setter Property="Content" Value="a" /> <Setter Property="Foreground" Value="Navy" /> <Setter Property="FontFamily" Value="Wingdings 3" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="FontSize" Value="18" /> <Setter Property="Width" Value="30" /> <Setter Property="Height" Value="Auto" /> <!--What makes it an Edit button--> <Setter Property="Command" Value="{Binding ActivateThisSatelliteVmCommand}"/> <Setter Property="ToolTip"> <Setter.Value> <TextBlock> <TextBlock.Text> <Binding Path="HeaderLabel" StringFormat="{resx:Resx ResxName=Smack.Core.Presentation.Resources.MasterDetail, Key=Item_Edit_Label}"/> </TextBlock.Text> </TextBlock> </Setter.Value> </Setter> <!-- WHen its available --> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border x:Name="theBorder" CornerRadius="4"> <ContentPresenter x:Name="theContent" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="False"> <Setter TargetName="theContent" Property="Visibility" Value="Hidden"/> <Setter TargetName="theBorder" Property="Background" Value="Transparent"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="theContent" Property="Visibility" Value="Visible"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="theContent" Property="Visibility" Value="Visible"/> <Setter TargetName="theBorder" Property="Background" Value="Orange"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> 

Style 2

Displays "System.Windows.DataTemplate"

 <Style x:Key="EditCommandButtonStyle" TargetType="{x:Type Button}" > <Setter Property="Content"> <Setter.Value> <DataTemplate> <TextBlock Text="a" FontFamily="Wingdings 3" FontWeight="Bold" FontSize="18" Foreground="Navy" /> </DataTemplate> </Setter.Value> </Setter> <!--What makes it an Edit button--> <Setter Property="Command" Value="{Binding ActivateThisSatelliteVmCommand}"/> <Setter Property="ToolTip"> <Setter.Value> <TextBlock> <TextBlock.Text> <Binding Path="HeaderLabel" StringFormat="{resx:Resx ResxName=Core.Presentation.Resources.MasterDetail, Key=Item_Edit_Label}"/> </TextBlock.Text> </TextBlock> </Setter.Value> </Setter> <!-- When its available --> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border x:Name="theBorder" CornerRadius="4"> <ContentPresenter x:Name="theContent" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="False"> <Setter TargetName="theContent" Property="Visibility" Value="Hidden"/> <Setter TargetName="theBorder" Property="Background" Value="Transparent"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="theContent" Property="Visibility" Value="Visible"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="theContent" Property="Visibility" Value="Visible"/> <Setter TargetName="theBorder" Property="Background" Value="Orange"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> 

Answer 1

Property Content is set DataTemplate

DataTemplates are intended for use with Template properties, and are not directly inserted into VisualTree using the Content property

Modify your Style Setter to set ContentTemplate instead of Content and it should work fine

 <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <TextBlock Text="a" FontFamily="Wingdings 3" FontWeight="Bold" FontSize="18" Foreground="Navy" /> </DataTemplate> </Setter.Value> </Setter> 

As for your second question, I prefer the first because it is simpler and I think that it may contain fewer elements in the visual tree (I would have to double check this)