[FZ Editor] Replace ItemsControls with GridViews (#11066)

* LayoutItemsControl to GridView

* ContextMenu

* Added contextmenu items

* Context menu keyboard support

Co-authored-by: Niels Laute <niels9001@hotmail.com>

src/modules/fancyzones/editor/FancyZonesEditor/App.xaml

@@ -10,21 +10,9 @@
                 <ui:ThemeResources />
                 <ui:XamlControlsResources />
                 <ResourceDictionary Source="pack://application:,,,/Styles/ButtonStyles.xaml" />
+                <ResourceDictionary Source="pack://application:,,,/Styles/GridViewStyles.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/Styles/LayoutPreviewStyles.xaml" />
             </ResourceDictionary.MergedDictionaries>
-
-            <Style x:Key="UWPFocusVisualStyle">
-                <Setter Property="Control.Template">
-                    <Setter.Value>
-                        <ControlTemplate>
-                            <Border Margin="-2"
-                                    CornerRadius="4"
-                                    BorderThickness="2"
-                                    BorderBrush="{DynamicResource PrimaryForegroundBrush}" />
-                        </ControlTemplate>
-                    </Setter.Value>
-                </Setter>
-            </Style>
         </ResourceDictionary>
     </Application.Resources>
 </Application>

src/modules/fancyzones/editor/FancyZonesEditor/MainWindow.xaml

@@ -31,48 +31,54 @@
         <Converters:LayoutTypeTemplateToVisibilityConverter x:Key="LayoutTypeTemplateToVisibilityConverter" />
         <Converters:LayoutModelTypeBlankToVisibilityConverter x:Key="LayoutModelTypeBlankToVisibilityConverter" />
         <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
+
+        <ContextMenu x:Key="LayoutContextMenu" Visibility="{Binding Path=Type, Converter={StaticResource LayoutModelTypeBlankToVisibilityConverter}}">
+            <MenuItem Header="{x:Static props:Resources.Edit}"
+                      Click="EditLayout_Click">
+                <MenuItem.Icon>
+                    <ui:FontIcon Glyph="&#xE104;" />
+                </MenuItem.Icon>
+            </MenuItem>
+            <MenuItem Header="{x:Static props:Resources.Edit_zones}"
+                      Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}"
+                      Click="EditZones_Click">
+                <MenuItem.Icon>
+                    <ui:FontIcon Glyph="&#xED35;" />
+                </MenuItem.Icon>
+            </MenuItem>
+
+
+            <MenuItem Header="{x:Static props:Resources.Duplicate}"
+                      Click="DuplicateLayout_Click"
+                      Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
+                <MenuItem.Icon>
+                    <ui:FontIcon Glyph="&#xE8C8;" />
+                </MenuItem.Icon>
+            </MenuItem>
+
+            <MenuItem Header="{x:Static props:Resources.Create_Custom_From_Template}"
+                      Click="DuplicateLayout_Click"
+                      Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeTemplateToVisibilityConverter}}">
+                <MenuItem.Icon>
+                    <ui:FontIcon Glyph="&#xE8C8;" />
+                </MenuItem.Icon>
+            </MenuItem>
+            <Separator Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}" />
+            <MenuItem Header="{x:Static props:Resources.Delete}"
+                      Click="DeleteLayout_Click"
+                      Visibility="{Binding Path=Type, Converter={StaticResource LayoutTypeCustomToVisibilityConverter}}">
+                <MenuItem.Icon>
+                    <ui:FontIcon Glyph="&#xE107;" />
+                </MenuItem.Icon>
+            </MenuItem>
+        </ContextMenu>
         
-        <DropShadowEffect x:Key="CardShadow" BlurRadius="6"
-                          Opacity="0.24"
-                          ShadowDepth="1" />
-
-        <Style x:Key="CardStyle"
-               TargetType="Border">
-            <Setter Property="Background"
-                    Value="{DynamicResource LayoutItemBackgroundBrush}" />
-            <Setter Property="BorderBrush"
-                    Value="{DynamicResource LayoutItemBackgroundBrush}" />
-            <Setter Property="BorderThickness"
-                    Value="2" />
-            <Setter Property="CornerRadius"
-                    Value="4" />
-            <Setter Property="Focusable"
-                    Value="True" />
-            <Setter Property="FocusVisualStyle"
-                    Value="{StaticResource UWPFocusVisualStyle}" />
-            <Setter Property="Border.Effect"
-                    Value="{StaticResource CardShadow}" />
-            <Style.Triggers>
-                <Trigger Property="Border.IsMouseOver"
-                         Value="True">
-                    <Setter Property="Border.Background"
-                            Value="{DynamicResource LayoutItemBackgroundPointerOverBrush}" />
-                    <Setter Property="Border.BorderBrush"
-                            Value="{DynamicResource LayoutItemBackgroundPointerOverBrush}" />
-                </Trigger>
-            </Style.Triggers>
-        </Style>
-
         <DataTemplate x:Key="MonitorItemTemplate">
             <Border x:Name="MonitorItem"
                     Width="{Binding DisplayWidth}"
                     Height="{Binding DisplayHeight}"
                     AutomationProperties.Name="{x:Static props:Resources.Monitor}"
