Comment aligner le texte pour qu'il se trouve au milieu d'un bouton dans Silverlight?

Question

Voici le code actuel J'utilise:

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

Les travaux horizontaux mais l'alignement VerticalAlignment ne fait rien. Merci de votre aide.

Answer 1

Le problème est qu'en affectant une chaîne au Content du ContentPresenter Silverlight doit créer un formulaire de TextBlock pour présenter la chaîne. C'est la position de ce TextBlock qui n'est pas centrée dans l'espace vertical fourni par le ContentPresenter. Modifier le bouton comme ceci: -

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

le corrigerait. Cependant, vous voudrez peut-être simplement spécifier une chaîne de caractères simple et la centrer. Dans ce cas, vous pouvez modifier votre modèle: -

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

En plaçant le ContentPresenter dans un StackPanel la ContentPresenter prendra la hauteur minumum nécessaire pour afficher son contenu. Le StackPanel à son tour seulement a la hauteur de son contenu, puis il est centré dans le Border.

Si je devais construire cela, voici ce qu'elle ressemblerait à ceci: -

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

Ceci est une approche plus générale sur le bouton. Bien sûr, il est bon d'utiliser les modèles les plus simples et plus complexes lorsque le style est utilisé à des fins locales très spécifiques.

Answer 2

Ce que je me sers peut vous aider dans votre cause:

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