How do I make a RadioButton's Bullet align top

Question

I have a RadioButton with two textblocks inside is.

<RadioButton>
 <StackPanel>
  <TextBlock Text="{x:Staticprop:Resources.PrimaryInstallation}"
        TextWrapping="Wrap" />
  <TextBlock Text="{x:Staticprop:Resources.PrimaryInstallationDescription}"
        TextWrapping="Wrap"
        Foreground="DimGray" />
 </StackPanel>
</RadioButton>

Now the RadioButtons' buttet is aligned in the center of the text, but I want it to the top, VerticalAlignment top etc does not work, how do I do this

note: I want the whole text to be aligned with the radiobuttons text and trigger the radiobutton to be checked so thats why I placed it inside it

Answer 1

Hello Vincent,

You can assign some top Margin value to your first TextBlock in the stack panel.

Please have a look at code snippet below. You can set the margin value as per your requirement.

<

 

RadioButton >

 

 

<StackPanel >

 

 

<TextBlock Text="123" Margin="0,10,0,0"

 

TextWrapping="Wrap" />

 

 

<TextBlock Text="456"

 

TextWrapping="Wrap"

 

Foreground="DimGray" />

 

 

</StackPanel>

 

 

</RadioButton>

Please donot forget to mark this post as an answer if it is helpful to you.

Regards,

Parth Shah

Answer 2

Hi

Please try this one

 <RadioButton>
      <StackPanel Margin="0,20,0,0">
        <TextBlock Text="ABC"
    TextWrapping="Wrap" />
        <TextBlock Text="DEF"
    TextWrapping="Wrap"
    Foreground="DimGray" />
      </StackPanel>
    </RadioButton>

I think it ll solve your problem, if not then please let me know.

Regards

Zee

Answer 3

Try to use this style

<Style x:Key="RadioButtonStyle1" TargetType="{x:Type RadioButton}">
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
			<Setter Property="Background" Value="#F4F4F4"/>
			<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type RadioButton}">
						
						<BulletDecorator Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center">
							
							<BulletDecorator.Bullet>
								<DockPanel>
								<Microsoft_Windows_Themes:BulletChrome DockPanel.Dock="Top" Width="12" BorderBrush="{TemplateBinding BorderBrush}" VerticalAlignment="Bottom" Background="{TemplateBinding Background}" IsChecked="{TemplateBinding IsChecked}" IsRound="true" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
								<ContentPresenter Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="Right"/>
								</DockPanel>
							</BulletDecorator.Bullet>
							
							
						</BulletDecorator>
						
						<ControlTemplate.Triggers>
							<Trigger Property="HasContent" Value="true">
								<Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
								<Setter Property="Padding" Value="4,0,0,0"/>
							</Trigger>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

 

<RadioButton Style="{DynamicResource RadioButtonStyle1}" >
 <StackPanel>
 <TextBlock Text="abcdgdgdgdgd"
  TextWrapping="Wrap" VerticalAlignment="Top" />
 <TextBlock Text="aseeefedfdrr"
  TextWrapping="Wrap"
  Foreground="DimGray" Height="20.96" Width="78.303" />
 </StackPanel>
</RadioButton>

Correct me if i misunderstood ur requirement

Answer 4

Wow this is realy a messy way to get to your goal, but it works, thanks!

Answer 5

Rao,

Thanks for the answer.  I was a little bit of a newbie when overriding the default template style of a standard control and didn't at first understand your answer.

I finally got help from a developer more experienced Expression Blend who helped me understand your answer.

I wrote a post that is very newbie friendly so the next newbie who finds your answer can get the newbie help I needed to understand this.
How to configure the WPF RadioButton’s circle bullet top aligned when there are multiple lines of text?

Thanks,

Jared