Question

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).

1. Why won’t the 2nd version display the same content as the 1st?
2. 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>

Answer 1

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)