| Comments

A long while back it seemed like the new cool app thing to do was to represent people/avatars in circles instead of the squares (or squares with rounded corners).  I made a snarky comment about this myself almost exactly 2 years ago when I noticed that some apps I was using at the time switched to this:

Now since this seems to be a popular trend and people are doing it I’ve thought XAML folks have figured it out.  However I’ve seen enough questions and some people trying to do a few things that make it more complex that I thought I’d drop a quick blog post about it.  I’ve seen people trying to do profile pic upload algorithms that clip the actual bitmap and save on disk before displaying it to people stacking transparent PNG ‘masking’ techniques.  None of this is needed for the simplest display.  Here you go:

<Ellipse Width="250" Height="250">
    <Ellipse.Fill>
        <ImageBrush ImageSource="ms-appx:///highfive.jpg" />
    </Ellipse.Fill>
</Ellipse>

That’s it.  You’ll see that Line 3 shows us using an ImageBrush as the fill for an Ellipse.  Using an Ellipse helps you get the precise circular drawing clip without having pixelated edges or anything like that.  The above would render to this image as the example in my app:

Circular image

Now while this is great, using an ImageBrush doesn’t give you the automatic decode-to-render-size capability that was added in the framework in Windows 8.1.

NOTE: This auto decode-to-render-size feature basically only decodes an Image to the render size even if the image is larger.  So if you had a 2000x2000px image but only displayed it in 100x100px then we would only decode the image to 100x100px size saving a lot of memory.  The standard Image element does this for you.

For most apps that control your image sources, you probably are already saving images that are only at the size you are displaying them so it may be okay.  However for apps like social apps or where you don’t know where the source is coming from or your app is NOT resizing the image on upload, etc. then you will want to ensure you save memory by specifying the decode size for the ImageBrush’s source specifically.  This is easily done in markup using a slightly more verbose image source syntax.  Using the above example it would be modified to be:

<Ellipse Width="250" Height="250">
    <Ellipse.Fill>
        <ImageBrush>
            <ImageBrush.ImageSource>
                <BitmapImage DecodePixelHeight="250" DecodePixelWidth="250" UriSource="ms-appx:///highfive.jpg" />
            </ImageBrush.ImageSource>
        </ImageBrush>
    </Ellipse.Fill>
</Ellipse>

No real change other than telling the framework what the decode size should be in Line 5 using DecodePixelHeight and DecodePixelWidth.  The rendering would be the same in my case.  This tip is very helpful to when you are most likely going to be displaying a smaller image than the source and not the other way around. 

So there you go.  Go crazy with your circular people representations!  Hope this helps.

| Comments

Wow, what a week.  I have to say even as employees of Microsoft, we get surprised when we go to our conferences and see some of the bigger announcements.  There are things that are being worked on that are new or just in different divisions that we’re not focused on.  This past week at the Build 2015 conference was an example of that for me.  Lots of good stuff for developers from client to server!

Universal Windows Platform

At Build this year we introduced the Universal Windows Platform v10 with a set of new APIs and unified features for all Windows devices.  Perhaps the best vision of this is the Day 2 Keynote where Kevin Gallo walked through an example of this and a single app running on tablet, phone, Surface Hub, HoloLens, etc. 

Visit the keynote and watch the whole thing or if you want to jump to the start of this portion it starts at about 23 minutes in.  A really well done, compelling demonstration of the Universal Windows Platform.

XAML Session Recap

For the XAML developer on Windows, there was a lot of goodness shown from my team.  We’ve been working hard on a lot of internals and new API exposure for the Universal Windows Platform.  Our team had some representation in some deep-dive sessions from Build and the recordings are all now available…here’s a list for you to queue up:

One of the things I was really happy to have is part of the Office team come and talk about how they build Office on the same platform we ask you to build apps on.  It is good insight into a large application with lots of legacy and goals that might not be typical of smaller apps or smaller ecosystems.  A big focus for XAML this release was performance given that customers like Office and the Windows shells themselves leveraging XAML for their UI.

I hope that if you are a XAML developer you take some time to look at what new features are available in the Universal Windows Platform for you in Windows 10.

Get the goods!

If you want to get started playing around, the best way is to be a part of the Windows Insiders program.  Everything you need to get started you can find here https://dev.windows.com/en-US/windows-10-for-developers.  You’ll want to join the Insiders program, then download the Visual Studio tools and get started creating/migrating apps!  To help get you started after that here are some helpful links:

Give us feedback!

