Aligning Ribbon Controls

Hi,

I have what seems like a very simple question but I haven't been able to find a good answer.
I'm building an application in WPF which uses Microsoft's Ribbon controls (defined in the System.Windows.Controls.Ribbon namespace). In quite a few places I have multiple 'RibbonComboBox'-es or 'RibbonTextBox'-es stacked one on top of the other inside a RibbonGroup. But they don't look very nice because they don't align with each other. Like show below:
 107854.jpgNotice how because the label lengths are different, the start and end points of the controls don't align and it just doesn't look very nice. I'm trying to make it so that either both the start and end of the controls align or at last just the ends align.
I took that above image from another article where someone had the same problem:
Article Here
The answer given there is the only one I've been able to find: making a Grid with two columns and putting a TextBlock in one column and the ribbon control in the other. It does work, but it requires quite a bit of extra code and I wan't to know if there is an easier way to do it.
Note that I am using the official ribbon control from Microsoft, not a third-party one. Is there any other way to fix this problem?
BROOKLYN1950Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Snarf0001Commented:
If you can handle specifying the width manually, you can do this with a style override.  The actual label that renders is a "RibbonTwoLineText" element, so you can set the width and alignment on that in any of the containing elements to flow through.


<Ribbon>
    <RibbonTab Header="Test">
        <RibbonGroup Header="Section">
            <RibbonGroup.Resources>
                <Style TargetType="{x:Type RibbonTwoLineText}">
                    <Setter Property="HorizontalAlignment" Value="Left" />
                    <Setter Property="Width" Value="120" />
                </Style>
            </RibbonGroup.Resources>
            <RibbonComboBox Label="ComboBox1">

            </RibbonComboBox>
            <RibbonComboBox Label="ComboBoxSelected">

            </RibbonComboBox>
        </RibbonGroup>
    </RibbonTab>
</Ribbon>

Open in new window


If you want them all to be the same for all elements in the Ribbon, then just move the style override to "Ribbon.Resources" instead of the containing RibbonGroup.

Unfortunately, if you need to have them change width dynamically (ie auto-size), then the Grid is pretty much the only way to go, since they're independent elements.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BROOKLYN1950Author Commented:
With any official, Microsoft supplied, method of aligning elements lacking, I think this is the best method there is. I can't believe I didn't think to use styles!

This got the controls to align perfectly and without two much code. Here is what I ended up doing:
                    <RibbonGroup Header="User Properties">
                        <RibbonGroup.Resources>
                            <ResourceDictionary>
                                <ResourceDictionary x:Key="AlignmentDictionary">
                                    <Style TargetType="RibbonTwoLineText">
                                        <Setter Property="HorizontalAlignment" Value="Left"/>
                                        <Setter Property="Width" Value="61"/>
                                    </Style>
                                </ResourceDictionary>
                            </ResourceDictionary>
                        </RibbonGroup.Resources>
                        
                        . . .
                        
                        <RibbonTextBox Label="First Name:" Resources="{StaticResource AlignmentDictionary}"/>
                        <RibbonTextBox Label="Last Name:" Resources="{StaticResource AlignmentDictionary}"/>
                        
                        . . .
                        
                    </RibbonGroup>

Open in new window


And I just varied the Width in the style in each of the different places where I needed the controls to align.

Thanks a lot.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.