[GUI] Add grid settings to GUI and implement grid snapping (#729)

src/SharpEmu.GUI/Themes/Styles/Buttons.axaml

@@ -43,6 +43,23 @@ Shared launcher button variants and page switcher styles.
     <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
   </Style>
 
+  <Style Selector="Button.iconGhost">
+    <Setter Property="Width" Value="32" />
+    <Setter Property="Height" Value="32" />
+    <Setter Property="Padding" Value="0" />
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="{StaticResource CardBorderBrush}" />
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
+    <Setter Property="CornerRadius" Value="8" />
+    <Setter Property="HorizontalContentAlignment" Value="Center" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+  </Style>
+  <Style Selector="Button.iconGhost:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+    <Setter Property="Background" Value="{StaticResource ElevatedBrush}" />
+    <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
+  </Style>
+
   <Style Selector="ToggleButton.ghost">
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="BorderBrush" Value="{StaticResource CardBorderBrush}" />

src/SharpEmu.GUI/Themes/Styles/GameOptions.axaml

@@ -103,6 +103,36 @@ Contextual per-game options reveal, actions, and selected-game motion.
     <Setter Property="Foreground" Value="White" />
   </Style>
 
+  <Style Selector="StackPanel.selectedDetailsHost">
+    <Setter Property="Spacing" Value="18" />
+  </Style>
+
+  <Style Selector="TextBlock.selectedGameTitle">
+    <Setter Property="FontSize" Value="42" />
+  </Style>
+
+  <Style Selector="StackPanel.selectedDetailsHost.gridLayout">
+    <Setter Property="Spacing" Value="12" />
+  </Style>
+
+  <Style Selector="StackPanel.selectedDetailsHost.gridLayout TextBlock.selectedGameTitle">
+    <Setter Property="FontSize" Value="26" />
+  </Style>
+
+  <Style Selector="StackPanel.selectedDetailsHost.gridLayout Button.playButton">
+    <Setter Property="MinHeight" Value="44" />
+    <Setter Property="MinWidth" Value="168" />
+    <Setter Property="Padding" Value="28,10" />
+    <Setter Property="FontSize" Value="15" />
+  </Style>
+
+  <Style Selector="StackPanel.selectedDetailsHost.gridLayout Button.optionsCircle,
+                   StackPanel.selectedDetailsHost.gridLayout ToggleButton.optionsCircle">
+    <Setter Property="Width" Value="44" />
+    <Setter Property="Height" Value="44" />
+    <Setter Property="CornerRadius" Value="22" />
+  </Style>
+
   <Style Selector="Button.gameOptionsLaunch">
     <Setter Property="Width" Value="220" />
     <Setter Property="Height" Value="46" />

src/SharpEmu.GUI/Themes/Styles/Library.axaml

@@ -9,8 +9,25 @@ Cover-art library item states and motion.
   <Style Selector="ListBox.tileGrid">
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Padding" Value="4,0,28,0" />
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
+    <Setter Property="ItemsPanel">
+      <ItemsPanelTemplate>
+        <VirtualizingStackPanel Orientation="Horizontal" />
+      </ItemsPanelTemplate>
+    </Setter>
+  </Style>
+
+  <Style Selector="ListBox.tileGrid.gridLayout">
+    <Setter Property="Padding" Value="4,0,14,0" />
+    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+    <Setter Property="ItemsPanel">
+      <ItemsPanelTemplate>
+        <WrapPanel />
+      </ItemsPanelTemplate>
+    </Setter>
   </Style>
   <Style Selector="ListBox.tileGrid ListBoxItem">
     <Setter Property="Width" Value="160" />
@@ -35,6 +52,25 @@ Cover-art library item states and motion.
       </Transitions>
     </Setter>
   </Style>
+  <!-- The title rides along in the item template so both layouts share one
+       template. The rail hides it because the selected game already names
+       itself in the details below the covers. -->
+  <Style Selector="TextBlock.libraryTileName">
+    <Setter Property="IsVisible" Value="False" />
+    <Setter Property="FontSize" Value="12" />
+    <Setter Property="FontWeight" Value="SemiBold" />
+    <Setter Property="LineHeight" Value="16" />
+    <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
+  </Style>
+  <Style Selector="ListBox.tileGrid.gridLayout TextBlock.libraryTileName">
+    <Setter Property="IsVisible" Value="True" />
+  </Style>
+  <Style Selector="ListBox.tileGrid.gridLayout ListBoxItem">
+    <Setter Property="Height" Value="200" />
+    <Setter Property="Margin" Value="0,6,12,10" />
+    <Setter Property="VerticalContentAlignment" Value="Top" />
+  </Style>
+
   <Style Selector="ListBox.tileGrid ListBoxItem:pointerover,
                    ListBox.tileGrid ListBoxItem:selected">
     <Setter Property="Opacity" Value="1" />