How do I make a RadioButton's Bullet align top?

Question

I have a multiline radio button and I want the bullet to be to the left of the content (as default) aligned to the top of the radio button control. What\'s the easiest way t

Answer 1

I've built a relatively generic template based on Simon Weaver's answer that can be used in most situations without having to remember to customize your RadioButton.Content all the time.

To explain how the template works:

• The TextBlock is there because by default, the RadioButton bullet aligns with the first line of Text if the content is a Text object (a Label will not work)

• The LineBreak is to wrap the content to a new line, so the first line is created

• The InlineUIContainer is so we can place non-text content into a TextBlock

• The ContentPresenter is to hold the actual content, and it has a negative top margin to remove the space left by the LineBreak object.

Here's some example content:

    
        
            
            
                
                
            
        
    

    
        
            
            
                
                    
                    
                    
                    
                
            
        
    


    
        
            
            
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna 
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                Duis aute irure dolor in reprehenderit in voluptate velit 
                esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
                occaecat cupidatat non proident, sunt in culpa qui officia 
                deserunt mollit anim id est laborum.
            
        
    

And how it looks:

The only thing I'm really not happy about is the negative top margin for the ContentPresenter being hard-coded, because if you ever change your font size, you have to manually adjust that margin.

It probably wouldn't be that hard to build a converter for the Margin property that calculates the height of the line break ({TemplateBinding FontSize}?), or even an extended version of the RadioButton control which has this behavior by default, but for now I'm fine with hard-coding -21 based on my application's default font size.

Also, you might want to add some TemplateBindings to the RadioButton in the Template if you want to inherit other properties from the original RadioButton, such as margins, padding, alignment, etc. I only bound to IsChecked for the purpose of keeping it simple.