-                    AutomationProperties.HelpText="{Binding Index}"
+                    AutomationProperties.HelpText="{Binding Index}">
-                    Margin="8,2,8,8"
-                    KeyDown="MonitorItem_KeyDown"
-                    MouseDown="MonitorItem_MouseDown"
-                    Style="{StaticResource CardStyle}">
                 <Border.ToolTip>
                     <ToolTip>
                         <StackPanel>
@@ -94,7 +100,7 @@
                                FontWeight="SemiBold"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
-                               Foreground="{DynamicResource PrimaryForegroundBrush}" />
+                               Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}" />
                     <TextBlock Name="ResolutionText"
                                TextTrimming="CharacterEllipsis"
                                Text="{Binding Dimensions}"
@@ -104,114 +110,58 @@
                                FontWeight="SemiBold"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
-                               Foreground="{DynamicResource SecondaryForegroundBrush}" />
+                               Opacity="0.6"
+                               Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}" />
                 </StackPanel>
             </Border>
-            <DataTemplate.Triggers>
+
-                <DataTrigger Binding="{Binding Selected}"
-                             Value="true">
-                    <Setter TargetName="IndexText"
-                            Property="Foreground"
-                            Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
-                    <Setter TargetName="ResolutionText"
-                            Property="Foreground"
-                            Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
-                    
-                    <Setter TargetName="MonitorItem"
-                            Property="BorderBrush"
-                            Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
-                </DataTrigger>
-            </DataTemplate.Triggers>
         </DataTemplate>
 
-
-       
-
         <DataTemplate x:Key="LayoutItemTemplate">
