style building

src/Net_GE45/HandyControlDemo_Net_GE45/HandyControlDemo_Net_GE45.csproj

@@ -430,6 +430,11 @@
       <Link>Resources\Img\LeftMainContent\MainMenuControl_16x.png</Link>
     </Resource>
   </ItemGroup>
+  <ItemGroup>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\fabric-icons.ttf">
+      <Link>Resources\fabric-icons.ttf</Link>
+    </Resource>
+  </ItemGroup>
   <Import Project="..\..\Shared\HandyControlDemo_Shared\HandyControlDemo_Shared.projitems" Label="Shared" />
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
 </Project>

src/Shared/HandyControlDemo_Shared/HandyControlDemo_Shared.projitems

@@ -336,6 +336,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Resources\Themes\Basic\Fonts.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Resources\Themes\Basic\Geometries.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

src/Shared/HandyControlDemo_Shared/Resources/Themes/Basic/Basic.xaml

@@ -4,6 +4,7 @@
         <ResourceDictionary Source="Brushes.xaml"/>
         <ResourceDictionary Source="Geometries.xaml"/>
         <ResourceDictionary Source="Converters.xaml"/>
+        <ResourceDictionary Source="Fonts.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
 </ResourceDictionary>

src/Shared/HandyControlDemo_Shared/Resources/Themes/Basic/Fonts.xaml

@@ -0,0 +1,6 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <FontFamily x:Key="FabricIcons">pack://application:,,,/HandyControlDemo;component/Resources/fabric-icons.ttf#Fabric MDL2 Assets</FontFamily>
+
+</ResourceDictionary>

src/Shared/HandyControlDemo_Shared/Resources/Themes/Styles/Style.xaml

@@ -5,6 +5,7 @@
 
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="../Basic/Geometries.xaml"/>
+        <ResourceDictionary Source="../Basic/Fonts.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
     <Style x:Key="CirclePanelButton" BasedOn="{StaticResource ButtonCustom}" TargetType="Button">
@@ -99,4 +100,9 @@
         <Setter Property="CloseButtonForeground" Value="White"/>
     </Style>
 
+    <Style x:Key="TextBlockFabricIcons" TargetType="TextBlock">
+        <Setter Property="FontFamily" Value="{StaticResource FabricIcons}"/>
+        <Setter Property="FontSize" Value="14"/>
+    </Style>
+
 </ResourceDictionary>

src/Shared/HandyControlDemo_Shared/UserControl/Controls/SideMenuDemoCtl.xaml

@@ -6,31 +6,141 @@
              Background="{DynamicResource RegionBrush}">
 
     <Grid>
-        <controls:SideMenu Width="200" Margin="32">
+        <controls:SideMenu BorderThickness="1" Width="200" Margin="32">
             <controls:SideMenuItem Header="Overview">
                 <controls:SideMenuItem.Icon>
                     <Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Overview.png" Width="24" Height="24"/>
                 </controls:SideMenuItem.Icon>
+                <controls:SideMenuItem Header="Summary">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf2cb;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Dashboards">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf246;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Wiki">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xe82d;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
             </controls:SideMenuItem>
             <controls:SideMenuItem Header="Boards">
                 <controls:SideMenuItem.Icon>
                     <Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Boards.png" Width="24" Height="24"/>
                 </controls:SideMenuItem.Icon>
+                <controls:SideMenuItem Header="Work Items">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf314;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Boards">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf444;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Backlogs">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf6bf;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Sprints">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf3b0;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Queries">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf2b8;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
             </controls:SideMenuItem>
             <controls:SideMenuItem Header="Repos">
                 <controls:SideMenuItem.Icon>
                     <Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Repos.png" Width="24" Height="24"/>
                 </controls:SideMenuItem.Icon>
