Adding system inktoolbar styles to winui (#4467)

* Added InkToolbar * Added InkToolbar Changes * Updated as per latest guidance * Round Corner changes and Removed reveal * Style updates * Removed SelectionAccent(underline) * Round Corner of Color Flyout * Slider style updates * Replaced Reveal Effects with winui ones * Shorten the selection accent and added cornerRadius to button borders * Formatting * Fixed Ruler and Protractor display and made round corner of selectionAccent * Replaced colors from Figma * Style updates * Decreased the margin for highlighter button flyout * Formatting * Added InkToolbar os version * Included the license header * Moved Comment location for flyout * Swapped Light and High Contrast Resource Dictionaries * Formatting * Added code to write on Ink Canvas Co-authored-by: Vivek Sharma <[email protected]> Co-authored-by: Ranjesh <[email protected]>
microsoft · Mar 11, 2021 · 20d6fd8 · 20d6fd8
1 parent adbd854
commit 20d6fd8
Show file tree

Hide file tree

Showing 6 changed files with 2,294 additions and 0 deletions.
diff --git a/dev/CommonStyles/CommonStyles.vcxitems b/dev/CommonStyles/CommonStyles.vcxitems
@@ -48,6 +48,11 @@
       <Version>RS1</Version>
       <Type>ThemeResources</Type>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)InkToolbar_themeresources.xaml" >
+      <ControlsResourcesVersion>Version2</ControlsResourcesVersion>
+      <Version>RS1</Version>
+      <Type>ThemeResources</Type>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)RadioButton_themeresources.xaml">
       <ControlsResourcesVersion>Version2</ControlsResourcesVersion>
       <Version>RS1</Version>

diff --git a/dev/CommonStyles/InkToolbar_themeresources.xaml b/dev/CommonStyles/InkToolbar_themeresources.xaml
diff --git a/dev/CommonStyles/InteractionTests/CommonStylesTests.cs b/dev/CommonStyles/InteractionTests/CommonStylesTests.cs
@@ -149,5 +149,15 @@ public void CornerRadiusTest()
                 Verify.IsNotNull(textBlock, "Verify corner radius page doesn't crash");
             }
         }
+
+        [TestMethod]
+        public void InkToolbarTest()
+        {
+            using (var setup = new TestSetupHelper("InkToolbar Tests"))
+            {
+                var textBlock = FindElement.ByName("InkToolbar");
+                Verify.IsNotNull(textBlock, "Verify InkToolbar page doesn't crash");
+            }
+        }
     }
 }
diff --git a/dev/CommonStyles/TestUI/CommonStyles_TestUI.projitems b/dev/CommonStyles/TestUI/CommonStyles_TestUI.projitems
@@ -30,6 +30,11 @@
       <Generator>MSBuild:Compile</Generator>
       <IncludeInWindowsAppx>false</IncludeInWindowsAppx>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)InkToolbarPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+      <IncludeInWindowsAppx>false</IncludeInWindowsAppx>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)TextControlsPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -108,6 +113,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)CornerRadiusPage.xaml.cs">
       <DependentUpon>CornerRadiusPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)InkToolbarPage.xaml.cs">
+      <DependentUpon>InkToolbarPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)TextControlsPage.xaml.cs">
       <DependentUpon>TextControlsPage.xaml</DependentUpon>
     </Compile>

diff --git a/dev/CommonStyles/TestUI/InkToolbarPage.xaml b/dev/CommonStyles/TestUI/InkToolbarPage.xaml
@@ -0,0 +1,11 @@
+<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
+<Page
+    x:Class="MUXControlsTestApp.InkToolbarPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <StackPanel>
+        <InkToolbar TargetInkCanvas="{x:Bind inkCanvas}"/>
+        <InkCanvas x:Name="inkCanvas" Height="400"/>
+    </StackPanel>
+</Page>
diff --git a/dev/CommonStyles/TestUI/InkToolbarPage.xaml.cs b/dev/CommonStyles/TestUI/InkToolbarPage.xaml.cs
@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License. See LICENSE in the project root for license information.
+
+using Windows.UI.Core;
+using Windows.UI.Input.Inking;
+using Windows.UI.Xaml.Controls;
+
+namespace MUXControlsTestApp
+{
+    [TopLevelTestPage(Name = "InkToolbar")]
+    public sealed partial class InkToolbarPage : Page
+    {
+        private InkPresenter _inkPresenter;
+
+        public InkToolbarPage()
+        {
+            this.InitializeComponent();
+            _inkPresenter = inkCanvas.InkPresenter;
+            _inkPresenter.InputDeviceTypes =
+            CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen | CoreInputDeviceTypes.Touch;
+        }
+    }
+}