如何自定义 WPF Ribbon 4.5（样式、模板等）

Question

提问by Alexander Zwitbaum

I try to customize System.Windows.Controls.Ribbon from the .Net Framework 4.5 so it can be used with the Expression Dark theme (dark colors like in default theme of the Blend). I've tried following ideas, but until now without any progress:

我尝试从 .Net Framework 4.5 自定义 System.Windows.Controls.Ribbon，以便它可以与 Expression Dark 主题（深色，例如 Blend 的默认主题）一起使用。我尝试了以下想法，但直到现在还没有任何进展：

change the Background of the ribbon: will change only the main Color, but leaves all other glossy colors, highlight colos etc.
change the styles and templates: I couldn't find any default templates for the Ribbon 4.5. I've tried to get them via Tools like ShowMeTheTemplate, but it seems that they use some internal classes.
customizing the templates with Blend for VS2012: I get always an error "Copy Template failed."
use the .net 4 ribbon from the RibbonControlLibrary: the RibbonWindow Looks ugly in the Windows 8 (see WPF RibbonWindow + Windows 8 - control box looks bad), that I can't solve

更改功能区的背景：将仅更改主颜色，但保留所有其他光泽颜色、高光颜色等。
更改样式和模板：我找不到 Ribbon 4.5 的任何默认模板。我尝试通过 ShowMeTheTemplate 之类的工具获取它们，但它们似乎使用了一些内部类。
使用 Blend for VS2012 自定义模板：我总是收到错误“复制模板失败”。
使用 RibbonControlLibrary 中的 .net 4 功能区：RibbonWindow 在 Windows 8 中看起来很丑（请参阅WPF RibbonWindow + Windows 8 - 控制框看起来很糟糕），我无法解决

Any help would be appreciated, all suggestions are welcome.

任何帮助将不胜感激，欢迎所有建议。

Answer 1

回答by Andreas Kahler

I was able to extract a fully working template using Show me the templates. To do that I modified it to extract templates from "System.Windows.Controls.Ribbon" (rather than the main framework assembly).

我能够使用Show me the templates提取一个完全有效的模板。为此，我将其修改为从“System.Windows.Controls.Ribbon”（而不是主框架程序集）中提取模板。

It gives me the following:

它给了我以下内容：

https://gist.github.com/drayde/75526b570a266f5f8f38(too long to paste here)

https://gist.github.com/drayde/75526b570a266f5f8f38（太长无法粘贴在这里）

Just add this to your resources and use it like this:

只需将其添加到您的资源中并像这样使用它：

    <Ribbon Template="{StaticResource ribbonTemplate}">
       ...
    </Ribbon>

By modifying the template you should have full control over how your ribbon is displayed.

通过修改模板，您应该可以完全控制功能区的显示方式。

Answer 2

回答by Andreas Kahler

You can change a couple of colors by setting properties on the ribbon:

您可以通过在功能区上设置属性来更改几种颜色：

<ribbon:Ribbon x:Name="Ribbon"
                  Background="Khaki"
                  BorderBrush="Brown"
                  MouseOverBackground="LightCoral"
                  MouseOverBorderBrush="Coral"
                  PressedBackground="LightGreen"
                  PressedBorderBrush="Green"
                  CheckedBackground="LightBlue"
                  CheckedBorderBrush="Blue"
                  FocusedBackground="LightSlateGray"
                  FocusedBorderBrush="SlateBlue">

Not exactly a good-looking example, but shows how to do it.

不完全是一个好看的例子，但展示了如何做到这一点。

Would be interested how to do a complete re-styling as well...

也会对如何进行完整的重新造型感兴趣......

Answer 3

回答by Scott Solmer

I followed this answerto get a template from VS.
It failed in a similar fashion as OP described.
Then I patched-in the missing parts {Binding (0)}using the gist from @Andreas.

我按照这个答案从 VS 获取模板。
它以与 OP 描述的类似方式失败。
然后我{Binding (0)}使用@Andreas 的要点修补了缺失的部分。

To test, I set all the color properties to black in my view, and 50% magenta in the newly created template.

为了进行测试，我在视图中将所有颜色属性设置为黑色，并在新创建的模板中设置为 50% 洋红色。

About this time I am ready to give up on System.Controls.Windows.Ribbonand try Fluent.Ribbon...