+                <controls:SideMenuItem Header="Files">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf30e;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Commits">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf293;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Pushes">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf298;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Branches">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xebc2;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Tags">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xe8ec;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Pull requests">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf296;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
             </controls:SideMenuItem>
             <controls:SideMenuItem Header="Pipelines">
                 <controls:SideMenuItem.Icon>
                     <Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Pipelines.png" Width="24" Height="24"/>
                 </controls:SideMenuItem.Icon>
+                <controls:SideMenuItem Header="Builds">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf28f;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Releases">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf3b3;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Library">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xe8f1;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Task groups">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf2ae;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Deployment groups">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf29d;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
             </controls:SideMenuItem>
             <controls:SideMenuItem Header="Test Plans">
                 <controls:SideMenuItem.Icon>
                     <Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-TestPlans.png" Width="24" Height="24"/>
                 </controls:SideMenuItem.Icon>
+                <controls:SideMenuItem Header="Test Plans">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf3ab;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Runs">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xf3ac;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
+                <controls:SideMenuItem Header="Load test">
+                    <controls:SideMenuItem.Icon>
+                        <TextBlock Text="&#xe8a9;" Style="{StaticResource TextBlockFabricIcons}"/>
+                    </controls:SideMenuItem.Icon>
+                </controls:SideMenuItem>
             </controls:SideMenuItem>
         </controls:SideMenu>
     </Grid>

src/Shared/HandyControl_Shared/Controls/SideMenu/SideMenu.cs

@@ -1,4 +1,5 @@
 using System.Windows;
