Làm cách nào để căn chỉnh văn bản sao cho văn bản nằm ở giữa nút trong Silverlight?

Question

Đây là mã hiện tại tôi đang sử dụng:

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

Các tác phẩm xếp thẳng ngang nhưng VerticalAlignment không làm gì cả. Cảm ơn bạn đã giúp đỡ.

Answer 1

Vấn đề là bằng cách chỉ định chuỗi cho số Content của đèn nền ContentPresenter cần tạo biểu mẫu TextBlock để hiển thị chuỗi. Vị trí của số này TextBlock không được căn giữa trong không gian dọc được cung cấp bởi ContentPresenter. Sửa đổi nút như sau: -

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

sẽ khắc phục. Tuy nhiên bạn có thể chỉ muốn có thể xác định một chuỗi nội dung đơn giản và đặt nó ở giữa. Trong trường hợp đó bạn có thể chỉnh sửa mẫu của bạn: -

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

Bằng cách đặt các ContentPresenter trong một StackPanel các ContentPresenter sẽ lấy chiều cao minumum cần thiết để hiển thị nội dung của nó. Lần lượt, StackPanel chỉ có chiều cao của nội dung và sau đó nó được căn giữa trong số Border.

Nếu tôi được xây dựng này, đây là những gì nó sẽ giống như sau: -

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

Đây là một cách tiếp cận tổng quát hơn để nút. Tất nhiên nó tốt để sử dụng các mẫu mô tả đơn giản hơn khi phong cách đang được sử dụng cho một mục đích địa phương rất cụ thể.

Answer 2

Những gì tôi đang sử dụng có thể giúp bạn trong sự nghiệp của bạn:

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