这一次我准备放弃System.Controls.Windows.Ribbon并尝试 Fluent.Ribbon ......

Template:

模板：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic" 
                xmlns:swcrp="clr-namespace:System.Windows.Controls.Ribbon.Primitives;assembly=System.Windows.Controls.Ribbon" 
                xmlns:s="clr-namespace:System;assembly=mscorlib">

<!-- Template Colors -->

<SolidColorBrush x:Key="GroupsInnerBorderBrush" Color="#60FFFFFF"/>
<SolidColorBrush x:Key="QatTopHostBorderBrush1" Color="#66CCCCCC"/>
<SolidColorBrush x:Key="QatTopHostBorderBrush2" Color="#77222222"/>
<SolidColorBrush x:Key="QatTopHostBorderBrush3" Color="#81444444"/>
<SolidColorBrush x:Key="QatTopHostBorderBrush4" Color="#69EEEEEE"/>

<!-- #71000000 -->
<s:Byte x:Key="r">#00</s:Byte>
<s:Byte x:Key="g">#00</s:Byte>
<s:Byte x:Key="b">#00</s:Byte>
<s:Byte x:Key="a">#71</s:Byte>
<Color x:Key="DropShadowColor" R="{StaticResource r}" G="{StaticResource g}" B="{StaticResource b}" A="{StaticResource a}"/>

<LinearGradientBrush x:Key="GroupsBorderBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#EEFFFFFF" Offset="0"/>
    <GradientStop Color="#BBFFFFFF" Offset="0.1"/>
    <GradientStop Color="#05FFFFFF" Offset="0.5"/>
    <GradientStop Color="#20FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TitleBarBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#EEFFFFFF" Offset="0"/>
    <GradientStop Color="#BBFFFFFF" Offset="0.1"/>
    <GradientStop Color="#05FFFFFF" Offset="0.5"/>
    <GradientStop Color="#20FFFFFF" Offset="1"/>
</LinearGradientBrush>

<!-- Template -->

