Come allineare il testo in modo che si trovi nel mezzo di un pulsante in Silverlight?

Question

Ecco il codice corrente che sto usando:

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

I lavori di allineamento orizzontale, ma la VerticalAlignment non fa nulla. Grazie per l'aiuto.

Answer 1

Il problema è che assegnando una stringa al numero ContentPresenter Silverlight deve creare un modulo di TextBlock per presentare la stringa. È la posizione di questo TextBlock che non è centrato nello spazio verticale fornito dallo ContentPresenter. Modificare il pulsante in questo modo: -

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

risolvere il problema. Tuttavia, potresti voler semplicemente specificare una stringa semplice e averla centrata. In tal caso si potrebbe modificare il modello: -

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

Posizionando il ContentPresenter in un StackPanel la ContentPresenter avrà l'altezza minumum necessaria per visualizzare il contenuto. Lo StackPanel ha a sua volta solo l'altezza del suo contenuto e quindi è centrato all'interno dello Border.

Se fossi costruendo questo, questo è ciò che sarebbe simile: -

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

Questo è un approccio più generale al pulsante. Ovviamente è bello usare i modelli più semplici e perscriptive quando lo stile viene usato per scopi locali molto specifici.

Answer 2

quello che sto usando potrebbe aiutarvi nella vostra causa:

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