Как настроить WPF Ribbon 4.5 (стили, шаблоны и т. Д.)

Я пытаюсь настроить System.Windows.Controls.Ribbon из .Net Framework 4.5, чтобы его можно было использовать с темой Expression Dark (темные цвета, как в теме по умолчанию для Blend). Я пробовал следующие идеи, но до сих пор безрезультатно:

  • измените фон ленты: изменит только основной цвет, но оставит все остальные глянцевые цвета, выделите цвета и т. д.
  • изменить стили и шаблоны: мне не удалось найти шаблоны по умолчанию для ленты 4.5. Я пытался получить их с помощью таких инструментов, как ShowMeTheTemplate, но похоже, что они используют какие-то внутренние классы.
  • настройка шаблонов с помощью Blend для VS2012: я всегда получаю сообщение об ошибке «Ошибка копирования шаблона».
  • используйте ленту .net 4 из библиотеки RibbonControlLibrary: RibbonWindow выглядит некрасиво в Windows 8 (см. WPF RibbonWindow + Windows 8 - блок управления выглядит плохо), что я не могу решить

Любая помощь приветствуется, все предложения приветствуются.


c# templates wpf styles ribbon
person Alexander Zwitbaum    schedule 05.07.2013    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Мне удалось извлечь полностью рабочий шаблон с помощью Покажи мне шаблоны. Для этого я модифицировал его для извлечения шаблонов из «System.Windows.Controls.Ribbon» (а не из основной сборки фреймворка).

Это дает мне следующее:

https://gist.github.com/drayde/75526b570a266f5f8f38 (слишком длинный, чтобы вставлять здесь)

Просто добавьте это к своим ресурсам и используйте так:

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

Изменив шаблон, вы получите полный контроль над тем, как отображается ваша лента.

person Andreas Kahler    schedule 17.11.2014
comment
При использовании этого шаблона со свернутой лентой, щелчок по пунктам меню не раскрывает ленту ... - person Scott Solmer; 20.08.2019

arrow_upward
5
arrow_downward

Вы можете изменить пару цветов, установив свойства на ленте:

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

Не совсем красивый пример, но показывает, как это сделать.

Было бы интересно, как сделать полный рестайлинг ...

person Andreas Kahler    schedule 14.11.2014
comment
лучше тогда ничего ;-) - person peter70; 22.09.2016

arrow_upward
1
arrow_downward

Я выполнил этот ответ, чтобы получить шаблон от VS.
Он потерпел неудачу аналогично описанному OP. br /> Затем я исправил недостающие части {Binding (0)}, используя суть от @Andreas.

Для проверки я установил для всех свойств цвета черный цвет в моем представлении и 50% пурпурный во вновь созданном шаблоне.

тестовое приложение

Примерно в это время я готов отказаться от System.Controls.Windows.Ribbon и попробовать Fluent.Ribbon ...

Шаблон:

<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>
person Scott Solmer    schedule 20.08.2019