Improved RibbonView styles

Yair Aichenbaum · Yair Aichenbaum · commit e9dd45e71185 · 2020-01-23T21:12:51.000-05:00
diff --git a/Files/Controls/RibbonArea.xaml b/Files/Controls/RibbonArea.xaml
@@ -1409,7 +1409,10 @@
                                         <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF271;" />
                                     </AppBarButton.Icon>
                                 </AppBarButton>
-                                <AppBarSeparator Height="40" IsCompact="True" />
+                                <AppBarSeparator
+                                    Height="40"
+                                    IsCompact="True"
+                                    Visibility="{x:Bind RibbonViewModel.AppBarSeparatorVisibility, Mode=OneWay}" />
                                 <AppBarButton
                                     x:Name="DeleteButton"
                                     MinWidth="40"
@@ -1440,7 +1443,10 @@
                                     Label="New Item"
                                     LabelPosition="{x:Bind RibbonViewModel.ItemLabelPosition, Mode=OneWay}"
                                     Style="{StaticResource AppBarButtonRevealStyle}" />
-                                <AppBarSeparator Height="40" IsCompact="True" />
+                                <AppBarSeparator
+                                    Height="40"
+                                    IsCompact="True"
+                                    Visibility="{x:Bind RibbonViewModel.AppBarSeparatorVisibility, Mode=OneWay}" />
                                 <AppBarButton
                                     x:Name="ShowPropertiesButton"
                                     MinWidth="40"
@@ -1464,7 +1470,10 @@
                                     Label="Open With"
                                     LabelPosition="{x:Bind RibbonViewModel.ItemLabelPosition, Mode=OneWay}"
                                     Style="{StaticResource AppBarButtonRevealStyle}" />
-                                <AppBarSeparator Height="40" IsCompact="True" />
+                                <AppBarSeparator
+                                    Height="40"
+                                    IsCompact="True"
+                                    Visibility="{x:Bind RibbonViewModel.AppBarSeparatorVisibility, Mode=OneWay}" />
                                 <AppBarButton
                                     x:Name="ShowFolderPropertiesButton"
                                     MinWidth="40"
@@ -1565,7 +1574,10 @@
                                     Label="Clear All"
                                     LabelPosition="{x:Bind RibbonViewModel.ItemLabelPosition, Mode=OneWay}"
                                     Style="{StaticResource AppBarButtonRevealStyle}" />
-                                <AppBarSeparator Height="40" IsCompact="True" />
+                                <AppBarSeparator
+                                    Height="40"
+                                    IsCompact="True"
+                                    Visibility="{x:Bind RibbonViewModel.AppBarSeparatorVisibility, Mode=OneWay}" />
                                 <AppBarButton
                                     MinWidth="40"
                                     CornerRadius="2"
@@ -1636,7 +1648,7 @@
                                     </StackPanel>
                                     <TextBlock Text="Search within" TextAlignment="Center" />
                                 </StackPanel>
-                                <AppBarSeparator />
+                                <AppBarSeparator Visibility="{x:Bind RibbonViewModel.AppBarSeparatorVisibility, Mode=OneWay}" />
                                 <StackPanel Orientation="Vertical" Spacing="2.5">
                                     <StackPanel Orientation="Horizontal" Spacing="5">
                                         <ComboBox
@@ -1686,7 +1698,7 @@
                                     </StackPanel>
                                     <TextBlock Text="Filter" TextAlignment="Center" />
                                 </StackPanel>
-                                <AppBarSeparator />
+                                <AppBarSeparator Visibility="{x:Bind RibbonViewModel.AppBarSeparatorVisibility, Mode=OneWay}" />
                                 <Button
                                     Width="125"
                                     Background="Transparent"
diff --git a/Files/Controls/RibbonArea.xaml.cs b/Files/Controls/RibbonArea.xaml.cs
@@ -45,6 +45,15 @@ private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChange
                 SearchBoxResizer.Visibility = Visibility.Collapsed;
                 ToolbarGrid.ColumnDefinitions[2].Width = new GridLength(0);
             }
