Sunday, September 15, 2019

Quick Tip - Hot Fix Update for Windows Template Studio Now Available

Hello, fellow Windows devs. I will be back with some fresh UWP developer tips soon! In the meantime, here is a quick tip if you use Windows Template Studio and have the Visual Studio 2019 Preview installed on your machine.

Last week, Windows Template Studio version 3.4.19254.01 was released to address two issues specific to the VS2019 Preview.

  • Issue #3295 - Relates to adding an MVVM Light app to a Windows Template Studio project.
  • Issue #3309 - An error occurs when generating a project with the default selections.

There are no workarounds listed for either issue. Although both are specific to VS2019 Preview and seem to be limited in the scope of their problems, I like to patch my dev software as fixes become available. You can install this update whether you're running WTS with VS2017 or VS2019 Release/Preview.

You can either get the VSIX for the release here or if you have Windows Template Studio installed, open the Visual Studio Extensions dialog and check for updates. The source code for the release is also available for download if you want to have a peek under the hood.

Happy coding!


Wednesday, March 13, 2019

UWP Tip #26 - Playing on the Uno Platform Playground

Have you heard of the Uno Platform project? Uno enables UWP developers to truly create universal C# applications with UWP XAML. Reuse your views, view models and supporting code across Windows 10, iOS, Android and the web (via WebAssembly).

Get started by visiting the Uno web site, read some how-to articles on their blog, and check out the source code on GitHub. Then download Visual Studio extension installer (.VSIX) from their latest GitHub release, and do a File-->New Project in Visual Studio.





But this is a post for next time. Today, we're going to take a look at how you can try Uno on any computer, regardless of what tools or extensions are installed. Let's try the Uno Platform Playground.

In any modern web browser, simply go to playground.platform.uno. Here is the screen that will greet you.



You get a neat little editor in the browser complete with XAML Editor, another editor to create JSON sample data for your page's data context, and a live preview pane that creates the page via WebAssembly. The left side has what appears to be a toolbox, but is actually a series of links for viewing the sample/starter code for each control, along with a handful of more extensive samples. At the top, you can click run to render your page or keep AutoRun checked to get a live preview as you modify the XAML and data. The Save Snippet link in the upper-right corner will copy the XAML snippet to your clipboard.

Add a little XAML of your own and maybe a line of data in the JSON, and watch the live preview render the output with your updates.



I added a horizontal StackPanel containing a HyperlinkButton and two Button elements.

<StackPanel Orientation="Horizontal" Spacing="10">
    <HyperlinkButton Content="Windows Dev Center"
                     NavigateUri="http://dev.windows.com"/>
    <Button Content="Click Me"/>
    <Button Content="Click Me Too"/>
</StackPanel>

Let's have a look at the "Cards" sample.



This sample uses a ListView with a DataTemplate to create the look and feel of cards. The ListView's ItemsSource is set to the JSON in the Data Context editor. You can edit any of this and watch the preview pane reload with your changes. Remember to click Run if you have disabled AutoRun.

The Playground is a great place to play with the tools and copy some of your "play code" into a real live project in Visual Studio. Curious about how the Playground was built? That source code is also available. View it here.

Go play today, and leverage your UWP skills across every platform! Happy coding and #uwpeverywhere!

del.icio.us Tags: ,,

Sunday, February 10, 2019

UWP Tip #25 - Windows Community Toolkit - Using the TabView Control

Here at UWP Tips, I have walked through how to use many of the controls, services and helpers available in the Windows Community Toolkit. The toolkit reached the v5 milestone at the end of October and added a number of new features and enhancements. One of the new controls is the TabView XAML control. Today, we'll examine the control and create a quick sample UWP Page.

Let's start by viewing the control in the handy toolkit sample app that you can install from the Microsoft Store. I added a yellow border to identify the bounds of the control itself.


