Make UI more compliant with Windows 11 design (#26)

* Make UI more compliant with Windows 11 design. * Fix to 2-space indent.
M2Team · Nov 20, 2024 · 6aad691 · 6aad691
1 parent 804aa5a
commit 6aad691
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 6 deletions.
diff --git a/NanaBox/App.xaml b/NanaBox/App.xaml
@@ -8,6 +8,9 @@
       <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="ms-appx:///Mile.Xaml.Styles.SunValley.xbf" />
       </ResourceDictionary.MergedDictionaries>
+      <Style TargetType="local:ProgressRing">
+        <Setter Property="Foreground" Value="{ThemeResource AccentFillColorDefaultBrush}" />
+      </Style>
     </ResourceDictionary>
   </Application.Resources>
 </Application>
diff --git a/NanaBox/NanaBox.vcxproj b/NanaBox/NanaBox.vcxproj
@@ -68,6 +68,10 @@
       <DependentUpon>NewVirtualHardDiskPage.xaml</DependentUpon>
       <SubType>Code</SubType>
     </ClCompile>
+    <ClCompile Include="ProgressRing.cpp">
+      <DependentUpon>ProgressRing.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClCompile>
     <ClCompile Include="QuickStartPage.cpp">
       <DependentUpon>QuickStartPage.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -128,6 +132,9 @@
       <DependentUpon>NewVirtualHardDiskPage.xaml</DependentUpon>
       <SubType>Code</SubType>
     </Midl>
+    <Midl Include="ProgressRing.idl">
+      <SubType>Code</SubType>
+    </Midl>
     <Midl Include="QuickStartPage.idl">
       <DependentUpon>QuickStartPage.xaml</DependentUpon>
       <SubType>Code</SubType>
@@ -175,6 +182,10 @@
       <SubType>Code</SubType>
     </ClInclude>
     <ClInclude Include="pch.h" />
+    <ClInclude Include="ProgressRing.h">
+      <DependentUpon>ProgressRing.idl</DependentUpon>
+      <SubType>Code</SubType>
+    </ClInclude>
     <ClInclude Include="QuickStartPage.h">
       <DependentUpon>QuickStartPage.xaml</DependentUpon>
       <SubType>Code</SubType>

diff --git a/NanaBox/NanaBox.vcxproj.filters b/NanaBox/NanaBox.vcxproj.filters
@@ -160,4 +160,7 @@
       <Filter>Strings\zh-Hans</Filter>
     </PRIResource>
   </ItemGroup>
+  <ItemGroup>
+    <Midl Include="ProgressRing.idl" />
+  </ItemGroup>
 </Project>
diff --git a/NanaBox/NewVirtualHardDiskPage.xaml b/NanaBox/NewVirtualHardDiskPage.xaml
@@ -24,7 +24,7 @@
         x:Uid="/NewVirtualHardDiskPage/ContentTextBlock"
         Text="[You can create a VHD (up to 2040 GiB) or VHDX (up to 64 TiB, but not supported before Windows 8) dynamically expanding virtual hard disk with this dialog.]"
         TextWrapping="Wrap" />
-      <Grid Padding="0,2,0,0">
+      <Grid Padding="0,2,0,0" ColumnSpacing="8">
         <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="auto" />
@@ -45,7 +45,7 @@
         x:Uid="/NewVirtualHardDiskPage/SizeTextBlock"
         Padding="0,2"
         Text="Size (at least 3 MiB and must be a multiple of 512 bytes)" />
-      <Grid Padding="0,2,0,0">
+      <Grid Padding="0,2,0,0" ColumnSpacing="8">
         <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="144" />

diff --git a/NanaBox/ProgressRing.cpp b/NanaBox/ProgressRing.cpp
@@ -0,0 +1,114 @@
+#include "pch.h"
+#include "ProgressRing.h"
+#if __has_include("ProgressRing.g.cpp")
+#include "ProgressRing.g.cpp"
+#endif
+
+namespace winrt::NanaBox::implementation
+{
+    ProgressRing::ProgressRing()
+    {
+        m_compositor = Windows::UI::Xaml::Hosting::ElementCompositionPreview::GetElementVisual(*this).Compositor();
+
+        auto ellipse = m_compositor.CreateEllipseGeometry();
+        ellipse.Radius({ 7, 7 });
+
+        m_shape = m_compositor.CreateSpriteShape(ellipse);
+        m_shape.StrokeDashCap(Windows::UI::Composition::CompositionStrokeCap::Round);
+        m_shape.StrokeStartCap(Windows::UI::Composition::CompositionStrokeCap::Round);
+        m_shape.StrokeEndCap(Windows::UI::Composition::CompositionStrokeCap::Round);
+        m_shape.StrokeThickness(m_strokeThickness);
+        m_shape.TransformMatrix({ 5.0f, 0.0f, 0.0f, 5.0f, 40.0f, 40.0f });
+
+        m_visual = m_compositor.CreateShapeVisual();
+        m_visual.Size({ m_defaultProgressRingSize, m_defaultProgressRingSize });
+        m_visual.Shapes().Append(m_shape);
+
+        Windows::UI::Xaml::Hosting::ElementCompositionPreview::SetElementChildVisual(*this, m_visual);
+
+        auto holdThenStepEasing = m_compositor.CreateStepEasingFunction();
+        holdThenStepEasing.IsFinalStepSingleFrame(true);
+
+        auto cubicBezierEasing = m_compositor.CreateCubicBezierEasingFunction({ 0.166999996f, 0.166999996f }, { 0.833000004f, 0.833000004f });
+
+        auto rotationAnimation = m_compositor.CreateScalarKeyFrameAnimation();
+        rotationAnimation.InsertKeyFrame(0.0f, 0.0f, holdThenStepEasing);
+        rotationAnimation.InsertKeyFrame(0.5f, 450.0f, cubicBezierEasing);
+        rotationAnimation.InsertKeyFrame(1.0f, 1080.0f, cubicBezierEasing);
+        rotationAnimation.Duration(Windows::Foundation::TimeSpan{ std::chrono::seconds(2) });
+        rotationAnimation.IterationBehavior(Windows::UI::Composition::AnimationIterationBehavior::Forever);
+
+        auto sizeAnimation = m_compositor.CreateScalarKeyFrameAnimation();
+        sizeAnimation.InsertKeyFrame(0.0f, 0.0f, holdThenStepEasing);
+        sizeAnimation.InsertKeyFrame(0.5f, 0.5f, cubicBezierEasing);
+        sizeAnimation.InsertKeyFrame(1.0f, 0.0f, cubicBezierEasing);
+        sizeAnimation.Duration(Windows::Foundation::TimeSpan{ std::chrono::seconds(2) });
+        sizeAnimation.IterationBehavior(Windows::UI::Composition::AnimationIterationBehavior::Forever);
+
+        m_shape.StartAnimation(L"RotationAngleInDegrees", rotationAnimation);
+        ellipse.StartAnimation(L"TrimEnd", sizeAnimation);
+    }
+
+    Windows::Foundation::Size ProgressRing::MeasureOverride(Windows::Foundation::Size const& availableSize)
+    {
+        auto size = availableSize.Width > availableSize.Height ? availableSize.Height : availableSize.Width;
+        if (size == INFINITY)
+        {
+            size = m_defaultProgressRingSize;
+        }
+
+        return { size, size };
+    }
+
+    Windows::Foundation::Size ProgressRing::ArrangeOverride(Windows::Foundation::Size const& finalSize)
+    {
+        auto size = finalSize.Width > finalSize.Height ? finalSize.Height : finalSize.Width;
+
+        float scale = size / m_defaultProgressRingSize;
+        m_visual.Scale({ scale, scale, scale });
+
+        float widthOffset = (finalSize.Width - size) / 2;
+        float heightOffset = (finalSize.Height - size) / 2;
+        m_visual.Offset({ widthOffset, heightOffset, 0.0f });
+
+        return finalSize;
+    }
+
+    Windows::UI::Xaml::DependencyProperty ProgressRing::m_foregroundProperty =
+        Windows::UI::Xaml::DependencyProperty::Register(
+            L"Foreground",
+            winrt::xaml_typename<Windows::UI::Xaml::Media::SolidColorBrush>(),
+            winrt::xaml_typename<NanaBox::ProgressRing>(),
+            Windows::UI::Xaml::PropertyMetadata{ nullptr, &OnForegroundChanged }
+        );
+
+    void ProgressRing::OnForegroundChanged(Windows::UI::Xaml::DependencyObject d, Windows::UI::Xaml::DependencyPropertyChangedEventArgs args)
+    {
+        auto progressRing = d.as<NanaBox::ProgressRing>();
+        auto progressRingImpl = winrt::get_self<NanaBox::implementation::ProgressRing>(progressRing);
+
+        auto oldBrush = progressRingImpl->m_shape.StrokeBrush();
+        auto newBrush = progressRingImpl->m_compositor.CreateColorBrush(args.NewValue().as<Windows::UI::Xaml::Media::SolidColorBrush>().Color());
+        progressRingImpl->m_shape.StrokeBrush(newBrush);
+
+        if (oldBrush)
+        {
+            oldBrush.Close();
+        }
+    }
+
+    Windows::UI::Xaml::DependencyProperty ProgressRing::ForegroundProperty()
+    {
+        return m_foregroundProperty;
+    }
+
+    Windows::UI::Xaml::Media::SolidColorBrush ProgressRing::Foreground()
+    {
+        return winrt::unbox_value<Windows::UI::Xaml::Media::SolidColorBrush>(GetValue(m_foregroundProperty));
+    }
+
+    void ProgressRing::Foreground(Windows::UI::Xaml::Media::SolidColorBrush const& value)
+    {
+        SetValue(m_foregroundProperty, value);
+    }
+}
diff --git a/NanaBox/ProgressRing.h b/NanaBox/ProgressRing.h
@@ -0,0 +1,37 @@
+#pragma once
+
+#include "ProgressRing.g.h"
+#include <winrt/Windows.UI.Composition.h>
+
+namespace winrt::NanaBox::implementation
+{
+    struct ProgressRing : ProgressRingT<ProgressRing>
+    {
+        ProgressRing();
+
+        static Windows::UI::Xaml::DependencyProperty ForegroundProperty();
+        Windows::UI::Xaml::Media::SolidColorBrush Foreground();
+        void Foreground(Windows::UI::Xaml::Media::SolidColorBrush const& value);
+
+        Windows::Foundation::Size MeasureOverride(Windows::Foundation::Size const& availableSize);
+        Windows::Foundation::Size ArrangeOverride(Windows::Foundation::Size const& finalSize);
+
+    private:
+        static void OnForegroundChanged(Windows::UI::Xaml::DependencyObject d, Windows::UI::Xaml::DependencyPropertyChangedEventArgs args);
+
+        Windows::UI::Composition::Compositor m_compositor{ nullptr };
+        Windows::UI::Composition::CompositionSpriteShape m_shape{ nullptr };
+        Windows::UI::Composition::ShapeVisual m_visual{ nullptr };
+
+        static Windows::UI::Xaml::DependencyProperty m_foregroundProperty;
+        const float m_defaultProgressRingSize = 80.0f;
+        const float m_strokeThickness = 1.5f;
+    };
+}
+
+namespace winrt::NanaBox::factory_implementation
+{
+    struct ProgressRing : ProgressRingT<ProgressRing, implementation::ProgressRing>
+    {
+    };
+}
diff --git a/NanaBox/ProgressRing.idl b/NanaBox/ProgressRing.idl
@@ -0,0 +1,9 @@
+namespace NanaBox
+{
+    runtimeclass ProgressRing : Windows.UI.Xaml.FrameworkElement
+    {
+        ProgressRing();
+        static Windows.UI.Xaml.DependencyProperty ForegroundProperty { get; };
+        Windows.UI.Xaml.Media.SolidColorBrush Foreground;
+    }
+}
diff --git a/NanaBox/ResizeVirtualHardDiskPage.xaml b/NanaBox/ResizeVirtualHardDiskPage.xaml
@@ -24,7 +24,7 @@
         x:Uid="/ResizeVirtualHardDiskPage/ContentTextBlock"
         Text="[Specify the new size for the virtual hard disk.]"
         TextWrapping="Wrap" />
-      <Grid Padding="0,2,0,0">
+      <Grid Padding="0,2,0,0" ColumnSpacing="8">
         <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="auto" />
@@ -45,7 +45,7 @@
         x:Uid="/ResizeVirtualHardDiskPage/SizeTextBlock"
         Padding="0,2"
         Text="[Size (at least 3 MiB and must be a multiple of 512 bytes)]" />
-      <Grid Padding="0,2,0,0">
+      <Grid Padding="0,2,0,0" ColumnSpacing="8">
         <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*" />
           <ColumnDefinition Width="144" />

diff --git a/NanaBox/Utils.cpp b/NanaBox/Utils.cpp
@@ -29,7 +29,7 @@ namespace winrt
     using Windows::UI::Xaml::HorizontalAlignment;
     using Windows::UI::Xaml::ThicknessHelper;
     using Windows::UI::Xaml::VerticalAlignment;
-    using Windows::UI::Xaml::Controls::ProgressRing;
+    using NanaBox::ProgressRing;
 }
 
 void SplitCommandLineEx(
@@ -937,7 +937,7 @@ HWND ShowOperationWaitingWindow(
         Content.Margin(winrt::ThicknessHelper::FromUniformLength(12));
         Content.HorizontalAlignment(winrt::HorizontalAlignment::Stretch);
         Content.VerticalAlignment(winrt::VerticalAlignment::Stretch);
-        Content.IsActive(true);
+        // Content.IsActive(true);
 
         ::ShowXamlDialog(
             WindowHandle,