-            <Grid Background="Transparent"
+            <Grid Background="Transparent">
-                  Width="216"
+                <Grid
-                  KeyDown="LayoutItem_KeyDown"
+                      Width="180"
-                  MouseDown="LayoutItem_Click"
+                      Height="140"
-                  Margin="0,0,0,12">
+                      Margin="16">
-
+                    <Grid.RowDefinitions>
-                <Border x:Name="LayoutItem"
+                        <RowDefinition Height="24" />
-                        Style="{StaticResource CardStyle}"
+                        <RowDefinition Height="124" />
-                        Margin="8"
+                        <RowDefinition Height="0" />
-                        FocusManager.GotFocus="LayoutItem_Focused">
+                    </Grid.RowDefinitions>
-
+                    <TextBlock Name="layoutName"
-                    <Grid Margin="16">
+                               TextTrimming="CharacterEllipsis"
-                        <Grid.RowDefinitions>
+                               Text="{Binding Name}"
-                            <RowDefinition Height="24" />
+                               FontSize="15"
-                            <RowDefinition Height="124" />
+                               FontWeight="SemiBold"
-                            <RowDefinition Height="0" />
+                               Margin="0,-4,24,0"
-                        </Grid.RowDefinitions>
+                               ToolTip="{Binding Name}"
-                        <TextBlock Name="layoutName"
+                               Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}" />
-                                   TextTrimming="CharacterEllipsis"
+                    <local:LayoutPreview Grid.Row="1"
-                                   Text="{Binding Name}"
+                                         Margin="0,8,0,8"
-                                   FontSize="15"
+                                         VerticalAlignment="Stretch"
-                                   Grid.Row="0"
+                                         HorizontalAlignment="Stretch" />
-                                   FontWeight="SemiBold"
+                </Grid>
-                                   HorizontalAlignment="Left"
+                <Button Content="&#xE104;"
-                                   VerticalAlignment="Top"
+                        x:Name="EditLayoutButton"
-                                   Margin="0,-4,24,0"
+                        FontFamily="Segoe MDL2 Assets"
-                                   ToolTip="{Binding Name}"
+                        FontSize="14"
-                                   Foreground="{DynamicResource PrimaryForegroundBrush}" />
+                        HorizontalAlignment="Right"
-
+                        VerticalAlignment="Top"
-                        <Button Content="&#xE104;"
+                        Margin="4"
-                                x:Name="EditLayoutButton"
+                        Height="36"
-                                FontFamily="Segoe MDL2 Assets"
+                        Width="36"
-                                FontSize="14"
+                        Padding="0"
-                                HorizontalAlignment="Right"
+                        Grid.RowSpan="4"
-                                VerticalAlignment="Bottom"
+                        BorderBrush="Transparent"
-                                Margin="-8,-16,-8,0"
+                        Click="EditLayout_Click"
-                                Height="36"
+                        Background="Transparent"
-                                Width="36"
+                        Visibility="{Binding Path=Type, Converter={StaticResource LayoutModelTypeBlankToVisibilityConverter}}"
-                                Padding="0"
+                        Foreground="{Binding (TextElement.Foreground), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}}"
-                                BorderBrush="Transparent"
+                        ToolTip="{x:Static props:Resources.Edit}"
-                                Click="EditLayout_Click"
+                        AutomationProperties.Name="{x:Static props:Resources.Edit}"
-                                Background="Transparent"
+                        Style="{StaticResource AccentButtonStyle}"
-                                Visibility="{Binding Path=Type, Converter={StaticResource LayoutModelTypeBlankToVisibilityConverter}}"
+                        ui:ControlHelper.CornerRadius="36" />
-                                Foreground="{DynamicResource PrimaryForegroundBrush}"
-                                ToolTip="{x:Static props:Resources.Edit_Layout}"
-                                AutomationProperties.Name="{x:Static props:Resources.Edit_Layout}"
-                                Style="{StaticResource AccentButtonStyle}"
-                                ui:ControlHelper.CornerRadius="36">
-                        </Button>
-
-                        <local:LayoutPreview Grid.Row="1"
-                                             Margin="0,8,0,8"
-                                             VerticalAlignment="Stretch"
-                                             HorizontalAlignment="Stretch" />
-                    </Grid>
-                </Border>
-                <Border x:Name="SelectionHighlight"
-                        CornerRadius="4"
-                        BorderThickness="3"
-                        Margin="6"
-                        Visibility="Collapsed"
-                        BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}" />
             </Grid>
-            <DataTemplate.Triggers>
-                <DataTrigger Binding="{Binding IsApplied}"
-                             Value="true">
-                    <Setter TargetName="layoutName"
-                            Property="Foreground"
-                            Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
-                    <Setter TargetName="SelectionHighlight"
-                            Property="Visibility"
-                            Value="Visible" />
-                </DataTrigger>
-                <DataTrigger Binding="{Binding IsSelected}"
-                             Value="true">
-                    <Setter TargetName="LayoutItem"
-                            Property="BorderBrush"
-                            Value="{DynamicResource LayoutItemBorderPointerOverBrush}" />
-
-                    <Setter TargetName="EditLayoutButton"
-                            Property="Foreground"
-                            Value="{DynamicResource SystemControlBackgroundAccentBrush}" />
-                </DataTrigger>
-            </DataTemplate.Triggers>
         </DataTemplate>
     </Window.Resources>
 
@@ -221,8 +171,6 @@
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
 
-
-
         <Grid Grid.Row="1"
               Background="{DynamicResource PrimaryBackgroundBrush}">
             <ScrollViewer>
@@ -240,20 +188,25 @@
                                FontWeight="SemiBold"
                                FontSize="24" />
 