You can see that the control has header and footer regions, a row of tabs with the ability to add tabs using the + icon, and a settings button to enable user configuration of the tab behavior. Based on the settings exposed on the right through the sample app, you can also see that it is easy to change the tab width settings, add close tab buttons and provide drag-and-drop behavior to rearrange tabs.

Let's crate a new UWP project and get our hands on some XAML. Once your project is created, add the Microsoft.Toolkit.Uwp.UI.Controls v5.0 (or later) NuGet package. I have also added MVVMLight for some quick MVVM support.

Let's keep the XAML really simple for our first test run with the TabView. Here is the markup for a TabView with a header, footer and four tabs.

<Grid>
         <controls:TabView>
             <controls:TabView.Header>
                 <TextBlock Text="Top of the World!"/>
             </controls:TabView.Header>
             <controls:TabViewItem Header="First Tab">
                 <TextBlock Text="First tab Contents!"/>
             </controls:TabViewItem>
             <controls:TabViewItem Header="Tab 2">
                 <TextBlock Text="Tab 2 contents!"/>
             </controls:TabViewItem>
             <controls:TabViewItem Header="3rd Tab">
                 <TextBlock Text="3rd tab contents!"/>
             </controls:TabViewItem>
             <controls:TabViewItem Header="Last Tab">
                 <TextBlock Text="Last tab contents!"/>
             </controls:TabViewItem>
             <controls:TabView.Footer>
                 <TextBlock Text="The End"/>
             </controls:TabView.Footer>
         </controls:TabView>
</Grid>

If you want to see an example with a little more complexity, check out the XAML tab for the TabView in the toolkit sample app. Here is what our XAML renders at runtime.




It doesn't look to bad for a view lines of XAML, if you ask me. We are all ready to plug in four tabs full of great content, and we support Windows theming out of the box. Hover over the tabs and see how they have a nice, fluent look and feel also. Very cool!

Before we wrap up this simple example, let's clean things up with some margins on our TextBlock elements and copy some XAML from the sample app to get that cool Settings icon at the end of our tab row. Here is that markup:

<controls:TabView.TabEndHeader>
   <Button Width="48"
     Height="40"
      Margin="-1,0,0,0"
      BorderThickness="1"
       Background="Transparent"
       Style="{StaticResource ButtonRevealStyle}">
     <Viewbox MaxWidth="16" MaxHeight="16">
       <SymbolIcon Symbol="Setting"/>
     </Viewbox>
   </Button>
</controls:TabView.TabEndHeader>

Place this between your last TabViewItem and the TabView.Footer element. This is the what our Page looks like now.