+
+            if (Window.Current.Bounds.Width >= 700)
+            {
+                RibbonViewModel.ShowAppBarSeparator();
+            }
+            else
+            {
+                RibbonViewModel.HideAppBarSeparator();
+            }
         }
 
         private void VisiblePath_TextChanged(object sender, KeyRoutedEventArgs e)
diff --git a/Files/View Models/RibbonViewModel.cs b/Files/View Models/RibbonViewModel.cs
@@ -10,6 +10,8 @@ public class RibbonViewModel : ViewModelBase
         private bool _ShowRibbonContent = true;
         private string _ToggleRibbonIcon = "";
         private CommandBarLabelPosition _ItemLabelPosition = CommandBarLabelPosition.Default;
+        private Windows.UI.Xaml.Visibility _AppBarSeparatorVisibility = Windows.UI.Xaml.Visibility.Visible;
+
         public string ToggleRibbonIcon
         {
             get => _ToggleRibbonIcon;
@@ -28,6 +30,12 @@ public CommandBarLabelPosition ItemLabelPosition
             set => Set(ref _ItemLabelPosition, value);
         }
 
+        public Windows.UI.Xaml.Visibility AppBarSeparatorVisibility
+        {
+            get => _AppBarSeparatorVisibility;
+            set => Set(ref _AppBarSeparatorVisibility, value);
+        }
+
         private RelayCommand toggleRibbon;
         public RelayCommand ToggleRibbon => toggleRibbon = new RelayCommand(() =>
         {
@@ -68,5 +76,15 @@ public void ShowItemLabels()
         {
             ItemLabelPosition = CommandBarLabelPosition.Default;
         }
+
+        public void HideAppBarSeparator()
+        {
+            AppBarSeparatorVisibility = Windows.UI.Xaml.Visibility.Collapsed;
+        }
+
+        public void ShowAppBarSeparator()
+        {
+            AppBarSeparatorVisibility = Windows.UI.Xaml.Visibility.Visible;
+        }
     }
 }

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,8 @@ public class RibbonViewModel : ViewModelBase`
`10`	`10`	`private bool _ShowRibbonContent = true;`
`11`	`11`	`private string _ToggleRibbonIcon = "";`
`12`	`12`	`private CommandBarLabelPosition _ItemLabelPosition = CommandBarLabelPosition.Default;`
	`13`	`+ private Windows.UI.Xaml.Visibility _AppBarSeparatorVisibility = Windows.UI.Xaml.Visibility.Visible;`
	`14`	`+`
`13`	`15`	`public string ToggleRibbonIcon`
`14`	`16`	`{`
`15`	`17`	`get => _ToggleRibbonIcon;`
`@@ -28,6 +30,12 @@ public CommandBarLabelPosition ItemLabelPosition`
`28`	`30`	`set => Set(ref _ItemLabelPosition, value);`
`29`	`31`	`}`
`30`	`32`
	`33`	`+ public Windows.UI.Xaml.Visibility AppBarSeparatorVisibility`
	`34`	`+ {`
	`35`	`+ get => _AppBarSeparatorVisibility;`
	`36`	`+ set => Set(ref _AppBarSeparatorVisibility, value);`
	`37`	`+ }`
	`38`	`+`
`31`	`39`	`private RelayCommand toggleRibbon;`
`32`	`40`	`public RelayCommand ToggleRibbon => toggleRibbon = new RelayCommand(() =>`
`33`	`41`	`{`
`@@ -68,5 +76,15 @@ public void ShowItemLabels()`
`68`	`76`	`{`
`69`	`77`	`ItemLabelPosition = CommandBarLabelPosition.Default;`
`70`	`78`	`}`
	`79`	`+`
	`80`	`+ public void HideAppBarSeparator()`
	`81`	`+ {`
	`82`	`+ AppBarSeparatorVisibility = Windows.UI.Xaml.Visibility.Collapsed;`
	`83`	`+ }`
	`84`	`+`
	`85`	`+ public void ShowAppBarSeparator()`
	`86`	`+ {`
	`87`	`+ AppBarSeparatorVisibility = Windows.UI.Xaml.Visibility.Visible;`
	`88`	`+ }`
`71`	`89`	`}`
`72`	`90`	`}`