Sunday, January 19, 2020

Mastering Xamarin.Forms Book Review on Morning Dew

Heads-up UWP app developers! I'm sure you're aware that you can build cross-platform apps with Xamarin.Forms, targeting UWP in addition to iOS and Android. I think that anyone familiar with building UWP apps for Windows will get a lot of great information from Ed Snider's new 3rd Edtion of Mastering Xamarin.Forms from Packt Publishing

Go check out my full review of the book on my Morning Dew blog.



Happy Coding!

Saturday, November 30, 2019

.NET Core Book Review on Morning Dew

Hello UWP developers!

I just published a book review on my Morning Dew blog that may be of interest to my readers here. C# 8.0 and .NET Core 3.0 - Modern Cross-Platform Development is a new title by Mark Price from Packt Publishing. While it covers a broad range of .NET Core topics, there are chapters on both Xamarin and Windows Desktop application development.


Go check it out here!


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!