-                    <ItemsControl ItemsSource="{Binding DefaultModels}"
+                    <ui:GridView ItemsSource="{Binding DefaultModels}"
-                                  Grid.Row="1"
+                                 Grid.Row="1"
-                                  ItemTemplate="{StaticResource LayoutItemTemplate}"
+                                 ItemTemplate="{StaticResource LayoutItemTemplate}"
-                                  AutomationProperties.LabeledBy="{Binding ElementName=TemplatesHeaderBlock}"
+                                 AutomationProperties.LabeledBy="{Binding ElementName=TemplatesHeaderBlock}"
-                                  TabIndex="4"
+                                 TabIndex="1"
-                                  x:Name="DefaultModelsItemsControl"
+                                 IsItemClickEnabled="True"
-                                  Margin="-8,8,-8,0">
+                                 SelectionMode="Single"
-                        <ItemsControl.ItemsPanel>
+                                 IsSelectionEnabled="True"
-                            <ItemsPanelTemplate>
+                                 ItemClick="Layout_ItemClick"
-                                <WrapPanel Orientation="Horizontal"
+                                 Margin="-8,8,-8,0">
-                                           x:Name="DefaultModelsWrapPanel" />
+                        <ui:GridView.ItemContainerStyle>
-                            </ItemsPanelTemplate>
+                            <Style BasedOn="{StaticResource LayoutItemContainerStyle}"
-                        </ItemsControl.ItemsPanel>
+                                   TargetType="ui:GridViewItem">
-                    </ItemsControl>
+                                <Setter Property="ContextMenu"
+                                        Value="{StaticResource LayoutContextMenu}">
+                                </Setter>
+                            </Style>
+                        </ui:GridView.ItemContainerStyle>
+                    </ui:GridView>
 
                     <TextBlock Text="{x:Static props:Resources.Custom}"
                                x:Name="CustomHeaderBlock"
@@ -289,20 +242,27 @@
                             Data="M45,48H25.5V45H45V25.5H25.5v-3H45V3H25.5V0H48V48ZM22.5,48H3V45H22.5V3H3V0H25.5V48ZM0,48V0H3V48Z" />
                         <TextBlock Text="{x:Static props:Resources.No_Custom_Layouts_Message}" Margin="0,16,0,0" Foreground="{DynamicResource SecondaryForegroundBrush}" />
                     </StackPanel>
-                    <ItemsControl ItemsSource="{Binding CustomModels}"
+                    <ui:GridView ItemsSource="{Binding CustomModels}"
-                                  TabIndex="6"
+                                 TabIndex="2"
-                                  AutomationProperties.LabeledBy="{Binding ElementName=CustomHeaderBlock}"
+                                 ItemTemplate="{StaticResource LayoutItemTemplate}"
-                                  ItemTemplate="{StaticResource LayoutItemTemplate}"
+                                 IsSelectionEnabled="True"
-                                  Margin="-8,12,-8,0"
+                                 SelectionMode="Single"
-                                  Grid.Row="4">
+                                 IsItemClickEnabled="True"
-                        <ItemsControl.ItemsPanel>
+                                 ItemClick="Layout_ItemClick"
-                            <ItemsPanelTemplate>
+                                 AutomationProperties.LabeledBy="{Binding ElementName=CustomHeaderBlock}"
-                                <WrapPanel Orientation="Horizontal"
+                                 Margin="-8,8,-8,0"
-                                           x:Name="CustomModelsWrapPanel" />
+                                 Grid.Row="4">
-                            </ItemsPanelTemplate>
+                        <ui:GridView.ItemContainerStyle>
-                        </ItemsControl.ItemsPanel>
+                            <Style BasedOn="{StaticResource LayoutItemContainerStyle}"
-                    </ItemsControl>
+                                   TargetType="ui:GridViewItem">
-                   
+                                <Setter Property="ContextMenu"
+                                        Value="{StaticResource LayoutContextMenu}">
+                                </Setter>
+                            </Style>
+                        </ui:GridView.ItemContainerStyle>
+                    </ui:GridView>
+
+
                 </Grid>
             </ScrollViewer>
 
@@ -311,7 +271,7 @@
                     HorizontalAlignment="Right"
                     VerticalAlignment="Bottom"
                     AutomationProperties.Name="{x:Static props:Resources.Create_new_layout}"
-                    TabIndex="5"
+                    TabIndex="3"
                     Padding="0"
                     Height="36"
                     Margin="16"
@@ -350,19 +310,15 @@
                     <local1:MonitorViewModel x:Name="monitorViewModel" />
                 </ScrollViewer.DataContext>
                 <Grid>
