- Part 1, What's in the Box?
- Part 2, Consuming the Services
- Part 3, Leveraging Code Helpers (Color, Connection, Converters and ImageCache)
- Part 4, Leveraging the StorageFiles and Storage Code Helpers
- Part 5, Using the Streams Code Helper
- Part 6, Using the VisualTree and LogicalTree UI Helpers
- Part 7, the Sample App
Intro
The UWP Community Toolkit contains a couple of XAML controls targeted specifically at developers and dev-focused apps. They are an AlignmentGrid and the FocusTracker. Each could be useful when developing an app UI.AlignmentGrid XAML Control
The AlignmentGrid control can help you align other elements on a window (or within a specific container element). Let's take a look at the control running within the UWP Toolkit Sample App, outlined in Part 7 of this series.
The control resides within the same parent Grid as the StackPanel containing the five TextBlock controls. It makes a nice way to quickly visualize your controls' layout/alignment. You can change the AlignmentGrid's Opacity and LineBrush color, depending on your preferences and your app's appearance. You can also modify the spacing of the grid lines independently with the HorizontalStep and VerticalStep properties. Here's the XAML for a simple grid containing four buttons.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<developerTools:AlignmentGrid
x:Name="MainAlignmentGrid"
Opacity="1"
LineBrush="DarkGreen"
HorizontalStep="20"
VerticalStep="20"/>
<StackPanel HorizontalAlignment="Center" Margin="0,40,0,0">
<Button Content="Button 1" Margin="4"/>
<Button Content="Button 2" Margin="4"/>
<Button Content="Button 3" Margin="4"/>
<Button Content="Button 4" Margin="4"/>
</StackPanel>
</Grid>
The designer in Visual Studio 2017 shows the four buttons spaced evenly between the horizontal gridlines.
By default the grid appears at design-time and runtime. This can be handy to check alignment at different resolutions and on different devices. When you're ready to deploy your app to the store, you can either remove the control, comment it out or add a line of code to your page's code behind to change the Visibility at runtime.
public MainPage()
{
InitializeComponent();
Loaded += MainPage_Loaded;
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
if (!DesignMode.DesignModeEnabled)
MainAlignmentGrid.Visibility = Visibility.Collapsed;
}
Now when we launch the app, the page appears with only the four buttons on an empty background.
This control could also come in handy if you're developing an app that provides your users with some type of visual designer. You could additionally provide a button to toggle the visibility of the grid on/off.
FocusTracker
The FocusTracker appears as a read-only property panel displaying four properties of the currently selected XAML control on your page. The four properties displayed are:- Name - The name of the current XAML control, if it has one.
- Type - The type of the current XAML control.
- Automation.Name - If you're using UI automation and have provided the current control for this, it is displayed here (set via AutomationProperties.Name attached property).
- Parent with Name - Traversing up the visual tree, the first parent found to have a name is displayed here, if any.
I had clicked on the header of the code panel on the right side before taking the screen shot. Here's another shot after clicking within the code panel itself:
You can see the FocusTracker immediately updated to display the info for the WebView hosting the XAML editor. Pretty cool!
I could see this being particularly useful to drop onto a page when you're trying to track down some issues with your automated UI tests. Give it a try if you deal with a lot of complex UI under test.
Wrap-Up
Both of these controls are definitely niche tools for a specific set of use cases, but they could both save you a ton of time if your app falls into one of those categories. Both are available in the Microsoft.Toolkit.Uwp.DeveloperTools NuGet package. Go give them a try!Happy coding!
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.