RibbonGroup Header on Top

Question

I am trying to figure out how to implement the "Better" example of what is shown here:

Specifically what is used for "Indent" and "Spacing" headings. I assume its just a RibbonGroup header with the header on top but I can't figure out how to do that. Ideas?

Answer 1

It's just a TextBlock.

That appears to be directly from the WPF Source and Samples.

You'll find the following in UserControlWord.xaml which I think is the exact code that produces the entire Paragraph RibbonGroup in your Better: example. For non generic RibbonButtons and such... they usually just make their own grid of normal controls in the examples.

<ribbon:RibbonGroup Header="Paragraph" KeyTip="ZG">
    <ribbon:RibbonGroup.Resources>
        <!-- Vertical Separator-->                        
        <Style TargetType="{x:Type ribbon:RibbonSeparator}" x:Key="RibbonSeparatorStyleKey">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <RotateTransform Angle="90"/>                                                                            
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Image -->
        <Style TargetType="{x:Type Image}" x:Key="ImageStyle16Key">
            <Setter Property="Width" Value="16"/>
            <Setter Property="Height" Value="16"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="1"/>
            <Setter Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor"/>
        </Style>                                                         
    </ribbon:RibbonGroup.Resources>
    <ribbon:RibbonGroup.GroupSizeDefinitions>
        <ribbon:RibbonGroupTemplateSizeDefinition>                            
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <!-- Indent -->
                    <TextBlock Grid.Row="0" Grid.Column="0" Text="Indent" HorizontalAlignment="Left"/>
                    <Grid Grid.Row="1" Grid.Column="0" Name="LeftIndentGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="35"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="Images\DecreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
                        <TextBlock Grid.Column="1" Text="Left:" HorizontalAlignment="Left" TextAlignment="Left" Margin="3,0,0,0"/>
                        <ribbon:RibbonTextBox Grid.Column="2"  KeyTip="IL"/>
                    </Grid>
                    <Grid Grid.Row="2" Grid.Column="0" Name="RightIndentGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="35"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="Images\IncreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
                        <TextBlock Grid.Column="1" Text="Right:" HorizontalAlignment="Left" TextAlignment="Left" Margin="3,0,0,0"/>
                        <ribbon:RibbonTextBox Grid.Column="2"  KeyTip="IR"/>
                    </Grid>

                    <!-- Separator -->
                    <ribbon:RibbonSeparator Grid.RowSpan="3" Grid.Column="1" Margin="1,5,5,0" Style="{StaticResource RibbonSeparatorStyleKey}"/>

                <!-- Spacing -->
                    <TextBlock Grid.Row="0" Grid.Column="2" Text="Spacing" HorizontalAlignment="Left"/>
                    <Grid Grid.Row="1" Grid.Column="2" Name="BeforeSpacingGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="40"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>                                            
                        <Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
                        <TextBlock Grid.Column="1" Text="Before:" TextAlignment="Left" HorizontalAlignment="Left" Margin="3,0,0,0"/>
                        <ribbon:RibbonTextBox Grid.Column="2"  KeyTip="SB"/>
                    </Grid>
                    <Grid Grid.Row="2" Grid.Column="2" Name="AfterSpacingGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="40"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
                        <TextBlock Grid.Column="1" Text="After:" TextAlignment="Left" HorizontalAlignment="Left" Margin="3,0,0,0"/>
                        <ribbon:RibbonTextBox Grid.Column="2"  KeyTip="SA"/>
                    </Grid>
                </Grid>
            </DataTemplate>                            
        </ribbon:RibbonGroupTemplateSizeDefinition>
        <ribbon:RibbonGroupTemplateSizeDefinition>                            
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <!-- Indent -->
                    <TextBlock Grid.Row="0" Grid.Column="0" Text="Indent" HorizontalAlignment="Left"/>
                    <Grid Grid.Row="1" Grid.Column="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="Images\DecreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
                        <ribbon:RibbonTextBox Grid.Column="2"  KeyTip="IL"/>
                    </Grid>
                    <Grid Grid.Row="2" Grid.Column="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="Images\IncreaseIndent_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
                        <ribbon:RibbonTextBox Grid.Column="2"  KeyTip="IR"/>
                    </Grid>

                    <!-- Separator-->
                    <ribbon:RibbonSeparator Grid.RowSpan="3" Grid.Column="1" Margin="1,5,5,0" Style="{StaticResource RibbonSeparatorStyleKey}"/>

                    <!-- Spacing-->
                    <TextBlock Grid.Row="0" Grid.Column="2" Text="Spacing" HorizontalAlignment="Left"/>
                    <Grid Grid.Row="1" Grid.Column="2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
                        <ribbon:RibbonTextBox Grid.Column="2" KeyTip="SB"/>
                    </Grid>
                    <Grid Grid.Row="2" Grid.Column="2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="Images\LineSpacing_16X16.png" Style="{StaticResource ImageStyle16Key}"/>
                        <ribbon:RibbonTextBox Grid.Column="2" KeyTip="SA"/>
                    </Grid>
                </Grid>
            </DataTemplate>                            
        </ribbon:RibbonGroupTemplateSizeDefinition>
        <ribbon:RibbonGroupTemplateSizeDefinition IsCollapsed="True"/>
    </ribbon:RibbonGroup.GroupSizeDefinitions>
</ribbon:RibbonGroup>