My series, Quick Dev, is in full swing and Part 3 is now available where we jump into using Azure Mobile Apps to provide a data backend for our Xamarin Application.  Check it out below!

In Part 3 of our special series on Xamarin, James Quick shows us how to add data to power our app. For our backend, he’ll use Azure Mobile Apps - a service that packages common services to mobile applications like data, authentication, push notifications, etc. – and then he’ll create a simple “ToDoItem” table that we’ll read from and write to in our client Xamarin Application using 100% shared code.

• [0:05] Project overview
• [1:30] DEMO: Adding Data to power our app using Azure Mobile Apps

Follow the conversation @msdev
Become a Fan @ facebook.com/MSFTDev
Subscribe to our podcast via iTunes, Windows Phone Marketplace or RSS

If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites & Blogs:

• James Quick's Blog
• Quick Dev on GitHub
• Xamarin Part 3
• Xamarin Forms
• Azure Mobile Apps Documentation

_______________________

With the above in mind and the abundance of tools, extensions, plugins, etc. out there, I decided to create “Quick Dev”, a video series whose goal is simple, “To Save You, the Developer, Time”.  It just becomes such a waste of time to recreate the wheel when it is already created.  So, today, the first video went

Check out the Video

As always, love to hear any feedback in the comments below of on twitter @jamesqquick.

Nfl Launches Official Windows 10 App

I couldn’t be more excited that the NFL season kicked off over a week ago.  In watching, you might have noticed all of the Surfaces being used on the NFL sideline.  It’s no secret that the NFL and Microsoft have a partnership.  Now, there is also an official Windows 10 NFL app :)

https://microsoft-news.com/nfl-launches-its-official-windows-10-app/

Microsoft at an Apple Event???

Yep, you read it right.  Microsoft, in fact, presented at an Apple conference showing off Office for Ipad.  Lots of interesting news coming out of the Apple event.  It’s interesting to see them following suit with an IPad Pro similar to the Surface.  Regardless, there was at least some aspect of collaboration as Microsoft jumped on stage.

https://microsoft-news.com/yep-microsoft-just-demoed-office-for-ipad-at-an-apple-event/

Microsoft Virtual Academy – Creative Coding Through Games and Apps

Another free online course through MVA!

https://www.microsoftvirtualacademy.com/en-us/training-courses/creative-coding-through-games-and-apps-12533?l=H9LnvClPB_4904668934https://wmpoweruser.com/microsoft-cityman-and-talkman-to-reportedly-include-support-for-fast-charging/

Free Online Learning Through AppCamp.IO

Free online learning for web.  Anything from UI to Angular to Networking.  Definitely worth a look!

https://appcamp.io/courses

10 Minute Recap of Apple Event

Everything you need to know from Apple’s Hey Siri event in 10 minutes!

https://www.engadget.com/2015/09/09/apple-hey-siri-event-highlight-video/

IPad Pro vs Surface 3

DId you watch the recap above?  Compare the new IPad Pro to the existing Surface 3 below.  To me, it’s a no brainer.  Apple has gone a little too far in terms of price to still only get an Arm device.

https://www.cnet.com/news/apple-ipad-pro-vs-microsoft-surface-pro-3-vs-macbook-air/

Windows 10 on 81 Million Machines

Just a week after the previous “Quick Links”, the number of machines running Windows 10 has gone from 75 to now 81 million.  In one week, 6 million more Windows 10 machines :).

https://microsoft-news.com/windows-10-is-now-installed-on-more-than-81-million-devices/

Windows 10 Symbols

Have you heard of the new support in Windows 10 to create a hamburger button menu?  Did you know that you have to create the actual hamburger button yourself?  If you need any of those standard icons for your app such as the ones below, find them here!!

https://j.mp/1N4u33R

Fast Charging with Windows Phones

With the exciting rumors and leaks of upcoming Windows Phones, a new rumor has surfaced!  Fast Charging!!