+using HandyControl.Data;
 
 namespace HandyControl.Controls
 {
@@ -6,6 +7,41 @@ namespace HandyControl.Controls
     {
         private SideMenuItem _selectedItem;
 
+        private SideMenuItem _selectedHeader;
+
+        public SideMenu()
+        {
+            AddHandler(SideMenuItem.SelectedEvent, new RoutedEventHandler(SideMenuItemSelected));
+        }
+
+        private void SideMenuItemSelected(object sender, RoutedEventArgs e)
+        {
+            if (e.OriginalSource is SideMenuItem item)
+            {
+                if (item.Role == SideMenuItemRole.Item)
+                {
+                    if (_selectedItem != null)
+                    {
+                        _selectedItem.IsSelected = false;
+                    }
+
+                    _selectedItem = item;
+                    _selectedItem.IsSelected = true;
+                }
+                else
+                {
+                    if (_selectedHeader != null)
+                    {
+                        _selectedHeader.IsSelected = false;
+                    }
+
+                    _selectedHeader = item;
+                    _selectedHeader.IsSelected = true;
+                    _selectedHeader.SelectDefaultItem(_selectedItem);
+                }
+            }
+        }
+
         protected override DependencyObject GetContainerForItemOverride() => new SideMenuItem();
 
         protected override bool IsItemItsOwnContainerOverride(object item) => item is SideMenuItem;

src/Shared/HandyControl_Shared/Controls/SideMenu/SideMenuItem.cs

@@ -1,10 +1,14 @@
-using System.Windows;
+using System.Linq;
+using System.Windows;
+using System.Windows.Input;
 using HandyControl.Data;
 
 namespace HandyControl.Controls
 {
     public class SideMenuItem : HeaderedSimpleItemsControl, ISelectable
     {
+        private bool _isMouseLeftButtonDown;
+
         public static readonly DependencyProperty IconProperty = DependencyProperty.Register(
             "Icon", typeof(object), typeof(SideMenuItem), new PropertyMetadata(default(object)));
 
@@ -35,21 +39,59 @@ namespace HandyControl.Controls
             set => SetValue(IsSelectedProperty, value);
         }
 
-        private static readonly DependencyPropertyKey RolePropertyKey =
-            DependencyProperty.RegisterReadOnly(nameof(Role), typeof(SideMenuItemRole), typeof(SideMenuItem),
-                new PropertyMetadata(SideMenuItemRole.Header));
+        public static readonly DependencyProperty RoleProperty = DependencyProperty.Register(
+            "Role", typeof(SideMenuItemRole), typeof(SideMenuItem), new PropertyMetadata(default(SideMenuItemRole)));
 
-        public static readonly DependencyProperty RoleProperty = RolePropertyKey.DependencyProperty;
-
-        public SideMenuItemRole Role => (SideMenuItemRole) GetValue(RoleProperty);
+        public SideMenuItemRole Role
+        {
+            get => (SideMenuItemRole) GetValue(RoleProperty);
+            internal set => SetValue(RoleProperty, value);
+        }
 
         protected override DependencyObject GetContainerForItemOverride() => new SideMenuItem();
 
         protected override bool IsItemItsOwnContainerOverride(object item) => item is SideMenuItem;
 
-        private void UpdateRole()
+        protected override void OnMouseLeave(MouseEventArgs e)
         {
-            
+            base.OnMouseLeave(e);
+
+            _isMouseLeftButtonDown = false;
+        }
+
+        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
+        {
+            base.OnMouseLeftButtonDown(e);
+
+            _isMouseLeftButtonDown = true;
+        }
+
+        protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
+        {
+            base.OnMouseLeftButtonUp(e);
+
+            if (_isMouseLeftButtonDown)
+            {
+                if (!IsSelected)
+                {
+                    IsSelected = true;
+                    OnSelected(new RoutedEventArgs(SelectedEvent, this));
+                }
+                _isMouseLeftButtonDown = false;
+            }
+        }
+
+        internal void SelectDefaultItem(SideMenuItem menuItem)
+        {
+            if (Role == SideMenuItemRole.Header && ItemsHost.Children.Count > 0)
+            {
+                if (ItemsHost.Children.Contains(menuItem)) return;
+                var item = ItemsHost.Children.OfType<SideMenuItem>().FirstOrDefault();
+                if (item != null && !item.IsSelected)
+                {
+                    item.OnSelected(new RoutedEventArgs(SelectedEvent, item));
+                }
+            }
         }
     }
 }

src/Shared/HandyControl_Shared/Themes/Styles/Base/SideMenuBaseStyle.xaml

@@ -3,25 +3,83 @@
                     xmlns:controls="clr-namespace:HandyControl.Controls">
 
     <Style x:Key="SideMenuItemBaseStyle" TargetType="controls:SideMenuItem">
+        <Setter Property="Role" Value="Item"/>
         <Setter Property="VerticalContentAlignment" Value="Center"/>
-        <Setter Property="Background" Value="Transparent"/>
-        <Setter Property="MinHeight" Value="44"/>
+        <Setter Property="Background" Value="{DynamicResource RegionBrush}"/>
+        <Setter Property="MinHeight" Value="40"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="controls:SideMenuItem">
-                    <Border BorderThickness="4,0,0,0" Name="BorderRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
-                        <DockPanel Margin="{TemplateBinding Padding}">
-                            <ContentPresenter Width="36" ContentSource="Icon" Name="PresenterIcon"/>
-                            <ContentPresenter ContentSource="Header" Margin="6,0,0,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
-                        </DockPanel>
+                    <Border Name="BorderRoot" Background="{TemplateBinding Background}">
+                        <controls:SimplePanel>
+                            <Rectangle Width="4" Fill="{TemplateBinding BorderBrush}" HorizontalAlignment="Left"/>
+                            <ContentControl Margin="4,0,0,0">
+                                <DockPanel Margin="{TemplateBinding Padding}">
+                                    <ContentControl Width="40" Name="PresenterIcon">
+                                        <ContentPresenter ContentSource="Icon" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                    </ContentControl>
+                                    <ContentPresenter Name="PresenterHeader"  ContentSource="Header" Margin="6,0,0,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
+                                </DockPanel>
+                            </ContentControl>
+                        </controls:SimplePanel>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="Icon" Value="{x:Null}">
+                            <Setter TargetName="PresenterIcon" Property="Visibility" Value="Collapsed"/>
+                        </Trigger>
+                        <DataTrigger Binding="{Binding IsSelected,RelativeSource={RelativeSource AncestorType=controls:SideMenuItem}}" Value="True">
+                            <Setter Property="BorderBrush" Value="{DynamicResource DarkOpacityBrush}"/>
+                        </DataTrigger>
+                        <Trigger Property="IsSelected" Value="True">
+                            <Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}"/>
+                            <Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
+                            <Setter Property="TextElement.FontWeight" Value="Bold" TargetName="PresenterHeader"/>
+                        </Trigger>
+                        <Trigger Property="IsMouseOver" Value="true">
+                            <Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="SideMenuItemHeaderBaseStyle" TargetType="controls:SideMenuItem">
+        <Setter Property="VerticalContentAlignment" Value="Center"/>
+        <Setter Property="Background" Value="{DynamicResource RegionBrush}"/>
+        <Setter Property="ItemContainerStyle" Value="{StaticResource SideMenuItemBaseStyle}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:SideMenuItem">
+                    <Border Name="BorderRoot" Background="{TemplateBinding Background}">
+                        <Grid>
+                            <Grid.RowDefinitions>
+                                <RowDefinition MinHeight="48"/>
+                                <RowDefinition/>
+                            </Grid.RowDefinitions>
+                            <Border Name="BorderBack" Background="{TemplateBinding Background}"/>
+                            <ContentControl Grid.Row="0" Margin="4,0,0,0">
+                                <DockPanel Margin="{TemplateBinding Padding}" Name="PanelHeader" Background="Transparent">
+                                    <ContentControl Width="40" Name="PresenterIcon">
+                                        <ContentPresenter ContentSource="Icon" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                                    </ContentControl>
+                                    <ContentPresenter Name="PresenterHeader" ContentSource="Header" Margin="6,0,0,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
+                                </DockPanel>
+                            </ContentControl>
+                            <StackPanel Grid.Row="1" x:Name="PART_Panel"/>
+                        </Grid>
                     </Border>
                     <ControlTemplate.Triggers>
                         <Trigger Property="Icon" Value="{x:Null}">
                             <Setter TargetName="PresenterIcon" Property="Visibility" Value="Collapsed"/>
                         </Trigger>
                         <Trigger Property="IsSelected" Value="True">
