Radiobuttons and Silverlight

Question

I have radiobutton in Silverlight 3 with FontSize=20.

Within the control the radio dialog image forced to the top alignment.

Relative to the text/content the image appears too high. This is not obvious with smaller text sizes however with the large text size the vertical alignment between the text/content and the dialog image looks ugly. Any ideas on how to vertical-align = middle both the text and the dialog image?

ty

Answer 1

It appears the best way is to use something like Padding="5,-7,0,0"

Answer 2

The image inside the RadioButton consists of several Ellipse elements grouped into a Grid element. If you take a look at the RadioButton template (use Expression Blend to edit a copy of the existing template) you will see that the Grid elements VerticalAlignment is set to Top.

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

The ContentPresenters (where your text is displayed) VerticalAlignment is set to the value you set in the VerticalContentAlignment property.

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

To fix your problem you need to set the VerticalAlignment of the Grid element to Middle or use TemplateBinding to set it to the VerticalContentAlignment value.

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

OR

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