https://wmpoweruser.com/microsoft-cityman-and-talkman-to-reportedly-include-support-for-fast-charging/

Microsoft Releases Framework Competitor for Bootstrap

Microsoft and Open Source web frameworks?  You might be thinking…you rarely hear those two together in a sentence.  Not only did Microsoft open source Win.JS, but has now announce a UI Framework to compete with Bootstrap called Office UI Fabric.  Check it out!

https://wmpu.co/1NJ0ogH

Windows 10 on 75 Million Machines

Windows 10 was released almost exactly a month ago with a bold goal of reaching 1 billion devices over the next couple of years.  Far from it after only a month, but the attained reach so far is impressive.  75 MILLION!  Given some of the push back from Windows 8 (mainly the start screen), it seems people are eager to update to 10. 

https://winsupersite.com/windows-10/windows-10-now-running-more-75-million-devices-worldwide

Windows 10 Shortcuts

Shortcuts are some of the most handy and productive tools that I use every single day on my computer.  Most people know ctrl-v and ctrl-c, but there’s so much more than that!  Tabbing between open windows, between the new virtual desktops, and so much more.  The less I have to use the mouse the better!  Check out the shortcuts for Windows 10 here!

https://m.winsupersite.com/windows-10/windows-10-keyboard-shortcut-guide

Developer’s Guide to Windows 10

Interested in Developing for Windows 10?  I am running a small blog post/video/github series myself, but nothing compared to this guide.  Put on by Jerry Nixon and Andrew Wigley, Fellow Microsoft Technical Evangelists, this guide walks you through so much deep content.  This is great if you are even just curious about Windows 10.  I need to spend some time myself going through the content, which is around 20 hours.

https://www.microsoftvirtualacademy.com/en-US/training-courses/a-developer-s-guide-to-windows-10-12618?utm_content=bufferd1a5b&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

New Windows Phone Leaks

What’s better than new phones?  Maybe ones that you get to see before they are announced.  Here are some pictures of two reported upcoming Windows Phones.  These are by no means guaranteed to be correct, but the article does seem confident they could be.  Check them out!

https://wmpoweruser.com/microsoft-cityman-and-talkmans-official-renders-gets-leaked/

How to Improve Your Free-To-Play Game

Are you developing mobile games?  Something I pretend to do but haven’t found the time to do something serious yet!  If you are though, this guide is helpful in suggesting some additions or tweaks that you can make to your game, specifically if it is free to play.

https://www.microsoft.com/en-gb/developers/articles/week05aug15/how-to-improve-your-free-to-play-game/

...Read more at https://jamesqquick.com/xamarin-free-for-windows-phone-developers/

I have already done a couple of blog posts on some of the new XAML features for Windows 10 development, namely the new SplitView control, so I am going to follow up with a couple of posts on another new capability, using Adaptive Triggers.  Adaptive Triggers is extremely useful for creating “responsive” applications, ones that adapt to the current screen size.  This is necessary with Windows 10 because the same application can run on anything from a small phone up to a huge screen.  This is the most exciting promise of Windows 10 (the same app running everywhere), but with it comes the necessity for the developer to focus on making his app responsive.  With that said, let’s take a look at using the Adaptive Triggers to adapt the UI layout based on screen size….

Find the full content below.

• Github Sample - https://github.com/jamesqquick/Win10Universal/tree/master/AdaptiveTriggers-Intro
• Blog Post - https://jamesqquick.com/windows-10-adaptive-triggers-intro/
• YouTube Video - https://www.youtube.com/watch?v=f0GyG1VPXiQ

As always please comment below or find me on Twitter, @JAMESQQUICK, with any questions, comments, or concerns.

It’s simply named Code Snippet Plugin for Windows Live Writer, so you can imagine my search pretty quickly pulled it up.  Anyways, I downloaded, installed, and restarted Live Writer to try it out, and it worked really well.  It is super simple.  After installing you get a button for Code Snippet under the Insert pane.