As you play around with the bits, please continue to give us feedback.  The best way is to be involved in the conversation on the forums.  Ask questions there, get help from the community, share learnings, etc.  Secondarily the Windows Insider Feedback tool (an app that is installed on Windows already for you as ‘Windows Feedback’) is available for you to give direct feedback to the teams.  Please choose categories carefully so that the feedback gets directly to the right team quickly. 

Thanks for helping make the Windows Platform better.  I hope these direct links help you jumpstart your learning!

| Comments

I can’t wait to talk XAML at Build 2015 with you all!!!

Hey all!  Been really quiet here on the blog as I’ve been focusing on both new personal and work aspects of my life.  On the work front, the team I work on has been working hard on delivering on our promise of converged Windows app development using the native UI framework for the platform – XAML.  It has been a real journey of change, stress of new customers and some exciting changes to the platform that are just the beginning.

My team (XAML) and the entire Windows Developer Platform team will be joining thousands of you in San Francisco for Build 2015 to share what we’ve been working on for Windows 10.

I’ll be joining members of my team in San Francisco to talk about what’s new in the UI framework, some ideas/tools/new ‘stuff’ to build apps across mobile and desktop, improvements in data binding, all the work we did in the platform for performance, and more!

Aside from San Francisco, I’ve been fortunate enough to be asked to deliver an address at a few events as a part of the Build Tour.  These are a set of events across the globe (25 events running from after Build main event until near end of June) that bring the best of Build along with local flare/content with partner showcases and are FREE events!

I will be joining the local community of developers in Atlanta (20-May-2015 at the Georgia Aquarium) and Chicago (10-June-2015 at The Field Museum of Natural History) in the United States event.  Unfortunately (for me as well as I would have loved to meet more in the world) some of the international events conflicted with personal obligations so more of my colleagues will be attending those representing the developer platform.

Please consider joining me and colleagues around the world at these FREE events by registering for your closes Build Tour at http://www.build15.com and encourage your friends and co-workers to register as well!

I look forward to sharing our work with you, hearing your feedback about the Windows developer platform and seeing what kind of apps you are bringing to the ecosystem for our mutual customers!

See you in San Francisco, Atlanta and Chicago!

| Comments

I’m just coming back from Build 2014 and it was a great pleasure to talk to customers/developers.  It is one of the best parts of my job right now in seeing how customers use the technology our team represents.  If you are a XAML developer and didn’t have a chance to go to Build or haven’t watched all the sessions, here’s a quick short list of recommendations I’d have:

There are many more (app model, localization, accessibility, tiles, notifications, etc.) so please do look at the event site and download/watch your favorites.  I think the list above gives you a good intro to the UI area changes and introduction to the concepts of Universal Windows apps.  If you haven’t heard of that concept yet, you can jump to the Keynote from Day 1 for the quick demo.

Add Reference

The last session above is one that I want to write about today in this post.  In current form, a Universal Windows app in Visual Studio Update 2 allows you to maximize your sharing of code/assets across your Windows Store and Windows Phone app.  If you are like most developers, you rely on a great ecosystem of libraries and SDKs to augment your app and add functionality, UI or make things easier to develop.  In our keynote sample, the app we migrated (SportsLeague app) used JSON.NET and we showed that we are able to re-use the same library (which in this case happened to be a Portable Class Library, aka PCL) across the different endpoints.

One thing that is important is that you will need to add these references to each of your project ‘heads’ (the term we use to describe each endpoint in a shared project solution).  For some that are using direct binary DLL references to PCL libraries should be okay.  For others that are using Extension SDKs and/or NuGet packages, you may find yourself into some scenarios where either the SDK is different or the NuGet package isn’t updated yet to understand the Windows Phone 8.1 project type.  There are a number of these that are already updated like JSON.NET, Caliburn.Micro, etc.  If you find yourself using a library that isn’t updated yet, you may want/need to prod the author to update.  Better yet, if it is Open Source, submit a pull request with the update yourself!

SQLite or other native Extension SDKs

The other category are things that might be platform-specific and/or native.  These things are generally more complex than something that might work in a PCL and have dependencies on various native compiler/linker options or have been compiled in such a way that are different for the Phone device versus a tablet device.  One such example is SQLite.

SQLite is an in-process library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine. The code for SQLite is in the public domain and is thus free for use for any purpose, commercial or private. SQLite is currently found in more applications than we can count, including several high-profile projects.

SQLite links against the C++ Runtime and as such needs to make sure the right linking happens for the phone and tablet CRT profiles.  Right now, the SQLite for Windows Phone Runtime 8.1 is in some testing, but since a lot of people have been asking me about it, I’ll share my private build from source of the SDK.  This comes with a “works on my machine” guarantee :-).  This is a build of SQLite from their source, which is Open Source, and modified to compile/link against the Windows Phone 8.1 SDK.  When the official version comes out you should update to that version from their site.  For now, you can download my build of  UPDATE (12-MAY-2014): SQLite team put out their official build for Windows Phone 8.1: SQLite for Windows Phone 8.1 here.