Now our text has a little breathing room, and our tabs have a settings button. (It's up to you to add the settings, of course.)

That's it for our quick tour of the TabView. There's loads more to explore in this control. I recommend starting with the MS Docs page for the control, and then head over to the GitHub repo to check out the source.

Happy coding!


Saturday, January 19, 2019

UWP Tip #24 - Get Started Building Windows UI XAML with XAML Studio

XAML Studio was recently made available as a Microsoft Garage project without much fanfare. You may have heard of it if you're a regular viewer of the On .NET show on Channel 9. XAML Studio's creator, Michael Hawker, joined Jeremy Likness to discuss the project last week.

What Is XAML Studio

XAML Studio aims to provide Windows UI developers with a quick way to create and prototype XAML markup for Windows. If you miss old lightweight XAML editors like XamlPad, you should install XAML Studio today. These are a few of the features already available in this early version of the tool.
  • Live Preview
  • Live Binding
  • Binding Debugging
  • Data Context Editor
  • Auto-Save (with Restore)
  • IntelliSense
  • Documentation Toolbox with Links to MS Docs
  • Alignment Guides
  • Namespace Helpers

Getting Started

You can search for XAML Studio in the Microsoft Store and install it from there or use this handy link. When you open the app for the first time, you'll be greeted by a Welcome screen like this.



XAML Editor

If you have an existing WinUI XAML file you would like to try, you can use the Open File link. Let's get started today by clicking the New File link to create and start editing your first XAML file.




The new XAML file is a Windows Page containing a Grid with a 2-line TextBlock. Let's start slow and the Run text of each line a little bit to read "Get Started with XAML Studio on UWP Tips" and "Check out the live preview.". You'll notice that the live preview is exactly that... live. The text in the preview will refresh as you change it in the editor.

IntelliSense and Live Preview

Let's test out the IntelliSense by adding a couple more controls to the page. We'll switch out the Grid for a StackPanel with the default vertical orientation and add a Button and another TextBlock.



Settings

The IntelliSense is quite nice, but I think the default Live Preview refresh interval is a little fast. The bright pink error messages about invalid markup are distracting while working in the editor. You can either disable auto-compilation or edit the interval in the app's settings. The default interval is to compile after 0.8 seconds of inactivity in the editor. I updated mine to 2 seconds.




You should take some time to explore all of the XAML Studio settings as you're getting familiar with the app.

Documentation Toolbox

Something else you should explore is the Documentation Toolbox in the left panel.




Here you can view all of the WinUI XAML controls available to the editor, complete with little info icons that link to the Microsoft Docs online documentation. The control name and namespace appear in the list for each item. If you have controls that you frequently use, you can add them to your favorites so they always appear at the top of the list.

Data Binding

Want to add some dynamic content to your page without coding up your model, view model or connecting to a live data source? You can create a mocked up data source with some JSON data in the Data Source pane on the left.




For this prototype, I grabbed some sample JSON data from one of Adobe's sites. This data contains an array of donuts, each with its own array of batters and toppings and some other properties. It's a handy bit of small, yet semi-complex data.

From the Data Source pane, you can save your JSON, open other JSON data files, or connect to a Remote Data Context. Using a remote data context is as simple as entering a REST Url that returns valid JSON data. The returned data will populate your Data Source window and can be saved for later use.

Here is my XAML markup from the screenshot above with bindings added for the donut JSON data.

<StackPanel Padding="40" DataContext="{Binding}">
     <TextBlock Margin="8">
         <Run FontSize="24" Foreground="#FFFC5185">Get Started with XAML Studio on UWP Tips</Run><LineBreak/>
         <Run>Check out the live preview.</Run>
     </TextBlock>
    <Button Content="I Do Nothing" Margin="8"/>

    <ListView ItemsSource="{Binding}">
         <ListView.ItemTemplate>
             <DataTemplate>
                 <StackPanel Orientation="Horizontal">
                     <TextBlock Text="{Binding Path=id}" Margin="4"/>
                     <TextBlock Text="{Binding Path=type}" Margin="4"/>
                     <TextBlock Text="{Binding Path=name}" Margin="4"/>
                     <TextBlock Text="{Binding Path=rating}" Margin="4"/>
                 </StackPanel>
             </DataTemplate>
         </ListView.ItemTemplate>
     </ListView>
</StackPanel>

These binding expressions are all valid except for one. Want to quickly know which of your bindings is invalid? Switch to the Debug Bindings pane and turn on the Debug toggle.




After debug is enabled on bindings, a list of the binding expressions will display in the pane with a 'Successful' or 'NotBound' status next to the binding target. A timestamp of the last bound time will display with any bindings that have been successful. In addition, the binding expressions in the code editor will be highlighted to indicate their status, making it easier to navigate to the failed bindings.

In my case, I tried to bind to a "rating" property, which does not exist on the donut array items in the JSON data.

Next Steps

That's all we're going to explore in this intro to XAML Studio. Next time we'll dive a little deeper into remote bindings, bind some more complex controls, and see how easily we can take our prototype XAML over to a real UWP application in Visual Studio.

Go check out XAML Studio today and be sure to provide feedback to Michael on Twitter!

Happy XAMLing!