-                    <ItemsControl x:Name="MainWindowItemControl"
+                    <ui:GridView TabIndex="0"
-                                  TabIndex="0"
+                                 HorizontalAlignment="Center"
-                                  ItemTemplate="{StaticResource MonitorItemTemplate}"
+                                 IsSelectionEnabled="True"
-                                  ItemsSource="{Binding MonitorInfoForViewModel}">
+                                 SelectionMode="Single"
-                        <ItemsControl.ItemsPanel>
+                                 IsItemClickEnabled="True"
-                            <ItemsPanelTemplate>
+                                 ItemClick="Monitor_ItemClick"
-                                <StackPanel Background="Transparent"
+                                 ItemContainerStyle="{StaticResource MonitorItemContainerStyle}"
-                                            Orientation="Horizontal"
+                                 ItemTemplate="{StaticResource MonitorItemTemplate}"
-                                            HorizontalAlignment="Center"
+                                 ItemsSource="{Binding MonitorInfoForViewModel}" />
-                                            Margin="8, 0, 8, 16" />
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                    </ItemsControl>
                 </Grid>
             </ScrollViewer>
         </Grid>

src/modules/fancyzones/editor/FancyZonesEditor/MainWindow.xaml.cs

@@ -104,13 +104,6 @@ namespace FancyZonesEditor
             // Select(((Grid)sender).DataContext as LayoutModel);
         }
 
-        private void LayoutItem_Click(object sender, MouseButtonEventArgs e)
-        {
-            LayoutModel selectedLayoutModel = ((Grid)sender).DataContext as LayoutModel;
-            Select(selectedLayoutModel);
-            Apply();
-        }
-
         private void LayoutItem_Focused(object sender, RoutedEventArgs e)
         {
             // Ignore focus on Edit button click
@@ -261,6 +254,8 @@ namespace FancyZonesEditor
 
         private void EditZones_Click(object sender, RoutedEventArgs e)
         {
+            var dataContext = ((FrameworkElement)sender).DataContext;
+            Select((LayoutModel)dataContext);
             EditLayoutDialog.Hide();
             var mainEditor = App.Overlay;
             if (!(mainEditor.CurrentDataContext is LayoutModel model))
@@ -332,19 +327,6 @@ namespace FancyZonesEditor
             InvalidateVisual();
         }
 
-        private void MonitorItem_KeyDown(object sender, KeyEventArgs e)
-        {
-            if (e.Key == Key.Return || e.Key == Key.Space)
-            {
-                monitorViewModel.SelectCommand.Execute((MonitorInfoModel)(sender as Border).DataContext);
-            }
-        }
-
-        private void MonitorItem_MouseDown(object sender, MouseButtonEventArgs e)
-        {
-            monitorViewModel.SelectCommand.Execute((MonitorInfoModel)(sender as Border).DataContext);
-        }
-
         // EditLayout: Cancel changes
         private void EditLayoutDialog_SecondaryButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
         {
@@ -380,12 +362,12 @@ namespace FancyZonesEditor
 
         private async void DeleteLayout(FrameworkElement element)
         {
-            var dialog = new ModernWpf.Controls.ContentDialog()
+            var dialog = new ContentDialog()
             {
-                Title = FancyZonesEditor.Properties.Resources.Are_You_Sure,
+                Title = Properties.Resources.Are_You_Sure,
-                Content = FancyZonesEditor.Properties.Resources.Are_You_Sure_Description,
+                Content = Properties.Resources.Are_You_Sure_Description,
-                PrimaryButtonText = FancyZonesEditor.Properties.Resources.Delete,
+                PrimaryButtonText = Properties.Resources.Delete,
-                SecondaryButtonText = FancyZonesEditor.Properties.Resources.Cancel,
+                SecondaryButtonText = Properties.Resources.Cancel,
             };
 
             var result = await dialog.ShowAsync();
@@ -430,5 +412,16 @@ namespace FancyZonesEditor
                 e.Handled = true;
             }
         }
+
+        private void Layout_ItemClick(object sender, ItemClickEventArgs e)
+        {
+            Select(e.ClickedItem as LayoutModel);
+            Apply();
+        }
+
+        private void Monitor_ItemClick(object sender, ItemClickEventArgs e)
+        {
+            monitorViewModel.SelectCommand.Execute(e.ClickedItem as MonitorInfoModel);
+        }
     }
 }

src/modules/fancyzones/editor/FancyZonesEditor/Properties/Resources.Designer.cs