Updating your Extension SDKs and NuGet packages

If you are an author of one of these SDKs that people use, please consider doing an update to make your customers happy.  If you are an Extension SDK provider you will want to produces an Extension SDK for Windows Phone 8.1.  If you already have a WinRT SDK, then you may just be able to copy the manifest, etc. and just produce changes to your manifest so it installs to the right location.  Here is an example:

<Installation AllUsers="true" Scope="Global">
  <InstallationTarget Id="Microsoft.ExtensionSDK" 
    TargetPlatformIdentifier="WindowsPhoneApp" 
    TargetPlatformVersion="v8.1" 
    SdkName="SQLite.WinRTPhone81" SdkVersion="3.8.4.1" />
</Installation>

As you can see in lines 3,4 above the TPI/V values are different than your existing SDK which tell the SDK where to install.

If you are an author of a NuGet package, you also will want to make your package Windows Phone 8.1 aware.  Again, if you have an existing package that works with Windows 8.1, then you may just be able to duplicate the content/lib/tools to a folder labeled ‘wpa81’ and test that out.  Example NuSpec:

<?xml version="1.0" encoding="utf-8"?>
<package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
    <metadata>
        <id>Callisto</id>
        <version>1.5.0</version>
        <title>Callisto</title>
        <authors>Tim Heuer</authors>
        <owners>Tim Heuer</owners>
    </metadata>
    <files>
        <file src="lib\portable-win81+wpa81" target="lib\portable-win81+wpa81" />
    </files>
</package>

If you see at line 11 the ‘portable-win81+wpa81’ it allows me to combine the two targets telling NuGet this applies to either.  Of course if I had any nuanced differences I could also just use ‘wpa81’ and put the phone-specific lib (or assets) there.

In both cases if you have any UI aspects, most likely you may want to do some work here to make sure that any UI assets are tailored to the device targets for a great experience.

I hope this helps clarify some of the reference questions that I’ve received and I hope that if you are an SDK author you will work quickly to help your customers realize their goals of a universal Windows app!

Hope this helps!

| Comments

