Style content via setters v ContentTemplate

data-binding, mvvm, styles, wpf, xaml

Solution

Your `Content` property is set to a `DataTemplate`

`DataTemplates` are meant to be used with `Template` properties, and not directly inserted into the VisualTree via the `Content` property

Change your Style Setter to set the `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 its simpler, and I think it may contain fewer elements in the Visual Tree (I'd have to double-check that)

Problem

The xaml for the first style works as I want, producing a button with a Wingding glyph using setters to lay out the content and it's properties. The second version of this style is trying to do the same thing but with a DataTemplate for the Content, but it just displays the type of a DataTemplate (ie, System.Windows.DataTemplate). - Why won't the 2nd version display the same content as the 1st? - Assuming the fix is trivial, would one version of the style be preferable over the other for any reason beyond personal preference? NOTE: I am showing the bindings and triggers in case there is something in there that is affecting the content, but it's only the the first part of the style that varies 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> ```

Original source