Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

January 15, 2010

Silverlight: Centering a RadioButton

Filed under: C#,Silverlight,VB.NET @ 1:17 pm

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!

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2019 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs