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

silverlight, xaml

Solution

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.

Problem

Original source