UI: 添加若干样式文件

取自 PowerToys

src/Magpie.App/Colors.xaml

@@ -0,0 +1,26 @@
+<!--  Copied from: https://github.com/microsoft/PowerToys/blob/073caffef4c4713207242372ab53b6dbfb468136/src/settings-ui/Settings.UI/Themes/Colors.xaml  -->
+
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Dark">
+            <StaticResource x:Key="CardBackgroundBrush" ResourceKey="CardBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="CardBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
+            <Thickness x:Key="CardBorderThickness">1</Thickness>
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="Light">
+            <StaticResource x:Key="CardBackgroundBrush" ResourceKey="CardBackgroundFillColorDefaultBrush" />
+            <StaticResource x:Key="CardBorderBrush" ResourceKey="CardStrokeColorDefaultBrush" />
+            <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="TextFillColorPrimaryBrush" />
+            <Thickness x:Key="CardBorderThickness">1</Thickness>
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="HighContrast">
+            <StaticResource x:Key="CardBackgroundBrush" ResourceKey="SystemColorButtonFaceColorBrush" />
+            <StaticResource x:Key="CardBorderBrush" ResourceKey="SystemColorButtonTextColorBrush" />
+            <StaticResource x:Key="CardPrimaryForegroundBrush" ResourceKey="SystemColorButtonTextColorBrush" />
+            <Thickness x:Key="CardBorderThickness">2</Thickness>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+</ResourceDictionary>

src/Magpie.App/Generic.xaml

@@ -0,0 +1,6 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="ms-appx:///Controls/Setting.xaml" />
+        <ResourceDictionary Source="ms-appx:///Controls/SettingsGroup.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+</ResourceDictionary>

src/Magpie.App/Magpie.App.vcxproj

@@ -134,6 +134,10 @@
     <ClInclude Include="App.h">
       <DependentUpon>App.xaml</DependentUpon>
     </ClInclude>
+    <ClInclude Include="Setting.h">
+      <DependentUpon>Setting.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
     <ClInclude Include="SettingsPage.h">
       <DependentUpon>SettingsPage.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -178,6 +182,10 @@
       <DependentUpon>App.xaml</DependentUpon>
     </ClCompile>
     <ClCompile Include="$(GeneratedFilesDir)module.g.cpp" />
+    <ClCompile Include="Setting.cpp">
+      <DependentUpon>Setting.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
     <ClCompile Include="SettingsPage.cpp">
       <DependentUpon>SettingsPage.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -202,6 +210,9 @@
     <Midl Include="MicaBrush.idl">
       <SubType>Designer</SubType>
     </Midl>
+    <Midl Include="Setting.idl">
+      <SubType>Designer</SubType>
+    </Midl>
     <Midl Include="SettingsPage.idl">
       <DependentUpon>SettingsPage.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -217,12 +228,24 @@
     <Page Include="AboutPage.xaml">
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Colors.xaml">
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="Generic.xaml">
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="HomePage.xaml">
       <SubType>Designer</SubType>
     </Page>
     <Page Include="MainPage.xaml">
       <SubType>Designer</SubType>
     </Page>
+    <Page Include="Setting.xaml">
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="SettingsExpanderStyles.xaml">
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="SettingsPage.xaml">
       <SubType>Designer</SubType>
     </Page>

src/Magpie.App/Magpie.App.vcxproj.filters

@@ -8,6 +8,9 @@
     <Midl Include="MicaBrush.idl">
       <Filter>Brushes</Filter>
     </Midl>
+    <Midl Include="Setting.idl">
+      <Filter>Controls</Filter>
+    </Midl>
   </ItemGroup>
   <ItemGroup>
     <ClCompile Include="pch.cpp" />
@@ -47,6 +50,9 @@
     <Filter Include="Controls">
       <UniqueIdentifier>{ca435698-7c9e-4784-a031-2c9db29b5fcc}</UniqueIdentifier>
     </Filter>
+    <Filter Include="Themes">
+      <UniqueIdentifier>{be3fc578-6b5a-4b23-8db1-0fc6083e1466}</UniqueIdentifier>
+    </Filter>
   </ItemGroup>
   <ItemGroup>
     <None Include="packages.config" />
@@ -63,5 +69,17 @@
     <Page Include="AboutPage.xaml">
       <Filter>Pages</Filter>
     </Page>
+    <Page Include="Colors.xaml">
+      <Filter>Themes</Filter>
+    </Page>
+    <Page Include="Generic.xaml">
+      <Filter>Themes</Filter>
+    </Page>
+    <Page Include="SettingsExpanderStyles.xaml">
+      <Filter>Themes</Filter>
+    </Page>
+    <Page Include="Setting.xaml">
+      <Filter>Controls</Filter>
+    </Page>
   </ItemGroup>
 </Project>

src/Magpie.App/Setting.cpp

@@ -0,0 +1,10 @@
+#include "pch.h"
+#include "Setting.h"
+#if __has_include("Controls.Setting.g.cpp")
+#include "Controls.Setting.g.cpp"
+#endif
+
+namespace winrt::Magpie::App::Controls::implementation
+{
+    
+}

src/Magpie.App/Setting.h

@@ -0,0 +1,18 @@
+#pragma once
+
+#include "Controls.Setting.g.h"
+
+namespace winrt::Magpie::App::Controls::implementation
+{
+    struct Setting : SettingT<Setting>
+    {
+        Setting() = default;
+    };
+}
+
+namespace winrt::Magpie::App::Controls::factory_implementation
+{
+    struct Setting : SettingT<Setting, implementation::Setting>
+    {
+    };
+}