-                            <Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}"/>
-                            <Setter Property="Background" Value="{DynamicResource BackgroundBrush}"/>
+                            <Setter TargetName="BorderBack" Property="BorderThickness" Value="4,0,0,0"/>
+                            <Setter TargetName="BorderBack" Property="BorderBrush" Value="{DynamicResource DarkOpacityBrush}"/>
+                            <Setter Property="TextElement.FontWeight" Value="Bold" TargetName="PresenterHeader"/>
+                        </Trigger>
+                        <Trigger SourceName="PanelHeader" Property="IsMouseOver" Value="true">
+                            <Setter TargetName="BorderBack" Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
@@ -30,13 +88,16 @@
     </Style>
 
     <Style x:Key="SideMenuBaseStyle" TargetType="controls:SideMenu">
+        <Setter Property="Background" Value="{DynamicResource RegionBrush}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
-        <Setter Property="ItemContainerStyle" Value="{StaticResource SideMenuItemBaseStyle}"/>
+        <Setter Property="ItemContainerStyle" Value="{StaticResource SideMenuItemHeaderBaseStyle}"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="controls:SideMenu">
-                    <Border Name="BorderRoot">
-                        <StackPanel x:Name="PART_Panel"/>
+                    <Border Name="BorderRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
+                        <ScrollViewer>
+                            <StackPanel x:Name="PART_Panel"/>
+                        </ScrollViewer>
                     </Border>
                 </ControlTemplate>
             </Setter.Value>