A few weeks ago I had the great pleasure of being in front of you, our developer customers (and friends) at the Microsoft BUILD conference. (I never know how to write “build” in a sentence and refuse to use the “//” in front of it.) These are things that I LOVE doing and wish I could do it more. I had the privilege of introducing an overview of what was new in the XAML UI framework for Windows 8.1. All the sessions are recorded so please go view mine and review it how you think so they might invite me back!

In my session I gave some preview of some of the great new XAML tooling that is introduced for developer productivity in Visual Studio 2013 which, as of this writing, is currently in preview form and available for download. My colleague Unni followed my session with one specifically about XAML tooling enhancements with a whirlwind tour of all the new features. Please go check out his session: What’s New in Blend and Visual Studio for XAML Developers for the complete details.

One of the things I showed was the introduction of Visual Studio (VS) code snippets for the XAML editor. This was one of the customer requests for a while for the XAML editor and is now available in the VS 2013 preview! In my presentation I showed a common task that I do which is to have many elements and wrap them in a StackPanel. I’ve gotten lazy and wanted a quick ‘refactor’ way to do this and now I can! A few have emailed me asking where the snippet I used was as nothing was working in the preview for them. As of this writing, the functionality was in the preview, however no default XAML code snippets are provided. I’ve responded to a few on an MSDN forum thread offering to share my snippets and someone suggested I post more details, so here it is!

Anatomy of a Code Snippet

Code Snippets in VS are basically XML files that sit in a special location (one of two locations, global or user). These code snippets can apply to many things including languages (C#, VB, etc.) as well as ‘markup’ languages (CSS and now XAML). You can read more in-depth data about VS Code Snippets here. The basics that I think you want to know are the two main types of snippets: Expansion and SurroundWith.

An Expansion snippet is one that you invoke and it gives you placeholders for stuff to fill out. My most widely used one is ‘foreach’ in C#. You start typing foreach, then hit tab-tab and you are presented with a template, more or less, to complete. A SurroundWith snippet is one that surrounds (duh!) the selected content in the editor surface with your template. An example of this is the #region snippet which puts the begin/end region tags around selected code. It is important to note that these can be used exclusively or together. That is to say I can have a SurroundWith snippet that is also an Expansion. In fact, the #region one is a good example: it surrounds the selected code and also gives you a field to complete for the region name. The Code Snippet structure is the same for most languages with the difference being that in the Code node of the snippet definition it defines which language it applies to for the editors.

NOTE: Creating Code Snippets is a very manual process. At the time of this writing there was no really great tool to “extract” a chunk of code and turn it into a code snippet. There are a few attempts out there, but most have been abandoned and not all working.

Once you have these XML files (.snippet files for VS), you place them in well-known locations or can use the Code Snippets manager in VS (more on that later).

XAML Code Snippets

As noted above the XAML code snippets are the same structure as the C# snippets with the difference being the Language attribute on the Code node in the definition. In my demo I used a StackPanel SurroundWith snippet with the following definition:

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippet Format="1.0.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <SnippetTypes>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
    <Title>Vertical StackPanel</Title>
    <Author>Tim Heuer</Author>
    <Description>XAML snippet for surrounding content in a vertical StackPanel</Description>
    <HelpUrl>
    </HelpUrl>
    <Shortcut>vsp</Shortcut>
  </Header>
  <Snippet>
    <Code Language="XAML"><![CDATA[<StackPanel>$selected$$end$</StackPanel>]]></Code>
  </Snippet>
</CodeSnippet>

Notice the <Code> element and how it has the Language=”XAML”? That is the only difference between this and a C# one. There are keywords for certain things like selected (which is a marker for selected content) and end (which is where you want the cursor to be at the completion of the snippet) that you can use and are in the documentation. Here is another example of an Expansion XAML snippet for an AppBarButton:

<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>AppBarButton</Title>
            <Shortcut>abb</Shortcut>
            <Description>Code snippet for XAML AppBarButton</Description>
            <Author>Tim Heuer</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Declarations>
                <Literal>
                    <ID>icon</ID>
                    <ToolTip>The Icon value to use for the visual</ToolTip>
                    <Default>Emoji</Default>
                </Literal>
                <Literal>
                    <ID>label</ID>
                    <ToolTip>The text label for the button</ToolTip>
                    <Default>My Label</Default>
                </Literal>
                <Literal>
                    <ID>uniqueid</ID>
                    <ToolTip>The unique ID for the button</ToolTip>
                    <Default>MyAppBarButton</Default>
                </Literal>
            </Declarations>
            <Code Language="XAML"><![CDATA[<AppBarButton x:Uid="$uniqueid$" x:Name="$uniqueid$" Label="$label$" Icon="$icon$" />$end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

As you can see they are pretty simple to use!

Adding Code Snippets to VS

There are two ways to distribute snippets: as raw .snippet files or with an installer. You can send someone a .snippet file and they can use the Code Snippets Manager tool to import it into their environment. This is a per-user method. From VS you would use the Tools menu and choose the Code Snippets manager:

<pic>

From here you would navigate to the XAML folder, then choose Import and select your .snippet files. These would then import them into your local profile (Documents\Visual Studio 2013\Code Snippets) and be ready for immediate use. Another way is through an installer. Now up until VS 2013 there was the VSI installer (as documented here on MSDN) which has since been eclipsed by the VSIX extensibility method. Right now there doesn’t appear to be much documentation on this method, but you *can* distribute code snippets via the VSIX installer. VSIX is basically a ZIP file format with a manifest and content. For this purpose the manifest describes the targets and the package definition for the VSPackage we are installing, which is in this case a folder of snippets. This is a little tricky method to get VSIX to use as an installer for snippets, but works. I won’t detail out the entire process here, but leave you with a few screenshots and you can download the file and look at the contents to see how it works…again it is a regular ZIP file so just rename and explore.

Contents of VSIX:

Contents of VSIX package

Installer dialog:

VSIX installer dialog

Once installed your VSIX-deployed snippets show up in the Extension Manager:

Extension manager listing

And there you have it! A simple way to distribute your code snippets. This VSIX can be put on VS gallery as well so that you can update it there and anyone who installed it can get updates from within VS itself!

To actually use the code snippets, from within the XAML editor use the shortcuts CTRL+K,S (for surround snippets):

Surround code snippet

or CTRL+K,X (for expansion snippets):

Expansion snippet

Expansion snippet completed

Summary

Code snippets can be a powerful productivity tool for VS. You probably use them daily (like foreach) and maybe didn’t even realize it! Now that this concept is extended to XAML there are some great opportunities to increase your markup productivity by encapsulating some things that you do often into a XAML code snippet. Right now the VS gallery doesn’t support uploading the method for VSIX that I have described so you can download my VSIX for some code snippets examples here for now.

Hope this helps!