| Comments

I was finally getting around to updating a little internal app I had that showed some various data that some groups use to triage bugs.  As you can imagine it is a classic “table of stuff” type dataset with various titles, numbers, IDs, etc. as visible columns.  I had built it using Blazor server and wanted to update it a bit.  In doing some of the updates I came across a preferred visual I liked for the grid view and applied the CASE methodology to implement that.  Oh you don’t know what CASE methodology is?  Copy Always, Steal Everything.  In this case the culprit was Immo on my team.  I know right? I couldn’t believe it either that he had something I wanted to take from a UI standpoint.  I digress…

In the end I wanted to provide a rendered table UI quickly and provide a global filter:

Picture of a filtered data table

Styling the table

I copied what I needed and realized I could be using the Bootstrap styles/tables in my use case.  Immo was using just <divs> but I own this t-shirt, so I went with <table> and plus, I like that Bootsrap had a nice example for me.  Off I went and changed my iteration loop. to a nice beautiful striped table.  Here’s what it looked like in the styling initially:

<table class="table table-striped">
    <thead class="thead-light">
        <tr>
            <th scope="col">Date</th>
            <th scope="col">Temp. (C)</th>
            <th scope="col">Temp. (F)</th>
            <th scope="col">Summary</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var forecast in forecasts)
        {
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.TemperatureF</td>
                <td>@forecast.Summary</td>
            </tr>
        }
    </tbody>
</table>

Adding a filter

Now I wanted to add some filtering capabilities more globally.  Awesome “boostrap filtering” searching I went and landed on this simple tutorial.  Wow! a few lines of JavaScript, sweet, done.  Or so I thought.  As someone who hasn’t done a lot of SPA web app development I was quickly hit with the reality that once you choose a SPA framework (like Angular, React, Vue, Blazor) that you are essentially buying in to the whole philosophy and that for the most part jQuery-style DOM manipulations will no longer be at your fingertips as easily.  Sigh, off to some teammates I went to complain and look for their sympathy.  Narrator: they had no sympathy.

After another quick chat with Immo who had implementing the same thing he smacked me around and said in the most polite German accent “Why don’t you just use C# idiot?”  Okay, I added the idiot part, but I felt like he was typing it and then deleted that part before hitting send.  Knowing that Blazor renders everything and then re-renders when things change I just had to implement some checking logic in the foreach loop.  First I needed to add the filter input field:

<div class="form-group">
    <input class="form-control" type="text" placeholder="Filter..." 
           @bind="Filter" 
           @bind:event="oninput">
</div>
<table class="table table-striped">
...
</table>

Observe that I added an @bind and @bind:event attributes that enable me to wire these up to properties and client-side events.  So I’m telling it to bind the input to my ‘Field’ property and do this on ‘oninput’ (basically when the keys are typed in the input box).  Now off to implement the property.  I’m doing this simply in the @code block of the page itself:

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }

    public string Filter { get; set; }
}

And then I needed to implement the logic for filtering.  I’m doing a global filter so that I can control whatever fields I want searched/filtered.  I basically have the IsVisible function called each iteration and deciding if it should be rendered.  For this sample I’m looking at if the summary contains the filter text or if the celsius or farenheit temperatures start with the digits being entered.  I actually have access to the item model so I could even filter off of something not visible if I wanted (which would be weird for your users, so you probably shouldn’t do that).  Here’s what I implemented:

public bool IsVisible(WeatherForecast forecast)
{
    if (string.IsNullOrEmpty(Filter))
        return true;

    if (forecast.Summary.Contains(Filter, StringComparison.OrdinalIgnoreCase))
        return true;

    if (forecast.TemperatureC.ToString().StartsWith(Filter) || forecast.TemperatureF.ToString().StartsWith(Filter))
        return true;

    return false;
}

Implementing the filter

Once I had the parameter, input event, and the logic, now I just needed to implement that in my loop.  A simple change to the foreach loop does the trick:

<table class="table table-striped">
    <thead class="thead-light">
        <tr>
            <th scope="col">Date</th>
            <th scope="col">Temp. (C)</th>
            <th scope="col">Temp. (F)</th>
            <th scope="col">Summary</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var forecast in forecasts)
        {
            if (!IsVisible(forecast))
                continue;
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.TemperatureF</td>
                <td>@forecast.Summary</td>
            </tr>
        }
    </tbody>
</table>

Now when I type it automatically filters the view based on input.  Like a thing of beauty.  Here it is in action:

Animation of table being filtered

Pretty awesome.  While I’ve used the default template here to show this example, this technique can of course be applied to your logic.  I’ve put this in a repo to look at more detailed (this is running .NET 5-rc2 bits) at timheuer/BlazorFilteringWithBootstrap.

More advanced filtering

This was a simple use case and worked fine for me.  But there are more advanced use-cases, better user experiences to provide more logic to the filter (i.e., define your own contains versus equals, etc.) and that’s where 3rd party components come in.  There are a lot that provide built-in grids that have this capability.  Here are just a few:

Just to name a few popular ones.  These are all great components authored by proven vendors in the .NET component space.  These are way richer than simple filtering and provide a plethora of capabilities on top of grid-based rendering of large sets of data.  I recommend if you have those needs you check them out.

