New shape samples #1132

gregwoo-microsoft · 2022-12-03T02:17:49Z

New samples to show how to create various shapes including:

Ellipses
Rectangles
Polygons
Lines
Polylines
Paths
Geometry groups

Note: This work is in progress

Description

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

gregwoo-microsoft · 2022-12-03T02:21:44Z

@chingucoding let me know what you think. Note: this is still a work in progress but I'd love to get your early feedback. For instance, I think it would make more sense to break up those samples into multiple pages (e.g. Shapes, Lines, Paths). Also, I couldn't figure out how to bind a Polygon's point X/Y coordinate to a slider value. Let me know if you know how to do that, otherwise, I'll have another look at it next week.

marcelwgn · 2022-12-03T17:54:53Z

I think separating them out would be a good idea, maybe they should get their own "Shapes" section where we give Rectangle, Line, ... all their own page?

Regarding polygon point X/Y, the only way to change them it seems is through point animations (https://learn.microsoft.com/uwp/api/windows.foundation.point?view=winrt-22621&WT.mc_id=WDIT-MVP-5004239#animating-point-values) but even them I'm not entirely sure it will work. If I remember correctly, some of these APIs take a snapshot of the points and after that, when the entries such as points get modified they don't take effect. But maybe I would still try out the point animations if we want to change the points position.

gregwoo-microsoft · 2022-12-08T04:03:27Z

@chingucoding I separated the samples into 2 pages: 1st page for shapes (rectangle, ellipse, polygon) and a 2nd page for lines (line, polyline, path, geometry group). I put those 2 pages into the "Styles" subsection. Let me know what you think.

marcelwgn · 2022-12-08T19:22:23Z

WinUIGallery/ControlPages/ShapePage.xaml.cs

+        //private void List_GotFocus(object sender, RoutedEventArgs e)
+        //{
+        //    //Control1.StartBringIntoView();
+        //}
+
+        //private void createNewWindow_Click(object sender, RoutedEventArgs e)
+        //{
+        //    var newWindow = WindowHelper.CreateWindow();
+        //    var rootPage = new NavigationRootPage();
+        //    rootPage.RequestedTheme = ThemeHelper.RootTheme;
+        //    newWindow.Content = rootPage;
+        //    newWindow.Activate();
+
+        //    var targetPageType = typeof(NewControlsPage);
+        //    string targetPageArguments = string.Empty;
+        //    rootPage.Navigate(targetPageType, targetPageArguments);
+        //}


This can be removed.

marcelwgn · 2022-12-08T19:24:01Z

WinUIGallery/ControlPages/LinePage.xaml.cs

+        //private void List_GotFocus(object sender, RoutedEventArgs e)
+        //{
+        //    //Control1.StartBringIntoView();
+        //}
+
+        //private void createNewWindow_Click(object sender, RoutedEventArgs e)
+        //{
+        //    var newWindow = WindowHelper.CreateWindow();
+        //    var rootPage = new NavigationRootPage();
+        //    rootPage.RequestedTheme = ThemeHelper.RootTheme;
+        //    newWindow.Content = rootPage;
+        //    newWindow.Activate();
+
+        //    var targetPageType = typeof(NewControlsPage);
+        //    string targetPageArguments = string.Empty;
+        //    rootPage.Navigate(targetPageType, targetPageArguments);
+        //}


This can be deleted.

marcelwgn · 2022-12-08T19:25:33Z

WinUIGallery/ControlPages/LinePage.xaml

+                    <Slider x:Name="lineSlider1" Header="Point #1 X" Minimum="0" Maximum="100" 
+                        StepFrequency="0.5" SmallChange="1" IsFocusEngagementEnabled="False"/>
+                    <Slider x:Name="lineSlider2" Header="Point #1 Y" Minimum="0" Maximum="100" 
+                        StepFrequency="0.5" SmallChange="1" IsFocusEngagementEnabled="False"/>
+                    <Slider x:Name="lineSlider3" Header="Point #2 X" Minimum="200" Maximum="300" 
+                        StepFrequency="0.5" SmallChange="1" IsFocusEngagementEnabled="False"/>
+                    <Slider x:Name="lineSlider4" Header="Point #2 Y" Minimum="0" Maximum="100" 
+                        StepFrequency="0.5" SmallChange="1" IsFocusEngagementEnabled="False"/>


How about naming those "Startpoint X, Startpoint Y,..."?

marcelwgn · 2022-12-08T19:26:27Z

WinUIGallery/ControlPages/LinePage.xaml

+&lt;Polyline Stroke="Black" StrokeThickness="$(Slider1)"
+Points="10,100 60,40 200,40 250,100"/&gt;


nit: Formatting

WinUIGallery/ControlPages/LinePage.xaml

marcelwgn · 2022-12-08T19:27:05Z

WinUIGallery/ControlPages/LinePage.xaml

+&lt;Path Stroke="DarkGoldenRod" StrokeThickness="$(Slider1)"
+Data="M 10,100 C 100,25 300,250 400,75 H 200"/&gt;


nit: formatting

marcelwgn · 2022-12-08T19:28:22Z

WinUIGallery/ControlPages/ShapePage.xaml

+&lt;Rectangle Fill="SteelBlue" Height="$(Slider1)" Width="$(Slider2)"
+Stroke="Black" StrokeThickness="$(Slider3)"
+RadiusY="$(Slider4)" RadiusX="$(Slider5)"/&gt;


nit: formatting

@chingucoding is it just a question of adding a tab for the 2nd and 3rd lines or is there something else?

marcelwgn · 2022-12-08T19:28:31Z

WinUIGallery/ControlPages/ShapePage.xaml

+&lt;Polygon Fill="SteelBlue" Points="10,100 60,40 200,40 250,100"
+StrokeThickness="$(Slider1)" Stroke="Black"/&gt;


nit: formatting

marcelwgn · 2022-12-08T19:28:56Z

WinUIGallery/DataModel/ControlInfoData.json

+          "ImagePath": "ms-appx:///Assets/ControlImages/CreateMultipleWindows.png",
+          "ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png",
+          "Description": "Draws a straight line between two points.",
+          "Content": "<p>Look at the <i>LinePage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsNew": false,


How about marking this as new?

marcelwgn · 2022-12-08T19:29:09Z

WinUIGallery/DataModel/ControlInfoData.json

-          "Description": "Apply custom colors to your controls through this cascading API, or scope them to a local subset.",
-          "Content": "",
+          "Description": "Basic shapes are intended for decorative rendering or for compositing non-interactive parts of controls.",
+          "Content": "<p>Look at the <i>ShapePage.xaml</i> file in Visual Studio to see the full code for this page.</p>",
          "IsNew": false,


How about marking this as new?

marcelwgn · 2022-12-08T19:30:47Z

Left a few comments, mostly small things. I really like the new samples, especially the idea of having a toggle to show the points the polyline/polygon is made of.

gregwoo-microsoft · 2022-12-10T02:41:45Z

@chingucoding I implemented the changes you suggested. Let me know if you think that there is something else to add/modify 😄

marcelwgn

LGTM, really great that we also showcase these APIs now!

gregwoo-microsoft · 2022-12-13T00:51:49Z

The only things missing are the 2 control icons, I'll work with our design team to get those.

New shape samples

e1ece17

gregwoo-microsoft added 2 commits December 7, 2022 19:52

Finished shape sample page

5bc6b60

Created a new page for Line samples

2499cb7

marcelwgn reviewed Dec 8, 2022

View reviewed changes

gregwoo-microsoft added 2 commits December 9, 2022 18:32

Fixed formatting + renamed some vars

e9f9c0c

Fixed example formatting

0a319b2

marcelwgn approved these changes Dec 10, 2022

View reviewed changes

gregwoo-microsoft merged commit 28faf21 into microsoft:main Dec 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New shape samples #1132

New shape samples #1132

gregwoo-microsoft commented Dec 3, 2022

gregwoo-microsoft commented Dec 3, 2022

marcelwgn commented Dec 3, 2022

gregwoo-microsoft commented Dec 8, 2022

marcelwgn Dec 8, 2022

marcelwgn Dec 8, 2022

marcelwgn Dec 8, 2022

marcelwgn Dec 8, 2022

marcelwgn Dec 8, 2022

marcelwgn Dec 8, 2022

gregwoo-microsoft Dec 8, 2022

marcelwgn Dec 8, 2022

marcelwgn Dec 8, 2022

marcelwgn Dec 8, 2022

marcelwgn commented Dec 8, 2022

gregwoo-microsoft commented Dec 10, 2022

marcelwgn left a comment

gregwoo-microsoft commented Dec 13, 2022

		<Polyline Stroke="Black" StrokeThickness="$(Slider1)"
		Points="10,100 60,40 200,40 250,100"/>

		<Path Stroke="DarkGoldenRod" StrokeThickness="$(Slider1)"
		Data="M 10,100 C 100,25 300,250 400,75 H 200"/>

		<Polygon Fill="SteelBlue" Points="10,100 60,40 200,40 250,100"
		StrokeThickness="$(Slider1)" Stroke="Black"/>

New shape samples #1132

New shape samples #1132

Conversation

gregwoo-microsoft commented Dec 3, 2022

Description

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

gregwoo-microsoft commented Dec 3, 2022

marcelwgn commented Dec 3, 2022

gregwoo-microsoft commented Dec 8, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marcelwgn commented Dec 8, 2022

gregwoo-microsoft commented Dec 10, 2022

marcelwgn left a comment

Choose a reason for hiding this comment

gregwoo-microsoft commented Dec 13, 2022