单选按钮和 Silverlight答案

【问题标题】：Radiobuttons and Silverlight单选按钮和 Silverlight
【发布时间】：2009-12-30 14:00:03
【问题描述】：

我在 Silverlight 3 中有单选按钮，FontSize=20。

在控件内，单选对话框图像强制顶部对齐。

相对于文本/内容，图像显得太高。这对于较小的文本尺寸并不明显，但是对于较大的文本尺寸，文本/内容和对话框图像之间的垂直对齐看起来很难看。关于如何将文本和对话框图像垂直对齐 = 中间的任何想法？

【问题讨论】：

【解决方案1】：

RadioButton 内的图像由多个 Ellipse 元素组成，这些 Ellipse 元素组合成一个 Grid 元素。如果您查看 RadioButton 模板（使用 Expression Blend 编辑现有模板的副本），您将看到 Grid 元素 VerticalAlignment 设置为 Top。

<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
  <Ellipse x:Name="Background" Fill="#FFFFFFFF" 
    Stroke="{TemplateBinding BorderBrush}" 
    StrokeThickness="{TemplateBinding BorderThickness}" 
    Height="14" Margin="1" Width="14"/>
  ...

ContentPresenters（显示文本的位置）VerticalAlignment 设置为您在 VerticalContentAlignment 属性中设置的值。

<ContentPresenter x:Name="contentPresenter" 
  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
  Margin="{TemplateBinding Padding}" 
  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
  Grid.Column="1" Content="{TemplateBinding Content}" 
  ContentTemplate="{TemplateBinding ContentTemplate}"/>

要解决您的问题，您需要将 Grid 元素的 VerticalAlignment 设置为 Middle 或使用 TemplateBinding 将其设置为 VerticalContentAlignment 值。

<Grid HorizontalAlignment="Left" 
  VerticalAlignment="Middle">

或

<Grid HorizontalAlignment="Left" 
  VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

【讨论】：

【解决方案2】：

看来最好的方法是使用像 Padding="5,-7,0,0" 之类的东西

【讨论】：