I’m enjoying my own journey writing Blazor apps and hope you found this dumb little sample useful.  If not, that’s cool.  I mainly am bookmarking here for my own use later when I forget and need to search…maybe I’ll find it back on my own site.

Hope this helps!

| 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

Recently I’ve been writing a few XAML Behaviors for Callisto and looking to take some contributions on this front as well.  One thing that I realized is that this will bring in a new dependency for my toolkit.  I’m still trying to figure out if I want to do that or not, but that’s not what this post is about.  My #1 consumers of Callisto are using the NuGet package.  I also distribute Callisto through the Visual Studio gallery as an Extension SDK. 

What’s the difference you ask?

Extension SDK vs. NuGet package

While not an official answer, this is my basic definition I always describe to people.  It is not complete comparing all features but defines what I see as the core difference between the two.

An Extension SDK is installed per-machine and allows you to install it once and use for multiple projects.  It is deployed through the Visual Studio extensions mechanism (VSIX) which has a feature that allows for you to be notified if a version is updated in the IDE.  This is a proactive update that even if you just have VS open you get a little toast if any of your extensions are updated…very handy.  Extension SDKs also have some cool features about enabling you to supply design-time assets that don’t ship with your application and also provide some nice per-architecture deployment capabilities rather easily.  Extensions SDKs have great support for native projects as well.

NOTE: People sometimes confuse VSIX == Extension SDK.  VSIX is a packaging and installer mechanism, not an SDK only.  You can have a VSIX that deploys a tool, templates or an SDK. 

A NuGet package is installed per-project when added as a reference to your project in Visual Studio.  You can add them similarly through the “Add Reference” type dialogs (although in VS it is called Manage NuGet References) and once you select your package it is installed (per the package’s manifest instructions) into your project.  If you want to use the package for multiple projects, you must repeat this step for each project.  One benefit of the NuGet route is that it does become a part of your project, you can check it in to source control, etc.  One disadvantage currently is it doesn’t do the design-time aspects and the per-architecture deployment aspects well.

You might look at these differences and wonder why you would want to take a dependency on a per-machine item in a per-project package.  And you’d be right to ask that question.  Again, I’m still wondering myself.  However one thing to note is some Microsoft-delivered SDKs are delivered shipped with Visual Studio as Extension SDKs, as is the case with the Behaviors SDK.  So you can’t have VS installed without it, but NuGet also can be used in non-VS scenarios as well.  This can be complex depending on your package/needs.  For mine, this might be acceptable.

Telling your NuGet package to include an Extension SDK

I admit that this title is a bit misleading, but allow me to explain first.  NuGet allows for you to extend the package install a bit by including a PowerShell script to run during install (and uninstall) of the package.  This script can give you context of 4 things in your project/tools environment: install path (where the package is being installed), tools path (the folder where the script will actually reside), package (the NuGet package object) and project (a reference to the IDE Project instance).  It is this last piece that helps you manipulate the project structure.

In Visual Studio 2012 a new interface was added to the VS project extensibility to accommodate automating adding Extension SDKs.  This new interface, References2, includes a new method AddSDK.  This is the hook where you can add Extension SDKs.

NOTE: The other methods of Add() are still supported and would allow you to add references to files, GAC assemblies, etc.

The AddSDK has 2 parameters but only one is required, the identifier of the Extension SDK (it is weird to me that the first param is optional but oh well).  The ID of the Extension SDK is the name of the SDK (as defined by the deployed folder or the ProductFamilyName in the SDKManifest.xml) combined with the version number.  A final string to pass in the second parameter of AddSDK is then something like:

BehaviorsXamlSDKManaged, version=12.0

Now that we know this format we can add this to our NuGet install PowerShell script.  Here’s an example of what one might look like:

param($installPath, $toolsPath, $package, $project)
$moniker = $project.Properties.Item("TargetFrameworkMoniker").Value
$frameworkName = New-Object System.Runtime.Versioning.FrameworkName($moniker)
Write-Host "TargetFrameworkMoniker: " $moniker
if ($frameworkName.Version.Build -ge 1)
{
    Write-Host "Adding Behaviors SDK (XAML)"
    $project.Object.References.AddSDK("Behaviors SDK (XAML)", "BehaviorsXamlSDKManaged, version=12.0")
}

Notice the first line with the param() function.  Per the NuGet documentation this is required to get the environment objects like $project.  Now in line 8 we have a reference to the VSProject, then can get at its object model, get to the references and add one to an Extension SDK, in this case the Behaviors SDK installed with Visual Studio 2013.

The tricky thing with this approach is that when someone were to remove a package you may be tempted to remove the SDK reference as well.  Since there is not really good tracking whether someone may be using the reference, it is advised against that approach.  Your app developer may be using that Extension SDK now outside of your package and you have no reliable way of knowing that.  What you can do is alert the developer during uninstall:

param($installPath, $toolsPath, $package, $project)
Write-Host "Callisto was removed, however Blend SDK (XAML) was not
 as it may be a dependent reference on other things in your project.
  If you do not need it, manually remove it."

Not awesome, but helpful at least to output some data to the developer.

Summary

Again, while this may be unconventional and some NuGet purists will scoff at the mere suggestion of doing something like this, it is good to know this is easily available.  My goal is to help developers (including myself) and if there are ways to merge these two worlds of Extension SDKs and NuGet packages until (if?) they unify then by all means I love helping make my productivity better.

Hope this helps anyone!