¿Cómo se alinea el texto para que esté en el medio de un botón en Silverlight?

Question

Aquí está el código que estoy utilizando actual:

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

Los trabajos de alineación horizontal, pero el VerticalAlignment no hace nada. Gracias por tu ayuda.

Answer 1

El problema es que asignando una cadena al Content del ContentPresenter Silverlight necesita crear un formulario de TextBlock para presentar la cadena. Es la posición de este TextBlock que no está centrada en el espacio vertical proporcionado por el ContentPresenter. Modificar el botón de esta manera: -

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

lo arreglaría. Sin embargo, es posible que desee poder especificar un Contenido simple de cadena y tenerlo centrado. En ese caso podría modificar su plantilla: -

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

Al colocar el ContentPresenter en un StackPanel la ContentPresenter se llevará a la altura estancia mínima necesaria para mostrar su contenido. El StackPanel a su vez solo tiene la altura de su contenido y luego se centra en el Border.

Si estuviera construyendo esto, esto es lo que se vería así: -

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

Este es un enfoque más general para el botón. Por supuesto, está bien utilizar las plantillas más persistentes y más simples cuando el estilo se utiliza para fines locales muy específicos.

Answer 2

lo que estoy usando que podría ayudarle en su causa:

<Button Content="A" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>