Silverlight: Centering a RadioButton

Posted Fri, Jan 15 2010 11:17 by Deborah Kurata

Depending on how you code the XAML for a RadioButton in Silverlight, you may not be able to get it to center. If you have simple RadioButton text, this issue is not noticeable. But if you include controls like a NumericUpDown as part of the RadioButton, it is very noticeable. I would assume that this is a bug in the RadioButton control.

Here is an example:

image

In this example, the second bullet point is shown twice. In the first case, the radio button is not centered with the other text. In the second case it is.

In XAML:

<StackPanel Orientation="Vertical" Margin="5">
    <TextBlock
        HorizontalAlignment="Left" VerticalAlignment="Center"
        Text="When is this process allowed?"/>
    <RadioButton Margin="20,0,0,0"
        Content="Always"  IsChecked="True"/>

    <RadioButton Margin="20,0,0,0" VerticalAlignment="Center">
        <RadioButton.Content>
            <StackPanel Orientation="Horizontal">
                <TextBlock VerticalAlignment="Center"
                    Text="Only during the first"/>
                <inputToolkit:NumericUpDown 
                    Width="40" HorizontalAlignment="Left"
                    VerticalAlignment="Center" Margin="4,2,4,2"
                    Value="15" />
                <TextBlock VerticalAlignment="Center"
                    Text="days"/>
            </StackPanel>
        </RadioButton.Content>
    </RadioButton>

    <StackPanel Orientation="Horizontal" Margin="20,0,0,0" >
        <RadioButton VerticalAlignment="Center"
            Content="Only during the first"/>
        <inputToolkit:NumericUpDown 
            Width="40" HorizontalAlignment="Left"
            VerticalAlignment="Center" Margin="4,2,4,2"
            Value="15" />
        <TextBlock VerticalAlignment="Center"
            Text="days"/>
    </StackPanel>
</StackPanel>

In the first case, the code uses RadioButton.Content to place a StackPanel with TextBlock, NumericUpDown, and TextBlock controls within the RadioButton. This way of coding the RadioButton prevents it from being centered.

In the second case, the code uses a StackPanel with a RadioButton, NumericUpDown, and TextBlock within it. In this case, the RadioButton is correctly centered.

Keep this in mind when using RadioButtons with more than simple text.

Enjoy!

Filed under: , , , ,

Comments

# Useful Links 479

Sunday, March 04, 2012 10:38 PM by youngmoony

Useful Links 479

Leave a Comment

(required) 
(required) 
(optional)
(required) 
If you can't read this number refresh your screen
Enter the numbers above: