How do you align text so it is in the middle of a button in Silverlight?

Question

Here is the current code I am using:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonPrototype.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <ControlTemplate x:Key="CellTemplate" TargetType="Button">
            <Grid>
                <Border x:Name="CellBorderBrush" BorderBrush="Black" BorderThickness="1">
                    <ContentPresenter
                      Content="{TemplateBinding Content}"  
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"/>
                </Border>
            </Grid>
        </ControlTemplate>

        <Style x:Key="CellStyle" TargetType="Button">
            <Setter Property="Template" Value="{StaticResource CellTemplate}"></Setter>
            <Setter Property="Foreground" Value="Black"></Setter>
            <Setter Property="FontSize" Value="80"></Setter>
            <Setter Property="Width" Value="100"></Setter>
            <Setter Property="Height" Value="100"></Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="A" Style="{StaticResource CellStyle}"></Button>
    </Grid>
</UserControl>

The Horizontal aligning works but the verticalalignment doesn't do anything. Thanks for your help.

Answer 1

The problem is that by assigning string to the Content of the the ContentPresenter Silverlight needs to create a form of TextBlock to present the string. Its the position of this TextBlock which isn't centered in the vertical space provided by the ContentPresenter. Modifying the button like this:-

<Button Style="{StaticResource CellStyle}">
   <TextBlock Text="A" VertialAlignment="Center" />
</Button>

would fix it. However you might just want to be able to specifiy a simple string Content and have it centered. In that case you could modify your template:-

<Border x:Name="CellBorderBrush" BorderBrush="Black" BorderThickness="1">
    <StackPanel VerticalAlignment="Center"HorizontalAlignment="Center">
        <ContentPresenter Content="{TemplateBinding Content}" />
    </StackPanel>
</Border>

By placing the ContentPresenter in a StackPanel the ContentPresenter will take the minumum height needed to display its content. The StackPanel in turn only has the height of its content and then it is centered within the Border.

If I were building this, this is what it would look like:-

<UserControl x:Class="SilverlightApplication1.Test"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
    <UserControl.Resources>
        <ControlTemplate x:Key="CellTemplate" TargetType="Button">
            <Grid>
                <Border x:Name="CellBorderBrush"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}" />
                <ContentPresenter
                      x:Name="contentPresenter"
                      Content="{TemplateBinding Content}"
                      ContentTemplate="{TemplateBinding ContentTemplate}"
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                      Margin="{TemplateBinding Padding}"/>
            </Grid>
        </ControlTemplate>
        <Style x:Key="CellStyle" TargetType="Button">
            <Setter Property="Template" Value="{StaticResource CellTemplate}" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="FontSize" Value="80" />
            <Setter Property="Width" Value="100" />
            <Setter Property="Height" Value="100" />
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Padding" Value="1" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Style="{StaticResource CellStyle}">
            <TextBlock Text="A" VerticalAlignment="Center" />
        </Button>
    </Grid>
</UserControl>

This is a more general approach to the button. Of course its fine to use the simpler more perscriptive templates when the style is being used for a very specific local purposes.