From there just go ahead and click Code Snippet and see the following menu where you can input your code.

Although they don’t have a XAML option (they do have C# though), you can use HTML and it worked fairly well!

And then looks like this.

<Grid>

             <TextBlock Text="SplitView Basic" FontSize="54" Foreground="White"

                          HorizontalAlignment="Center" VerticalAlignment="Center"/>

</Grid>

All in all, it is quick and simple to use and allows me to put code into my posts so that others can leverage.  As always if you have any questions, comments, or concerns, feel free to comment below or find me on twitter @jamesqquick.

The first thing you need to do it make sure you are running some version of Windows 10, which you can find here.  You also need to have Visual Studio 2015 community installed as well, which you can find here.  Those are the only two things that you need to ensure that you have installed.  If you have those installed, let’s continue!

Open up Visual Studio and create a new blank Windows 10 Application.  Give it a name and click OK.

Now that we have our project created let’s take a quick look at the Project Architecture in the Project Explorer.  Notice that unlike Universal Windows Applications for Windows 8.1 and Windows Phone 8.1, we only have one project head now instead of three different ones.  They key here is that Windows 10 applications use the SAME BINARY regardless of the device they are being run on.  This is super important, and SUPER AWESOME!

Go ahead and open up your MainPage.xaml file so we can get started created out SplitView!  You don’t start with much here just an empty grid.

Let’s scrap the grid, and just ad a simple blank SplitView.

Now that we have our SplitView created we can add its two main elements, the pane and the content.  The pane represents the menu that you want to be able to interact with, and the content represents the main content of your page.

<SplitView>

       <SplitView.Pane>

       </SplitView.Pane>

       <SplitView.Content>

       </SplitView.Content>

</SplitView>

Ignore the Blue squigglies above.  It’s just tell us that we need to fill in the definition of the pane and the content.  Let’s start with the content as it is the easiest.  I just want to add a TextBlock here centered inside of a grid that says “SplitView”.

<SplitView>

       <SplitView.Pane>

       </SplitView.Pane>

       <SplitView.Content>

           <Grid>

               <TextBlock Text="SplitView Basic" FontSize="54" Foreground="White"

                          HorizontalAlignment="Center" VerticalAlignment="Center"/>

           </Grid>

       </SplitView.Content>

</SplitView>

Ok, so we have some content there.  It’s enough for this simple demo, but obviously in the future, use your typical XAML there to create whatever kind of page you want.  Next step is obviously to fill in the SplitView Pane, which will be the menu.  I am going to start by adding some properties to the definition of the SplitView.  For reference, you can again look back to my SplitView Intro post.  Really quickly, I am going to give a name, set the DisplayMode to Compact Overlay, set the pane to not be open by default, and set the open and company panel lengths like so.

<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" 

               CompactPaneLength="50" OpenPaneLength="150">

Now, we can go in and actually create our menu.  Since I want our menu to be vertical, as you might expect, I am simply going to create a vertical StackPanel as the container for all of our buttons with a background of Gray.  Our whole XAML should look like this now.

<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" 

              CompactPaneLength="50" OpenPaneLength="150">

       <SplitView.Pane>

           <StackPanel Background="Gray">

           </StackPanel>

       </SplitView.Pane>

       <SplitView.Content>

           <Grid>

               <TextBlock Text="SplitView Basic" FontSize="54" Foreground="White"

                          HorizontalAlignment="Center" VerticalAlignment="Center"/>

           </Grid>

       </SplitView.Content>

</SplitView>

Inside of our stack panel, I want to add our hamburger button, and below that a couple of dummy buttons just for reference.  To see how to build a hamburger button (because it isn’t all that obvious), you can follow me previous post, Creating a Hamburger Button.  In addition to simply create the hamburger button, I am also going to add its Click Handler.  As a hint, if you start typing in the Click property you get some intellisense that gives you the option to auto generate the name and then the method in the code behind.  Regardless, it looks like this.

<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"

                    Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>

We can take a look at the code behind for the HamburgerButton click handler shortly, but first let’s finish our menu.  The next thing we will do is at a couple of more buttons.  In addition to simply adding a couple of buttons, i want each of those buttons to have text to the right of them explaining what each button does.  Therefore, for each new button, I am going to add a horizontal StackPanel to hold a button and text.  All in all it looks like this.

<StackPanel Orientation="Horizontal">

                   <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;"

                   Width="50" Height="50" Background="Transparent"/>

                   <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />

               </StackPanel>

               <StackPanel Orientation="Horizontal">

                   <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"

                       Width="50" Height="50" Background="Transparent"/>

                   <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />

               </StackPanel>

               <StackPanel Orientation="Horizontal">

                   <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="&#xE1D6;"

                       Width="50" Height="50" Background="Transparent"/>

                   <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />

               </StackPanel>

Now, our total XAML Page looks like this.

<Page

    x:Class="App1.MainPage"

    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App1"

    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" 

               CompactPaneLength="50" OpenPaneLength="150">

        <SplitView.Pane>

            <StackPanel Background="Gray">

                <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"

                    Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>

                <StackPanel Orientation="Horizontal">

                    <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;"

                    Width="50" Height="50" Background="Transparent"/>

                    <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />

                </StackPanel>

                <StackPanel Orientation="Horizontal">

                    <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"

                        Width="50" Height="50" Background="Transparent"/>

                    <TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />

                </StackPanel>

                <StackPanel Orientation="Horizontal">

                    <Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content="&#xE1D6;"

                        Width="50" Height="50" Background="Transparent"/>

                    <TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />

                </StackPanel>

            </StackPanel>

        </SplitView.Pane>

        <SplitView.Content>

            <Grid>

                <TextBlock Text="SplitView Basic" FontSize="54" Foreground="White"

                           HorizontalAlignment="Center" VerticalAlignment="Center"/>

            </Grid>

        </SplitView.Content>

    </SplitView>

</Page>

Our last and final step is to add the logic to our Hamburger Button to open and close the menu.  Go ahead and open up the MainPage.XAML.cs.  Notice the handler has already been created for me.  If it hasn’t for you then, go ahead and create it.

Inside of the handler we simply want to set pane to closed if it is open and visa versa like this.

MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;

That should be everything.  Go ahead and run your project and should be able to open and close your menu with the hamburger buton.

Closed

Open

Awesome!  You have now created your very first Hamburger Button Menu in Windows 10.  For additional reference, you can find the sample project on Github.  As always with any questions comments of concerns, please comment below or find me on twitter @jamesqquick.

**GitHub sample - https://github.com/jqquick223/Win10Universal/tree/master/HamburgerButton **

Although we have added the SplitView control to XAML with the ability to create a hamburger menu, we lack documentation on how to actually create the hamburger button.  Honestly, I have searched and found very few things that provide insight and no documentation that shows exactly how to do so.  Because of this, I figured it would be nice to go ahead and document that here.

The idea is pretty simple, basically we are just creating a button and styling it as a hamburger button.  But where do we find the Hamburger Icon?  For this we are going to use the Segoe MDL2 Assets font.  You can find a list of the different icons available in this font here, https://modernicons.io/segoe-mdl2/cheatsheet/.  This site provides all the codes for the different icons.  So, where exactly is the Hamburger Button?  There it is!  I just did a Control+F to find it.

Alright, so we know where our icon is, let’s go ahead and create one in XAMl.  Again, we are going to create a simple button and set the FontFamily to the Segoe MDL2 Assets font and the content to the code that references the specific hamburger button icon, “&#E700;”.  The XAML looks like.

<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"/>

Here’s a picture of the final result!

We have not yet create our actual menu, but since there was so little documentation on creating the actual button, i figured we would start there!  That’s it.  It’s that simple!  Comment or find me on twitter @jamesqquick with any questions, comments, or concerns!