Question

我想弄清楚如何实现此处显示的“更好”示例： enter image description here

具体用于“缩进”和“间距”标题的内容。我假设它只是一个带有标题的RibbonGroup标题，但我无法弄清楚如何做到这一点。想法？

Answer 1

这只是一个TextBlock。

你会在UserControlWord.xaml中找到以下内容，我认为这是在 Better：示例中生成整个Paragraph 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>

RibbonGroup标题在顶部

1 个答案: