顶部的功能区组标题

Question

我试图弄清楚如何实现此处所示的“更好”示例：

具体用于“缩进”和“间距”标题。我假设它只是一个 RibbonGroup 标头，标头位于顶部，但我不知道如何做到这一点。有想法吗？

Answer 1

它只是一个TextBlock。

这似乎直接来自 WPF 源代码和示例。

您将在 UserControlWord.xaml 中找到以下内容，我认为这是在您的 Better: 示例中生成整个段落 RibbonGroup 的确切代码。对于非通用的 RibbonButtons 等...它们通常只是在示例中制作自己的普通控件网格。

<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>