Until we have the new Windows 10 Creators Update and the new SDKs, APIs, etc. I need few days to relax my mind from creating my new Universal app Games Time Machine. I learn a lot about performance, SQLite with EF7 and UI new ways. I encourage you to grab it at Games Time Machine at the W10 Store and ask me about any part you are interested, I will glad to address on how to solve an issue or how to make it work any you need.
Now after following the twitter from @justinxinliu I decided to analyze Paint 3D, in theory the most next Creators Update App style.
The first step is launch Paint 3D and now launch VS2017 (might be with 2015 works but you know is 2 years old now 🐱🐉 ), and attach in the following way:
Now search for Paint and attach in Native mode:
And here we go, now we can analyze several interesting parts of the app.
Just a quick view of what is interesting inside:
As you can see there is a Device called Windows.Team (no idea what can be). and an internal SDK 14800.
From the Uri rules, look like the codename was Denali which is a protected website:
The app contains:
- Grid with TopBar, SideBar, CommunityDiscoveryPanel, ContextSideBar, Grid, Rectangle, HamburgerMenu and a DebugMenu.
- A ContentControl binded to the StartViewModel.StartVM, might be a trigger to begin some kind of actions.
- The AboutBox, it is interesting because it’s full size, with a Brush Transparent (to lock all the elements behind). An small bug it has is that should block the key or the controls behind when the AboutBox is shown, but it’s not, you can press tab and cycle control focus and activate them. Hope in new releases they give an easier option to lock what is behind.
- The HsvColorPicker, which I will analyze later.
- A Loading overlay, which must be like a MessageDialog (CancelCoomand, Description, Image, IsOpen, Title)
- A Change Text Overlay similar to the previous one, (CancelCommand, OkCommand, Text)
- A grid that contains the WebBlendControl, yes web. I will take a look to it later.
This bar if 50 Height, not 48, so is not now a x4 factor, the background color is #FF363941. I should try referencing an static resource to know if this value is hard coded or referenced.
It contains three parts, The hamburger, which is an ActionableCheckBox, a ResponsivePanel to change the ExpandedView and the CompressedView, and another Grid on the right for the Actions and Remix3D.
- The Hamburger ActionableCheckBox is 66×50 with minSize 66×50 and it comes from the style of Checkbox.it contains and IsAction Property to change if the Menu is Open or not.
- The Responsive Panel (in expanded view) [I do not know if it is possible to analyze the Visual States]. To summarize is like an ItemsPanel with ItemsSource and SelectedItem. The ItemContainerStyle sets the size to 66×50 of each item.
- Each item is a SimpleSelectorItem that changes the visibility of a grid when selected or unselected, the only difference is a linearbackgroundbrush I will detail later.
- And finally on the right a non named panel, a bit less organize with a 66×66 button, yes is bigger, why? and also the other buttons are 66×66.
This bar contains a lot of controls inside, let’s analyze how are organize (hardcoded or with binding) and what kind of controls are. All inner panels are of type ResponsivePanel that changed from ExpandedView to CompressedView depending on the Window size.
It has two parts, the tool section, and the colors below. Let’s begin with the low part, the color selector, the container is a grid of 264W and inside it is an stack panel. The most interesting part is the colors section. It is a RelativePanel with a WrapPanel with all the Colors of type ColourThumb.
It changes the Visibility of the Grid, the over has -2 of margin and 2 of Border Thickness to make the effect of grow.
Now let’s analyze the tools section. each tool item is a canvas with several paths inside, might be in the future we see SVG items here.
In summary after digging in the visual tree, it’s a SwapChainPanel (HighFrecuencyInputPanel) , I will have to take a look if it’s the same like the InkCanvas.
This contains ZoomScale Buttons and buttons to change the view to edit or view.
Now we have analyzed the layout and itemsizes, let’s continue with the Icons used and fonts.
Icons & Fonts
One of the firsts parts I always take a look is the fonts and the symbols what are they done, pixel, paths, fonts, etc.
Let’s analyze the Top Bar:
The Hamburguer button is of type ActionableCheckBox, the content is an Icon with HamburgerIcon which is slightly different from the Seoe MDL2 Assets.
Now the middle top panel is of type PaintStudio..ResponsivePanel with popup values, Each button inside, is a PaintStudio..SimpleSelectorItem and the content is using this font Assets/Fonts/PaintA.ttf#paint and the chars are B, ~, and so on, so apparently are not a new Segoe Creators Update Font.
Let’s see if we can achieve that font. The app is installed in a place like:
And here we can see inside the Assets Folder three fonts: Icons.ttf, BhaiMDL2.1.84.ttf and PaintA.ttf
This font contains the following information:
Generated by IcoMoon, interesting, isn’t it?. And it just contains 3 characters:
This name looks like the Creators Update internal name, later I will explain why. This second one is from Microsoft and is an small subset from Segoe MDL2 Assets:
As you can see in the screenshot, containing the whole collection, it contains a new facebook and twitter symbols which, I think are not in Segoe MDL2 Assets.
Now let’s take a look to the PaintA.ttf
All the screenshots were using my app Universal Character Map . except the first one, using FontForge desktop app (great for editing fonts). As you can see here is where includes a Hamburger symbol. I do not understand why is not the same from Segoe, might be in the Creators Update all will be reorganized. Also all the icons included in the Hamburger menu were done using this font.
For the rest of the menu items, all are custom controls. Hope they are included by default or in templates to stylish new apps.
Colors & Gradients
All the menus, all the icons, etc. have the following gradient:
It looks like the colors do not belong to an Style (static resource) but might be included in the future for default styles in UWP apps.
In the following post, I will analyze the controls, all the coloring and shadows, and I will try to dig about visualstates and animations if it’s possible. Meanwhile the other laptop is to 15014, I will check if there is any new version of Paint3D or any other app to analyze.