How to align controls such as ToggleButton, Spinner with text

[TruePluto]

I have some controls such as ToggleButton, Spinner with text and icon, but they don't align well because the texts' length are different.. I know Grid have a property called IsSharedSizeScope, do they have some kind of this property.

[batzen]

Could you provide a screenshot showing your issue?

[TruePluto]

It's hard to figure out how to post a image. but now it's ok
Actually I want the textboxes of CATMULLLROOM and POINT to align. and the textblocks of interpolation and sample type are right alignment.
Thanks for your response.

[batzen]

Now i get it.
Will have a look at how to enable such a feature.

[batzen]

I found a solution for this issue.
The general idea is that you'd have to set Grid.IsSharedSizeScope="True" for each RibbonGroupBox that should size headers of controls like Spinner and ComboBox equally.

@TruePluto If you place Spinner and ComboBox in on top of each other, should their header sizes be equal?

[TruePluto]

Sorry ,I can't understand the meaning of "in on top of each other"
Actually ,my code like this:

            <f:RibbonGroupBox Header="Sample"
                              Grid.IsSharedSizeScope="True">
                <f:ComboBox Header="Interpolation Type"
                            ItemsSource="{Binding Source={StaticResource InterpolationType}}"
                            SelectedValue="{x:Static l:Tiff16BitMetaData.DefaultInterpolationType}" />
                <f:ComboBox Header="Sample Type"
                            ItemsSource="{Binding Source={StaticResource SampleType}}"
                            SelectedValue="{Binding Source={x:Static l:TiffDocumentViewModelOptions.Options}, Path=DefaultSampleType}" />
            </f:RibbonGroupBox>

or

            <f:RibbonGroupBox Header="Sample"
                              Grid.IsSharedSizeScope="True">
                <f:ComboBox Header="Interpolation Type"
                            Grid.IsSharedSizeScope="True"
                            ItemsSource="{Binding Source={StaticResource InterpolationType}}"
                            SelectedValue="{x:Static l:Tiff16BitMetaData.DefaultInterpolationType}" />
                <f:ComboBox Header="Sample Type"
                            Grid.IsSharedSizeScope="True"
                            ItemsSource="{Binding Source={StaticResource SampleType}}"
                            SelectedValue="{Binding Source={x:Static l:TiffDocumentViewModelOptions.Options}, Path=DefaultSampleType}" />
            </f:RibbonGroupBox>

I removed the Button AutoUpdate and It didn't work.
Thank you.

[batzen]

It currently doesn't work because the code is only on my machine right now.
The first code sample you posted would be the correct one.

Will write some unit tests for the new feature and then push my changes later today so you can try it out.

[TruePluto]

Will It be featured next version ? that's woundful. thank you.

[batzen]

The feature will be in version 6, which is the next one.

One thing i did not understand is how you would like to align ToggleButton in this context.
Could you explain that a bit more?

[TruePluto]

I put the toggleButton because it is a bool value and with the two comboBox have a same datacontext, I set the datacontext to the RibbonGroupBox.
I hope it seems like the following picture.

Maybe these icos can move to left.
and thanks for your attention.

[batzen]

Ok. The general layout for controls in the ribbon is
[Icon] [Header] {[Control]}

The feature i am adding aligns controls that have an additional control to the right. These controls are Spinner and ComboBox.

Something like the control displaying the status in your screenshot is not part of this library.

To get exactly what you want you can, instead of adding the controls separately, just add a Grid to the RibbonGroupBox and layout the controls you add to it excatly in the way you want them. The only things you loose by doing so are things like automatic resizing.

[TruePluto]

I would like to make the ToggleButton out of the column. I just hope the fluent:control with ICON header control such as f:textbox f:combobox f:spiner can be aligned. so I think I can get it at next version. wounderful
thanks.

[batzen]

Documentation can be found at http://fluentribbon.github.io/documentation/concepts/sizing#aligningControls