-
Notifications
You must be signed in to change notification settings - Fork 619
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New shape samples #1132
New shape samples #1132
Conversation
@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. |
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. |
@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. |
//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); | ||
//} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can be removed.
//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); | ||
//} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can be deleted.
<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"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How about naming those "Startpoint X, Startpoint Y,..."?
<Polyline Stroke="Black" StrokeThickness="$(Slider1)" | ||
Points="10,100 60,40 200,40 250,100"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: Formatting
<Path Stroke="DarkGoldenRod" StrokeThickness="$(Slider1)" | ||
Data="M 10,100 C 100,25 300,250 400,75 H 200"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: formatting
<Rectangle Fill="SteelBlue" Height="$(Slider1)" Width="$(Slider2)" | ||
Stroke="Black" StrokeThickness="$(Slider3)" | ||
RadiusY="$(Slider4)" RadiusX="$(Slider5)"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: formatting
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@chingucoding is it just a question of adding a tab for the 2nd and 3rd lines or is there something else?
<Polygon Fill="SteelBlue" Points="10,100 60,40 200,40 250,100" | ||
StrokeThickness="$(Slider1)" Stroke="Black"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: formatting
"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, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How about marking this as new?
"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, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How about marking this as new?
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. |
@chingucoding I implemented the changes you suggested. Let me know if you think that there is something else to add/modify 😄 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, really great that we also showcase these APIs now!
The only things missing are the 2 control icons, I'll work with our design team to get those. |
New samples to show how to create various shapes including:
Note: This work is in progress
Description
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes