Fixes #484 by adding special style for MenutItem with set Description

fluentribbon · Nov 5, 2017 · 471be6b · 471be6b
1 parent e2c3606
commit 471be6b
Show file tree

Hide file tree

Showing 8 changed files with 220 additions and 16 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -184,6 +184,7 @@
   - [#479](../../issues/479) - Bulgarian language (thanks @kalatchev)
   - [#480](../../issues/480) - Disable Scroll Wheel for tab selection  
   You can control this behavior by using `IsMouseWheelScrollingEnabled` on `Ribbon`
+  - [#484](../../issues/484) - Add special style/template for MenuItem with set description
 
 ## 5.0.2
   - [#437](../../issues/437) - "Could not load ControlzEx"

diff --git a/Fluent.Ribbon.Showcase/TestContent.xaml b/Fluent.Ribbon.Showcase/TestContent.xaml
@@ -1599,8 +1599,20 @@
                                             FocusManager.IsFocusScope="True"
                                             CanAddButtonToQuickAccessToolBar="True"
                                             ClosePopupOnMouseDown="True">
-                            <Fluent:MenuItem Header="Begin" />
-                            <Fluent:MenuItem Header="Undo something" />
+                            <Fluent:MenuItem Description="Test" Header="My header">
+                                <Fluent:MenuItem.Icon>
+                                    <Rectangle Fill="Green"
+                                               Height="24"
+                                               Width="24" />
+                                </Fluent:MenuItem.Icon>
+                            </Fluent:MenuItem>
+                            <Fluent:MenuItem Header="Undo something">
+                                <Fluent:MenuItem.Icon>
+                                    <Rectangle Fill="Green"
+                                               Height="16"
+                                               Width="16" />
+                                </Fluent:MenuItem.Icon>
+                            </Fluent:MenuItem>
                             <Fluent:MenuItem Header="Undo another thing" />
                         </Fluent:SplitButton>
                     </StackPanel>

diff --git a/Fluent.Ribbon/Controls/MenuItem.cs b/Fluent.Ribbon/Controls/MenuItem.cs
@@ -119,7 +119,7 @@ public string Description
         /// Using a DependencyProperty as the backing store for Description.  This enables animation, styling, binding, etc...
         /// </summary>
         public static readonly DependencyProperty DescriptionProperty =
-            DependencyProperty.Register(nameof(Description), typeof(string), typeof(MenuItem), new PropertyMetadata(StringBoxes.Empty));
+            DependencyProperty.Register(nameof(Description), typeof(string), typeof(MenuItem), new PropertyMetadata(default(string)));
 
         #endregion
 

diff --git a/Fluent.Ribbon/Converters/IsNullConverter.cs b/Fluent.Ribbon/Converters/IsNullConverter.cs
@@ -0,0 +1,31 @@
+namespace Fluent.Converters
+{
+    using System;
+    using System.Globalization;
+    using System.Windows.Data;
+
+    /// <summary>
+    ///     Converts <c>null</c> to <c>true</c> and not <c>null</c> to <c>false</c>.
+    /// </summary>
+    public sealed class IsNullConverter : IValueConverter
+    {
+        private static IsNullConverter instance;
+
+        /// <summary>
+        ///     A singleton instance for <see cref="IsNullConverter" />.
+        /// </summary>
+        public static IsNullConverter Instance => instance ?? (instance = new IsNullConverter());
+
+        /// <inheritdoc />
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return value == null;
+        }
+
+        /// <inheritdoc />
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return Binding.DoNothing;
+        }
+    }
+}
diff --git a/Fluent.Ribbon/Fluent.Ribbon.NET 4.0.csproj b/Fluent.Ribbon/Fluent.Ribbon.NET 4.0.csproj
@@ -78,6 +78,7 @@
     <Compile Include="Controls\WindowSteeringHelperControl.cs" />
     <Compile Include="Converters\ColorToSolidColorBrushConverter.cs" />
     <Compile Include="Converters\EqualsToVisibilityConverter.cs" />
+    <Compile Include="Converters\IsNullConverter.cs" />
     <Compile Include="Converters\SpinnerTextToValueConverter.cs" />
     <Compile Include="Data\KeyTipPressedResult.cs" />
     <Compile Include="Extensibility\IKeyTipInformationProvider.cs" />
@@ -101,12 +102,12 @@
     <Compile Include="Data\KeyTipInformation.cs" />
     <Compile Include="Localization\Languages\Arabic.cs" />
     <Compile Include="Localization\Languages\Azerbaijani.cs" />
+    <Compile Include="Localization\Languages\Bulgarian.cs" />
     <Compile Include="Localization\Languages\Catalan.cs" />
     <Compile Include="Localization\Languages\Chinese.cs" />
     <Compile Include="Localization\Languages\Czech.cs" />
     <Compile Include="Localization\Languages\Danish.cs" />
     <Compile Include="Localization\Languages\Dutch.cs" />
-    <Compile Include="Localization\Languages\Bulgarian.cs" />
     <Compile Include="Localization\Languages\English.cs" />
     <Compile Include="Localization\Languages\Estonian.cs" />
     <Compile Include="Localization\Languages\Finnish.cs" />

diff --git a/Fluent.Ribbon/Fluent.Ribbon.NET 4.5.csproj b/Fluent.Ribbon/Fluent.Ribbon.NET 4.5.csproj
@@ -78,6 +78,7 @@
     <Compile Include="Controls\WindowSteeringHelperControl.cs" />
     <Compile Include="Converters\ColorToSolidColorBrushConverter.cs" />
     <Compile Include="Converters\EqualsToVisibilityConverter.cs" />
+    <Compile Include="Converters\IsNullConverter.cs" />
     <Compile Include="Converters\SpinnerTextToValueConverter.cs" />
     <Compile Include="Data\KeyTipPressedResult.cs" />
     <Compile Include="Extensibility\IKeyTipInformationProvider.cs" />

diff --git a/Fluent.Ribbon/Fluent.Ribbon.NET 4.6.2.csproj b/Fluent.Ribbon/Fluent.Ribbon.NET 4.6.2.csproj
@@ -78,6 +78,7 @@
     <Compile Include="Controls\WindowSteeringHelperControl.cs" />
     <Compile Include="Converters\ColorToSolidColorBrushConverter.cs" />
     <Compile Include="Converters\EqualsToVisibilityConverter.cs" />
+    <Compile Include="Converters\IsNullConverter.cs" />
     <Compile Include="Converters\SpinnerTextToValueConverter.cs" />
     <Compile Include="Data\KeyTipPressedResult.cs" />
     <Compile Include="Extensibility\IKeyTipInformationProvider.cs" />

diff --git a/Fluent.Ribbon/Themes/Controls/MenuItem.xaml b/Fluent.Ribbon/Themes/Controls/MenuItem.xaml
@@ -177,7 +177,7 @@
                               Grid.Column="1"
                               d:LayoutOverrides="Width"
                               RecognizesAccessKey="True" />
-            <Image x:Name="image"
+            <Image x:Name="checkedImage"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Source="{DynamicResource MenuCheckedImage}"
@@ -221,7 +221,7 @@
                                Value="True" />
                 </MultiTrigger.Conditions>
                 <Setter Property="Visibility"
-                        TargetName="image"
+                        TargetName="checkedImage"
                         Value="Visible" />
             </MultiTrigger>
             <MultiTrigger>
@@ -241,7 +241,7 @@
                         TargetName="iconImage"
                         Value="0.5" />
                 <Setter Property="Opacity"
-                        TargetName="image"
+                        TargetName="checkedImage"
                         Value="0.5" />
                 <Setter Property="Opacity"
                         TargetName="textBlock"
@@ -256,7 +256,7 @@
                     </Setter.Value>
                 </Setter>
                 <Setter Property="Effect"
-                        TargetName="image">
+                        TargetName="checkedImage">
                     <Setter.Value>
                         <Fluent:GrayscaleEffect />
                     </Setter.Value>
@@ -301,7 +301,7 @@
                               Grid.Column="1"
                               d:LayoutOverrides="Width"
                               RecognizesAccessKey="True" />
-            <Image x:Name="image"
+            <Image x:Name="checkedImage"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Source="{DynamicResource MenuCheckedImage}"
@@ -455,7 +455,7 @@
                                Value="True" />
                 </MultiTrigger.Conditions>
                 <Setter Property="Visibility"
-                        TargetName="image"
+                        TargetName="checkedImage"
                         Value="Visible" />
             </MultiTrigger>
             <MultiTrigger>
@@ -475,7 +475,7 @@
                         TargetName="iconImage"
                         Value="0.5" />
                 <Setter Property="Opacity"
-                        TargetName="image"
+                        TargetName="checkedImage"
                         Value="0.5" />
                 <Setter Property="Opacity"
                         TargetName="textBlock"
@@ -487,7 +487,7 @@
                     </Setter.Value>
                 </Setter>
                 <Setter Property="Effect"
-                        TargetName="image">
+                        TargetName="checkedImage">
                     <Setter.Value>
                         <Fluent:GrayscaleEffect />
                     </Setter.Value>
@@ -556,7 +556,7 @@
                               Grid.Column="1"
                               d:LayoutOverrides="Width"
                               RecognizesAccessKey="True" />
-            <Image x:Name="image"
+            <Image x:Name="checkedImage"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Source="{DynamicResource MenuCheckedImage}"
@@ -711,7 +711,7 @@
                                Value="True" />
                 </MultiTrigger.Conditions>
                 <Setter Property="Visibility"
-                        TargetName="image"
+                        TargetName="checkedImage"
                         Value="Visible" />
             </MultiTrigger>
             <MultiTrigger>
@@ -740,7 +740,7 @@
                         TargetName="iconImage"
                         Value="0.5" />
                 <Setter Property="Opacity"
-                        TargetName="image"
+                        TargetName="checkedImage"
                         Value="0.5" />
                 <Setter Property="Opacity"
                         TargetName="textBlock"
@@ -752,7 +752,7 @@
                     </Setter.Value>
                 </Setter>
                 <Setter Property="Effect"
-                        TargetName="image">
+                        TargetName="checkedImage">
                     <Setter.Value>
                         <Fluent:GrayscaleEffect />
                     </Setter.Value>
@@ -761,6 +761,143 @@
         </ControlTemplate.Triggers>
     </ControlTemplate>
 
+    <!--Menu Item with Description Template-->
+    <ControlTemplate x:Key="MenuItemWithDescriptionTemplate"
+                     TargetType="{x:Type Fluent:MenuItem}">
+        <ControlTemplate.Resources>
+            <ResourceDictionary>
+                <Style x:Key="{x:Type ScrollViewer}"
+                       TargetType="{x:Type ScrollViewer}"
+                       BasedOn="{StaticResource MenuScrollViewer}" />
+            </ResourceDictionary>
+        </ControlTemplate.Resources>
+        <Grid Background="{TemplateBinding Background}">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="45" />
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            <Border x:Name="border"
+                    Grid.Column="0"
+                    Grid.RowSpan="2"
+                    Grid.ColumnSpan="3"
+                    HorizontalAlignment="Stretch"
+                    Margin="0"
+                    Width="Auto"
+                    Visibility="Collapsed"
+                    Background="{DynamicResource Fluent.Ribbon.Brushes.Button.MouseOver.Background}"
+                    BorderBrush="{DynamicResource Fluent.Ribbon.Brushes.Button.MouseOver.BorderBrush}"
+                    BorderThickness="1">
+            </Border>
+            <ContentControl x:Name="textBlock"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            Width="Auto"
+                            Height="Auto"
+                            Margin="0,3,3,3"
+                            VerticalAlignment="Center"
+                            Grid.Column="1"
+                            d:LayoutOverrides="Width" />
+            <ContentPresenter x:Name="descriptionPresenter"
+                              Grid.Row="1"
+                              ContentSource="Description"
+                              Width="Auto"
+                              Height="Auto"
+                              Margin="0,3,3,3"
+                              VerticalAlignment="Center"
+                              Grid.Column="1"
+                              d:LayoutOverrides="Width"
+                              RecognizesAccessKey="True" />
+            <Image x:Name="checkedImage"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   Source="{DynamicResource MenuCheckedImage}"
+                   Stretch="None"
+                   Visibility="Collapsed"
+                   SnapsToDevicePixels="True" />
+            <ContentPresenter x:Name="iconImage"
+                              Grid.RowSpan="2"
+                              HorizontalAlignment="Center"
+                              Height="32"
+                              VerticalAlignment="Top"
+                              Content="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static Converters:StaticConverters.ObjectToImageConverter}}"
+                              Width="32"
+                              Margin="3,2,2,2"
+                              SnapsToDevicePixels="True" />
+            <TextBlock x:Name="gestureTextBlock"
+                       Text="{TemplateBinding InputGestureText}"
+                       Width="Auto"
+                       Height="Auto"
+                       Margin="3,3,15,3"
+                       VerticalAlignment="Center"
+                       Grid.Column="2" />
+        </Grid>
+        <ControlTemplate.Triggers>
+            <Trigger Property="InputGestureText"
+                     Value="{x:Null}">
+                <Setter Property="Visibility"
+                        TargetName="gestureTextBlock"
+                        Value="Collapsed" />
+            </Trigger>
+            <Trigger Property="InputGestureText"
+                     Value="">
+                <Setter Property="Visibility"
+                        TargetName="gestureTextBlock"
+                        Value="Collapsed" />
+            </Trigger>
+            <MultiTrigger>
+                <MultiTrigger.Conditions>
+                    <Condition Property="Icon"
+                               Value="{x:Null}" />
+                    <Condition Property="IsChecked"
+                               Value="True" />
+                </MultiTrigger.Conditions>
+                <Setter Property="Visibility"
+                        TargetName="checkedImage"
+                        Value="Visible" />
+            </MultiTrigger>
+            <MultiTrigger>
+                <MultiTrigger.Conditions>
+                    <Condition Property="IsHighlighted"
+                               Value="True" />
+                    <Condition Property="IsEnabled"
+                               Value="True" />
+                </MultiTrigger.Conditions>
+                <Setter Property="Visibility"
+                        TargetName="border"
+                        Value="Visible" />
+            </MultiTrigger>
+            <Trigger Property="IsEnabled"
+                     Value="False">
+                <Setter Property="Opacity"
+                        TargetName="iconImage"
+                        Value="0.5" />
+                <Setter Property="Opacity"
+                        TargetName="checkedImage"
+                        Value="0.5" />
+                <Setter Property="Opacity"
+                        TargetName="textBlock"
+                        Value="0.5" />
+                <Setter Property="Effect"
+                        TargetName="iconImage">
+                    <Setter.Value>
+                        <Fluent:GrayscaleEffect />
+                    </Setter.Value>
+                </Setter>
+                <Setter Property="Effect"
+                        TargetName="checkedImage">
+                    <Setter.Value>
+                        <Fluent:GrayscaleEffect />
+                    </Setter.Value>
+                </Setter>
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
     <!--Menu Item Style-->
     <Style x:Key="FluentDefaultSystemMenuItemStyle"
            TargetType="{x:Type MenuItem}">
@@ -774,6 +911,13 @@
                 Value="{DynamicResource Fluent.Ribbon.Brushes.LabelTextBrush}" />
         <Setter Property="Template"
                 Value="{DynamicResource MenuItemTemplate}" />
+        <Setter Property="HeaderTemplate">
+            <Setter.Value>
+                <DataTemplate>
+                    <TextBlock Text="{Binding}" />
+                </DataTemplate>
+            </Setter.Value>
+        </Setter>
         <Style.Triggers>
             <MultiTrigger>
                 <MultiTrigger.Conditions>
@@ -795,6 +939,19 @@
                 <Setter Property="Template"
                         Value="{DynamicResource HeaderMenuItemTemplate}" />
             </MultiTrigger>
+            <DataTrigger Binding="{Binding Description, RelativeSource={RelativeSource Self}, Converter={x:Static Converters:IsNullConverter.Instance}}"
+                         Value="False">
+                <Setter Property="Template"
+                        Value="{DynamicResource MenuItemWithDescriptionTemplate}" />
+                <Setter Property="HeaderTemplate">
+                    <Setter.Value>
+                        <DataTemplate>
+                            <TextBlock Text="{Binding}"
+                                       FontWeight="Bold" />
+                        </DataTemplate>
+                    </Setter.Value>
+                </Setter>
+            </DataTrigger>
         </Style.Triggers>
     </Style>
 </ResourceDictionary>