RibbonGroup Header on Top - wpf

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>