src/Magpie.App/Setting.idl

@@ -0,0 +1,10 @@
+namespace Magpie.App.Controls
+{
+    [default_interface]
+    [Windows.UI.Xaml.TemplateVisualState("CommonStates", "Normal")]
+    [Windows.UI.Xaml.TemplateVisualState("CommonStates", "Disabled")]
+    runtimeclass Setting : Windows.UI.Xaml.Controls.ContentControl
+    {
+        Setting();
+    }
+}

src/Magpie.App/Setting.xaml

@@ -0,0 +1,110 @@
+<!--  Copied from: https://github.com/microsoft/PowerToys/blob/03b7cb46902a6d1dfcf013bb4ebde0b42273d0f8/src/settings-ui/Settings.UI/Controls/Setting/Setting.xaml  -->
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Magpie.App.Controls">
+
+    <Style TargetType="controls:Setting">
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+        <Setter Property="Background" Value="{ThemeResource CardBackgroundBrush}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource CardBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="Padding" Value="16" />
+        <Setter Property="Margin" Value="0,0,0,0" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:Setting">
+                    <Grid
+                        x:Name="RootGrid"
+                        MinHeight="48"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Center"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
+                            <!--  Icon  -->
+                            <ColumnDefinition Width="*" />
+                            <!--  Header and subtitle  -->
+                            <ColumnDefinition Width="Auto" />
+                            <!--  Action control  -->
+                        </Grid.ColumnDefinitions>
+
+                        <ContentPresenter
+                            x:Name="IconPresenter"
+                            MaxWidth="20"
+                            Margin="2,0,18,0"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            AutomationProperties.AccessibilityView="Raw"
+                            Content="{TemplateBinding Icon}"
+                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                            FontSize="20"
+                            Foreground="{ThemeResource CardPrimaryForegroundBrush}"
+                            IsTextScaleFactorEnabled="False" />
+
+                        <StackPanel
+                            Grid.Column="1"
+                            Margin="0,0,16,0"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Center">
+
+                            <TextBlock
+                                x:Name="HeaderPresenter"
+                                VerticalAlignment="Center"
+                                Foreground="{ThemeResource CardPrimaryForegroundBrush}"
+                                Text="{TemplateBinding Header}" />
+
+                            <ContentPresenter
+                                x:Name="DescriptionPresenter"
+                                Content="{TemplateBinding Description}"
+                                FontSize="{StaticResource SecondaryTextFontSize}"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                TextWrapping="WrapWholeWords">
+                                <ContentPresenter.Resources>
+                                    <Style BasedOn="{StaticResource CaptionTextBlockStyle}" TargetType="TextBlock">
+                                        <Style.Setters>
+                                            <Setter Property="TextWrapping" Value="WrapWholeWords" />
+                                        </Style.Setters>
+                                    </Style>
+                                    <Style BasedOn="{StaticResource TextButtonStyle}" TargetType="HyperlinkButton">
+                                        <Style.Setters>
+                                            <Setter Property="FontSize" Value="12" />
+                                            <Setter Property="Padding" Value="0,0,0,0" />
+                                        </Style.Setters>
+                                    </Style>
+                                </ContentPresenter.Resources>
+                            </ContentPresenter>
+                        </StackPanel>
+
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            Grid.Column="2"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding ActionContent}" />
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="HeaderPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                        <Setter Target="DescriptionPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                        <Setter Target="IconPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

src/Magpie.App/SettingsExpanderStyles.xaml

@@ -0,0 +1,51 @@
+<!--  Copied from: https://github.com/microsoft/PowerToys/blob/35bfb0f83e5fc08cc04398e7aa98d77774412d3f/src/settings-ui/Settings.UI/Themes/SettingsExpanderStyles.xaml  -->
+
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Magpie.App.Controls"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls">
+
+    <!--  Thickness  -->
+    <Thickness x:Key="ExpanderContentPadding">0</Thickness>
+    <Thickness x:Key="ExpanderSettingMargin">56, 8, 40, 8</Thickness>
+
+    <SolidColorBrush x:Key="ExpanderChevronPointerOverBackground">Transparent</SolidColorBrush>
+
+    <!--  Styles  -->
+    <!--  Setting used in a Expander header  -->
+    <Style x:Key="ExpanderHeaderSettingStyle" TargetType="controls:Setting">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="Padding" Value="0,14,0,14" />
+        <Setter Property="Margin" Value="0" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+    </Style>
+
+    <Thickness x:Key="ExpanderChevronMargin">0,0,8,0</Thickness>
+
+    <!--  Setting used in a Expander header  -->
+    <Style x:Key="ExpanderContentSettingStyle" TargetType="controls:Setting">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0,1,0,0" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardBorderBrush}" />
+        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="Padding" Value="{StaticResource ExpanderSettingMargin}" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+    </Style>
+
+    <!--  Setting expander style  -->
+    <Style x:Key="SettingExpanderStyle" TargetType="muxc:Expander">
+        <Setter Property="Background" Value="{ThemeResource CardBackgroundBrush}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource CardBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource CardBorderBrush}" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    </Style>
+
+    <Style x:Key="ExpanderSeparatorStyle" TargetType="Rectangle">
+        <Setter Property="Height" Value="1" />
+        <Setter Property="Stroke" Value="{ThemeResource CardBorderBrush}" />
+    </Style>
+</ResourceDictionary>