@@ -286,7 +286,7 @@ namespace FancyZonesEditor.Properties {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Edit zone layout.
+        ///   Looks up a localized string similar to Edit zones.
         /// </summary>
         public static string Edit_zones {
             get {

src/modules/fancyzones/editor/FancyZonesEditor/Properties/Resources.resx

@@ -148,9 +148,6 @@
     <value>Highlight distance</value>
     <comment>Distance of when an adjacent zone should light up when the window is close to it</comment>
   </data>
-  <data name="Edit_Layout" xml:space="preserve">
-    <value>Edit layout</value>
-  </data>
   <data name="Fancy_Zones_Editor_App_Title" xml:space="preserve">
     <value>FancyZones Editor</value>
   </data>
@@ -295,7 +292,7 @@
     <value>Are you sure you want to delete this layout?</value>
   </data>
   <data name="Edit_zones" xml:space="preserve">
-    <value>Edit zone layout</value>
+    <value>Edit zones</value>
   </data>
   <data name="No_Custom_Layouts_Message" xml:space="preserve">
     <value>Create or duplicate a layout to get started</value>
@@ -360,4 +357,7 @@
   <data name="QuickKey_Title" xml:space="preserve">
     <value>Layout shortcut</value>
   </data>
+  <data name="Edit_Layout" xml:space="preserve">
+    <value>Edit layout</value>
+  </data>
 </root>

src/modules/fancyzones/editor/FancyZonesEditor/Styles/GridViewStyles.xaml

@@ -0,0 +1,337 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:ui="http://schemas.modernwpf.com/2019">
+
+    <Style x:Key="UWPFocusVisualStyle">
+        <Setter Property="Control.Template">
+            <Setter.Value>
+                <ControlTemplate>
+                    <Border Margin="-2"
+                            CornerRadius="4"
+                            BorderThickness="2"
+                            BorderBrush="{DynamicResource PrimaryForegroundBrush}" />
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    
+    <DropShadowEffect x:Key="CardDropShadow"
+                      BlurRadius="6"
+                      Opacity="0.24"
+                      ShadowDepth="1" />
+
+    <Style x:Key="MonitorItemContainerStyle"
+           TargetType="ui:GridViewItem">
+        <Setter Property="Background"
+                Value="{DynamicResource LayoutItemBackgroundBrush}" />
+        <Setter Property="IsSelected"
+                Value="{Binding Selected, Mode=OneWay}" />
+        <Setter Property="AutomationProperties.Name"
+                Value="{Binding Index}" />
+        <Setter Property="KeyboardNavigation.TabNavigation"
+                Value="Local" />
+        <Setter Property="MinWidth"
+                Value="0" />
+        <Setter Property="MinHeight"
+                Value="0" />
+        <!--<Setter Property="IsHoldingEnabled" Value="True" />-->
+        <Setter Property="CornerRadius"
+                Value="4" />
+        <Setter Property="Margin"
+                Value="8" />
+        <Setter Property="UseSystemFocusVisuals"
+                Value="{DynamicResource UseSystemFocusVisuals}" />
+        <Setter Property="FocusVisualMargin"
+                Value="-2" />
+        <Setter Property="FocusVisualStyle"
+                Value="{DynamicResource UWPFocusVisualStyle}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ui:GridViewItem">
+                    <Border x:Name="ContentBorder"
+                            Height="{Binding DisplayHeight}"
+                            Width="{Binding DisplayWidth}"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
+                            Effect="{StaticResource CardDropShadow}">
+                        <VisualStateManager.CustomVisualStateManager>
+                            <ui:SimpleVisualStateManager />
+                        </VisualStateManager.CustomVisualStateManager>
+
+                        <Grid>
+                            <ContentPresenter x:Name="ContentPresenter"
+                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                              Margin="{TemplateBinding Padding}"
+                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+                            <Border x:Name="BorderRectangle"
+                                    IsHitTestVisible="False"
+                                    BorderBrush="{DynamicResource SystemControlHighlightListAccentLowBrush}"
+                                    BorderThickness="2"
+                                    CornerRadius="4"
+                                    Opacity="0" />
+                        </Grid>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <!-- Focused -->
+                        <Trigger Property="ui:FocusVisualHelper.ShowFocusVisual"
+                                 Value="True">
+                            <Setter TargetName="BorderRectangle"
+                                    Property="Visibility"
+                                    Value="Collapsed" />
+                        </Trigger>
+
+                        <MultiDataTrigger>
+                            <MultiDataTrigger.Conditions>
+                                <Condition Binding="{Binding Selected}"
+                                           Value="True" />
+
+                            </MultiDataTrigger.Conditions>
+                            <Setter TargetName="ContentPresenter"
+                                    Property="TextElement.Foreground"
+                                    Value="{DynamicResource SystemControlHighlightAccentBrush}" />
+                            <Setter TargetName="BorderRectangle"
+                                    Property="Opacity"
+                                    Value="1" />
+                            <Setter TargetName="BorderRectangle"
+                                    Property="BorderBrush"
+                                    Value="{DynamicResource SystemControlHighlightAccentBrush}" />
+                        </MultiDataTrigger>
+
+                        <!-- PointerOver -->
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="IsMouseOver"
+                                           Value="True" />
+                                <Condition Property="IsSelected"
+                                           Value="False" />
+                            </MultiTrigger.Conditions>
+                            <Setter TargetName="BorderRectangle"
+                                    Property="Opacity"
+                                    Value="1" />
+                            <Setter TargetName="BorderRectangle"
+                                    Property="BorderBrush"
+                                    Value="{DynamicResource SystemControlHighlightListLowBrush}" />
+                            <Setter TargetName="ContentPresenter"
+                                    Property="TextElement.Foreground"
+                                    Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+                            <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryBrush"
+                                    Value="{DynamicResource SystemControlHighlightListLowBrush}" />
+                            <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryThickness"
+                                    Value="2" />
+                        </MultiTrigger>
+                        <!-- Selected -->
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="IsMouseOver"
+                                           Value="False" />
+                                <Condition Property="IsSelected"
+                                           Value="True" />
+                            </MultiTrigger.Conditions>
+
+                            <!--<Setter TargetName="BorderRectangle"
+                                        Property="Opacity"
+                                        Value="1" />
+                                <Setter TargetName="BorderRectangle"
+                                        Property="Stroke"
+                                        Value="{DynamicResource SystemControlHighlightAccentBrush}" />
+                                <Setter TargetName="ContentPresenter"
+                                        Property="TextElement.Foreground"
+                                        Value="{DynamicResource SystemControlHighlightAccentBrush}" />
+                                <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryBrush"
+                                        Value="{DynamicResource SystemControlHighlightAccentBrush}" />
+                                <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryThickness"
+                                        Value="2" />-->
+
+                        </MultiTrigger>
+                        <!-- PointerOverSelected -->
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="IsMouseOver"
+                                           Value="True" />
+                                <Condition Property="IsSelected"
+                                           Value="True" />
+                            </MultiTrigger.Conditions>
+
+                            <Setter TargetName="BorderRectangle"
+                                    Property="Opacity"
+                                    Value="1" />
+                            <Setter TargetName="BorderRectangle"
+                                    Property="BorderBrush"
+                                    Value="{DynamicResource SystemControlHighlightListAccentMediumBrush}" />
+                            <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryBrush"
+                                    Value="{DynamicResource SystemControlHighlightListAccentMediumBrush}" />
+                            <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryThickness"
+                                    Value="2" />
+
+                        </MultiTrigger>
+                        <!-- Disabled -->
+                        <Trigger Property="IsEnabled"
+                                 Value="False">
+                            <Setter TargetName="ContentBorder"
+                                    Property="Opacity"
+                                    Value="{DynamicResource ListViewItemDisabledThemeOpacity}" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <Style x:Key="LayoutItemContainerStyle"
+           TargetType="ui:GridViewItem">
+        <Setter Property="Background"
+                Value="{DynamicResource LayoutItemBackgroundBrush}" />
+        <Setter Property="IsSelected"
+                Value="{Binding IsApplied, Mode=OneWay}" />
+        <Setter Property="AutomationProperties.Name"
+                Value="{Binding Name}" />
+        <Setter Property="KeyboardNavigation.TabNavigation"
+                Value="Local" />
+        <!--<Setter Property="IsHoldingEnabled" Value="True" />-->
+        <Setter Property="CornerRadius"
+                Value="4" />
+        <Setter Property="Margin"
+                Value="8" />
+        <Setter Property="UseSystemFocusVisuals"
+                Value="{DynamicResource UseSystemFocusVisuals}" />
+        <Setter Property="FocusVisualMargin"
+                Value="-2" />
+        <Setter Property="FocusVisualStyle"
+                Value="{DynamicResource UWPFocusVisualStyle}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="ui:GridViewItem">
+                    <Border x:Name="ContentBorder"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
+                            Effect="{StaticResource CardDropShadow}">
+                        <VisualStateManager.CustomVisualStateManager>
+                            <ui:SimpleVisualStateManager />
+                        </VisualStateManager.CustomVisualStateManager>
+
+                        <Grid>
+                            <ContentPresenter x:Name="ContentPresenter"
+                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                              Margin="{TemplateBinding Padding}"
+                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
+                            <Border x:Name="BorderRectangle"
+                                    IsHitTestVisible="False"
+                                    BorderBrush="{DynamicResource SystemControlHighlightListAccentLowBrush}"
+                                    BorderThickness="2"
+                                    CornerRadius="4"
+                                    Opacity="0" />
+                        </Grid>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <!-- Focused -->
+                        <Trigger Property="ui:FocusVisualHelper.ShowFocusVisual"
+                                 Value="True">
+                            <Setter TargetName="BorderRectangle"
+                                    Property="Visibility"
+                                    Value="Collapsed" />
+                        </Trigger>
+
+                        <MultiDataTrigger>
+                            <MultiDataTrigger.Conditions>
+                                <Condition Binding="{Binding IsApplied}"
+                                           Value="True" />
+
+                            </MultiDataTrigger.Conditions>
+                            <Setter TargetName="ContentPresenter"
+                                    Property="TextElement.Foreground"
+                                    Value="{DynamicResource SystemControlHighlightAccentBrush}" />
+                            <Setter TargetName="BorderRectangle"
+                                    Property="Opacity"
+                                    Value="1" />
+                            <Setter TargetName="BorderRectangle"
+                                    Property="BorderBrush"
+                                    Value="{DynamicResource SystemControlHighlightAccentBrush}" />
+                        </MultiDataTrigger>
+
+                        <!-- PointerOver -->
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="IsMouseOver"
+                                           Value="True" />
+                                <Condition Property="IsSelected"
+                                           Value="False" />
+                            </MultiTrigger.Conditions>
+                            <Setter TargetName="BorderRectangle"
+                                    Property="Opacity"
+                                    Value="1" />
+                            <Setter TargetName="BorderRectangle"
+                                    Property="BorderBrush"
+                                    Value="{DynamicResource SystemControlHighlightListLowBrush}" />
+                            <Setter TargetName="ContentPresenter"
+                                    Property="TextElement.Foreground"
+                                    Value="{DynamicResource SystemControlForegroundBaseHighBrush}" />
+                            <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryBrush"
+                                    Value="{DynamicResource SystemControlHighlightListLowBrush}" />
+                            <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryThickness"
+                                    Value="2" />
+                        </MultiTrigger>
+                        <!-- Selected -->
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="IsMouseOver"
+                                           Value="False" />
+                                <Condition Property="IsSelected"
+                                           Value="True" />
+                            </MultiTrigger.Conditions>
+
+                            <!--<Setter TargetName="BorderRectangle"
+                                        Property="Opacity"
+                                        Value="1" />
+                                <Setter TargetName="BorderRectangle"
+                                        Property="Stroke"
+                                        Value="{DynamicResource SystemControlHighlightAccentBrush}" />
+                                <Setter TargetName="ContentPresenter"
+                                        Property="TextElement.Foreground"
+                                        Value="{DynamicResource SystemControlHighlightAccentBrush}" />
+                                <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryBrush"
+                                        Value="{DynamicResource SystemControlHighlightAccentBrush}" />
+                                <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryThickness"
+                                        Value="2" />-->
+
+                        </MultiTrigger>
+                        <!-- PointerOverSelected -->
+                        <MultiTrigger>
+                            <MultiTrigger.Conditions>
+                                <Condition Property="IsMouseOver"
+                                           Value="True" />
+                                <Condition Property="IsSelected"
+                                           Value="True" />
+                            </MultiTrigger.Conditions>
+
+                            <Setter TargetName="BorderRectangle"
+                                    Property="Opacity"
+                                    Value="1" />
+                            <Setter TargetName="BorderRectangle"
+                                    Property="BorderBrush"
+                                    Value="{DynamicResource SystemControlHighlightListAccentMediumBrush}" />
+                            <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryBrush"
+                                    Value="{DynamicResource SystemControlHighlightListAccentMediumBrush}" />
+                            <Setter Property="ui:FocusVisualHelper.FocusVisualSecondaryThickness"
+                                    Value="2" />
+
+                        </MultiTrigger>
+                        <!-- Disabled -->
+                        <Trigger Property="IsEnabled"
+                                 Value="False">
+                            <Setter TargetName="ContentBorder"
+                                    Property="Opacity"
+                                    Value="{DynamicResource ListViewItemDisabledThemeOpacity}" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>