<ControlTemplate x:Key="RibbonTemplate" TargetType="{x:Type Ribbon}">
    <Grid SnapsToDevicePixels="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Border x:Name="BackgroundBorder" Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="3"
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        Background="{TemplateBinding Background}"/>
        <Border Grid.ColumnSpan="3" Grid.Row="1">
            <Popup x:Name="PART_ITEMSPRESENTERPOPUP" AllowsTransparency="True" 
                           IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" 
                           PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
                <mwt:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" RenderOptions.ClearTypeHint="Enabled" 
                                                    FocusVisualStyle="{x:Null}" Focusable="True" Margin="0,0,5,5">
                    <Border x:Name="CollapsedPopupBackgroundBorder" Background="{TemplateBinding Background}">
                        <ContentControl x:Name="popupItemsPresenterHost" KeyboardNavigation.DirectionalNavigation="Cycle" 
                                                Focusable="False" Margin="0,1,0,0" KeyboardNavigation.TabNavigation="Cycle"/>
                    </Border>
                </mwt:SystemDropShadowChrome>
            </Popup>
        </Border>
        <ContentControl x:Name="mainItemsPresenterHost" Grid.ColumnSpan="3" Focusable="False" Grid.Row="2">
            <Border x:Name="groupsBorder" BorderThickness="1,0,1,1" Height="91" SnapsToDevicePixels="True"
                            BorderBrush="{TemplateBinding BorderBrush}"  
                            Background="{StaticResource GroupsBorderBackgroundBrush}">
                <Border BorderThickness="0,0,0,1" Margin="0,0,0,1" SnapsToDevicePixels="True"
                                BorderBrush="{StaticResource GroupsInnerBorderBrush}">
                    <ItemsPresenter x:Name="ItemsPresenter"/>
                </Border>
            </Border>
        </ContentControl>
        <Border x:Name="QatBottomHost" Grid.ColumnSpan="3" Grid.Row="3" BorderBrush="{TemplateBinding BorderBrush}">
            <ContentPresenter x:Name="QatBottomHostContentPresenter" IsHitTestVisible="True"
                                      HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </Border>
        <Border x:Name="titleBarBackground" BorderThickness="0,0,0,1" Grid.ColumnSpan="3" Visibility="Collapsed"
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        Background="{StaticResource TitleBarBackgroundBrush}"/>
        <DockPanel Grid.ColumnSpan="3" Grid.Column="0" Height="22" LastChildFill="True">
            <ContentControl x:Name="windowButtonPlaceHolder" DockPanel.Dock="Right" Focusable="False" 
                                    IsHitTestVisible="False" Margin="3,0,0,0" Width="35">
                <ContentControl.Visibility>
                    <TemplateBinding Property="IsHostedInRibbonWindow">
                        <TemplateBindingExtension.Converter>
                            <BooleanToVisibilityConverter />
                        </TemplateBindingExtension.Converter>
                    </TemplateBinding>
                </ContentControl.Visibility>
            </ContentControl>
            <ContentControl x:Name="windowIconPadding" DockPanel.Dock="Left" Focusable="False" 
                                    IsHitTestVisible="False" Margin="0,0,3,0" Width="16"/>
            <swcrp:RibbonTitlePanel x:Name="PART_TitlePanel">
                <Grid x:Name="QatTopHost">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Border x:Name="QatTopHostLeftBorder" BorderBrush="{StaticResource QatTopHostBorderBrush1}" 
                                    BorderThickness="1,0,1,0.9" Background="{StaticResource QatTopHostBorderBrush2}" Grid.Column="0" 
                                    CornerRadius="0,0,2,2" Margin="8,2,0,2" Width="3"/>

                    <ContentPresenter x:Name="QatTopHostContentPresenter" Grid.Column="1" IsHitTestVisible="True"
                                              Content="{TemplateBinding QuickAccessToolBar}"/>

                    <Border x:Name="QatTopHostRightBorder" BorderBrush="{StaticResource QatTopHostBorderBrush1}" 
                                    BorderThickness="1,0,1,0.9" Background="{StaticResource QatTopHostBorderBrush2}" Grid.Column="2" 
                                    CornerRadius="0,0,2,2" Margin="0,2,1,2" Width="3"/>
                </Grid>

                <ContentPresenter x:Name="PART_TitleHost" ContentTemplate="{TemplateBinding TitleTemplate}" 
                                          Content="{TemplateBinding Title}" ContentSource="Title" 
                                          TextElement.Foreground="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}" 
                                          TextElement.FontWeight="{DynamicResource {x:Static SystemFonts.CaptionFontWeightKey}}" 
                                          TextElement.FontSize="{DynamicResource {x:Static SystemFonts.CaptionFontSizeKey}}" 
                                          TextElement.FontFamily="{DynamicResource {x:Static SystemFonts.CaptionFontFamilyKey}}" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          IsHitTestVisible="False" Margin="3,0" MinWidth="75" MinHeight="22">

                    <ContentPresenter.Resources>
                        <DataTemplate x:Key="{DataTemplateKey DataType={x:Type s:String}}" DataType="{x:Type s:String}">
                            <TextBlock x:Name="titleTextBlock" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                                               Margin="0,-2,0,0" Text="{TemplateBinding Content}" TextTrimming="CharacterEllipsis"/>
                            <DataTemplate.Triggers>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding Path=(SystemParameters.IsGlassEnabled)}" Value="True"/>
                                        <Condition Binding="{Binding IsHostedInRibbonWindow, RelativeSource={RelativeSource FindAncestor, 
                                                    AncestorLevel=1, AncestorType={x:Type Ribbon}}}" Value="True"/>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Effect" TargetName="titleTextBlock">
                                        <Setter.Value>
                                            <DropShadowEffect BlurRadius="5" Color="White" ShadowDepth="0"/>
                                        </Setter.Value>
                                    </Setter>
                                </MultiDataTrigger>
                                <DataTrigger Binding="{Binding Path=(SystemParameters.IsGlassEnabled)}" Value="False">
                                    <Setter Property="Margin" TargetName="titleTextBlock" Value="0"/>
                                    <Setter Property="VerticalAlignment" TargetName="titleTextBlock" Value="Center"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding Path=(SystemParameters.HighContrast)}" Value="True">
                                    <Setter Property="Margin" TargetName="titleTextBlock" Value="0,1,0,0"/>
                                </DataTrigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding Path=(SystemParameters.UxThemeName)}" Value="AeroLite"/>
                                        <Condition Binding="{Binding Path=(SystemParameters.IsGlassEnabled)}" Value="False"/>
                                        <Condition Binding="{Binding IsHostedInRibbonWindow, RelativeSource={RelativeSource FindAncestor, 
                                                    AncestorLevel=1, AncestorType={x:Type Ribbon}}}" Value="True"/>
                                        <Condition Binding="{Binding WindowState, RelativeSource={RelativeSource FindAncestor, 
                                                    AncestorLevel=1, AncestorType={x:Type RibbonWindow}}}" Value="Normal"/>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Margin" TargetName="titleTextBlock" Value="0,0,0,7"/>
                                </MultiDataTrigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </ContentPresenter.Resources>
                </ContentPresenter>
                <RibbonContextualTabGroupItemsControl x:Name="PART_ContextualTabGroupItemsControl" 
                                                              HorizontalAlignment="Center" IsHitTestVisible="True" 
                                                              WindowChrome.IsHitTestVisibleInChrome="True"/>
            </swcrp:RibbonTitlePanel>
        </DockPanel>
        <ContentPresenter x:Name="applicationMenu" Content="{TemplateBinding ApplicationMenu}" Grid.Row="1" VerticalAlignment="Top"/>
        <RibbonTabHeaderItemsControl x:Name="TabHeaderItemsControl" Grid.Column="1" 
                                             HorizontalAlignment="Left" Margin="1,1,1,0" Grid.Row="1" VerticalAlignment="Top"/>
        <ContentPresenter x:Name="PART_HelpPane" ContentTemplate="{TemplateBinding HelpPaneContentTemplate}" 
                                  Content="{TemplateBinding HelpPaneContent}" Grid.Column="2" ContentSource="HelpPaneContent" 
                                  HorizontalAlignment="Right" Grid.Row="1" VerticalAlignment="Top"/>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsCollapsed" Value="True">
            <Setter Property="Visibility" TargetName="applicationMenu" Value="Collapsed"/>
            <Setter Property="Visibility" TargetName="QatBottomHost" Value="Collapsed"/>
            <Setter Property="Visibility" TargetName="QatTopHost" Value="Collapsed"/>
            <Setter Property="Visibility" TargetName="mainItemsPresenterHost" Value="Collapsed"/>
            <Setter Property="Visibility" TargetName="TabHeaderItemsControl" Value="Collapsed"/>
            <Setter Property="Visibility" TargetName="PART_HelpPane" Value="Collapsed"/>
            <Setter Property="Visibility" TargetName="PART_ContextualTabGroupItemsControl" Value="Collapsed"/>
            <Setter Property="MinWidth" TargetName="PART_TitleHost" Value="0"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsCollapsed" Value="True"/>
                <Condition Property="IsHostedInRibbonWindow" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter Property="Visibility" Value="Collapsed"/>
        </MultiTrigger>
        <Trigger Property="ShowQuickAccessToolBarOnTop" Value="False">
            <Setter Property="Content" TargetName="QatTopHostContentPresenter" Value="{x:Null}"/>
            <Setter Property="Visibility" TargetName="QatTopHost" Value="Collapsed"/>
            <Setter Property="Content" TargetName="QatBottomHostContentPresenter" 
                            Value="{Binding QuickAccessToolBar, RelativeSource={RelativeSource TemplatedParent}}"/>
            <Setter Property="BorderThickness" TargetName="BackgroundBorder" Value="0,0,0,1"/>
        </Trigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding QuickAccessToolBar.HasItems, RelativeSource={RelativeSource Self}}" Value="False"/>
                <Condition Binding="{Binding QuickAccessToolBar.CustomizeMenuButton, RelativeSource={RelativeSource Self}}" Value="{x:Null}"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Visibility" TargetName="QatTopHost" Value="Collapsed"/>
            <Setter Property="Visibility" TargetName="QatBottomHost" Value="Collapsed"/>
        </MultiDataTrigger>
        <Trigger Property="IsMinimized" Value="True">
            <Setter Property="Content" TargetName="mainItemsPresenterHost" Value="{x:Null}"/>
            <Setter Property="Visibility" TargetName="mainItemsPresenterHost" Value="Collapsed"/>
            <Setter Property="Content" TargetName="popupItemsPresenterHost" Value="{Binding ElementName=groupsBorder}"/>
            <Setter Property="BorderThickness" TargetName="BackgroundBorder" Value="0,0,0,1"/>
        </Trigger>
        <Trigger Property="WindowIconVisibility" Value="Collapsed">
            <Setter Property="Visibility" TargetName="windowIconPadding" Value="Collapsed"/>
            <Setter Property="Visibility" TargetName="QatTopHostLeftBorder" Value="Collapsed"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMinimized" Value="True"/>
                <Condition Property="ShowQuickAccessToolBarOnTop" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter Property="BorderThickness" TargetName="QatBottomHost" Value="0,1,0,0"/>
        </MultiTrigger>
        <Trigger Property="IsHostedInRibbonWindow" Value="False">
            <Setter Property="Grid.Row" TargetName="BackgroundBorder" Value="0"/>
            <Setter Property="Grid.RowSpan" TargetName="BackgroundBorder" Value="4"/>
            <Setter Property="Visibility" TargetName="titleBarBackground" Value="Visible"/>
            <Setter Property="Visibility" TargetName="windowIconPadding" Value="Collapsed"/>
            <Setter Property="Visibility" TargetName="QatTopHostLeftBorder" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="IsDropDownOpen" Value="True">
            <Setter Property="BorderThickness" TargetName="BackgroundBorder" Value="0"/>
        </Trigger>
        <Trigger Property="HasDropShadow" SourceName="PART_ITEMSPRESENTERPOPUP" Value="True">
            <Setter Property="Color" TargetName="Shdw" Value="{StaticResource DropShadowColor}"/>
        </Trigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsActive, RelativeSource={RelativeSource FindAncestor, 
                            AncestorLevel=1, AncestorType={x:Type RibbonWindow}}}" Value="False"/>
                <Condition Binding="{Binding Path=(SystemParameters.IsGlassEnabled)}" Value="False"/>
                <Condition Binding="{Binding IsHostedInRibbonWindow, RelativeSource={RelativeSource Self}}" Value="True"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="TextElement.Foreground" TargetName="PART_TitleHost" 
                            Value="{DynamicResource {x:Static SystemColors.InactiveCaptionTextBrushKey}}"/>
        </MultiDataTrigger>
        <DataTrigger Binding="{Binding Path=(SystemParameters.UxThemeName)}" Value="Aero">
            <Setter Property="Margin" TargetName="QatTopHost" Value="0,-3,0,0"/>
            <Setter Property="Margin" TargetName="QatTopHostLeftBorder" Value="3,3,0,5"/>
            <Setter Property="Background" TargetName="QatTopHostLeftBorder" Value="{StaticResource QatTopHostBorderBrush3}"/>
            <Setter Property="BorderBrush" TargetName="QatTopHostLeftBorder" Value="{StaticResource QatTopHostBorderBrush4}"/>
            <Setter Property="Margin" TargetName="QatTopHostRightBorder" Value="0,3,1,5"/>
            <Setter Property="Background" TargetName="QatTopHostRightBorder" Value="{StaticResource QatTopHostBorderBrush3}"/>
            <Setter Property="BorderBrush" TargetName="QatTopHostRightBorder" Value="{StaticResource QatTopHostBorderBrush4}"/>
        </DataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=(SystemParameters.UxThemeName)}" Value="Aero"/>
                <Condition Binding="{Binding WindowState, RelativeSource={RelativeSource FindAncestor, 
                            AncestorLevel=1, AncestorType={x:Type RibbonWindow}}}" Value="Maximized"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Margin" TargetName="QatTopHost" Value="0"/>
        </MultiDataTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

如何自定义 WPF Ribbon 4.5（样式、模板等）

提问by Alexander Zwitbaum

回答by Andreas Kahler

回答by Andreas Kahler

回答by Scott Solmer

Template:

模板：

相关推荐

最近更新

标签

如何自定义 WPF Ribbon 4.5（样式、模板等）

提问by Alexander Zwitbaum

回答by Andreas Kahler

回答by Andreas Kahler

回答by Scott Solmer

Template:

模板：

相关推荐

我的第一个 WPF 应用程序中的 WPF window_loaded 异常

wpf 如何在不同语言的资源文件之间动态切换？

wpf 背景属性未指向路径“(0).(1)”中的依赖项对象

如何在 WPF 的日历中禁用过去的日子？

相关推荐

最近更新

标签