ExpandCommand = new DelegateCommand<ListItem>(DoExpand);

       private void DoExpand(ListItem obj)
        {
            var data = new List<ListItem>(this.List);
            var expanded = obj.IsExpanded;
            foreach (var item in data)
                item.IsExpanded = false;
            obj.IsExpanded = !expanded;
            this.List = data;
        }

There are a few implementations of tree views for WinRT available, but none of them did exactly what I wanted. I wanted something very simple (300 lines of code) that I could tailor the look and feel easily without getting bogged down in generic hierarchical data templates etc. I’ve written 2 or 3 tree views but the most recent one came out pretty well so I thought I would share.

The basic idea is to use a ListView and only display the expanded items, and indent them depending on their level in the hierarchy. By using a ListView, we get all the rich templating and mouse over behaviours plus the entrance transitions etc.

A couple of caveats with this implementation. Rather than go for a generic solution, the tree view has knowledge of the items it is displaying (Item and ItemFolder in the sample). So if you use it, you will have to modify it to understand your data types.

Secondly, it stores the expanded state of the nodes in the data model, which means you can’t have two tree views operating on the same data otherwise they will expand and collapse together as they share the same data.

I took the hit on these two things for simplicity’s sake, but the approach will not appeal to the purists.

The tree view assumes it has a collection of Item’s and ItemFolder’s as its ItemSource, and that an ItemFolder has a Children property containing another similar list.

I chose to use files and folders for the sample, but clearly you could display any tree structure.

I’ll not explain the control in any great detail as it would take up too much space, but it is worth pointing out one rather cool method in ItemFolder – the AllChildren property. I found when working with trees of data I was constantly writing recursive functions as these are the easiest way to process trees, but it started getting quite tiresome, so I came up with this neat little property:

public IEnumerable AllChildren
{
     get
     {
         foreach (Item child in this.Children)
         {
             yield return child;

             ItemFolder folder = child as ItemFolder;
             if (folder != null && folder.Children.Count > 0)
             {
                 foreach (Item grandChild in folder.AllChildren)
                 {
                     yield return grandChild;
                 }
             }
         }
     }
}

This hides the recursion in the AllChildren property and allows you to process the tree as a flat list with a foreach statement.

foreach(var child in parent.AllChildren)

{

}

Its the first time I’ve use yield and it really helps when working with trees.

Note that the tree view watches all its children, so if you add something into one of the Children collections, it will automatically update.

Hope you like it, here is the sample code. You are free to use it in your code, even for commercial use.

https://theuxblog20160710035436.azurewebsites.net/TreeViewSample.zip

Enjoy!

Paul Tallett, UX Global Practice, Microsoft UK

Disclaimer: The information on this site is provided "AS IS" with no warranties, confers no rights, and is not supported by the authors or Microsoft Corporation. Use of included script samples are subject to the terms specified in the Terms of Use.

When dealing with fonts, many apps show a Combo Box listing all the fonts installed on the system and allow the user to choose from them. However, this functionality is not directly supported in XAML, so to implement this in a Windows Store Universal Windows Platform (UWP) app we need to dip into some SharpDX.

Here’s what the sample looks like:

The combo box lists all the installed fonts and allows the user to pick from one, setting the font on the text box.

This is relatively easy once you’ve added a reference to SharpDX as it provides a GetSystemFontCollection method that pretty much does this. We just wrap it in some code to make it easy to call.

// Code taken straight from SharpDX\Samples\DirectWrite\FontEnumeration\Program.cs
public static List<InstalledFont> GetFonts()
{
    if(fonts != null)
        return fonts;
    var fontList = new List<InstalledFont>();

    using (var factory = new Factory())
    {
        using (var fontCollection = factory.GetSystemFontCollection(false))
        {
            var familyCount = fontCollection.FontFamilyCount;
            for (int i = 0; i < familyCount; i++)
            {
                try
                {
                    using (var fontFamily = fontCollection.GetFontFamily(i))
                    {
                        var familyNames = fontFamily.FamilyNames;
                        int index;

                        if (!familyNames.FindLocaleName(CultureInfo.CurrentCulture.Name, out index))
                            familyNames.FindLocaleName("en-us", out index);

                        string name = familyNames.GetString(index);
                        string display = name;
                        using (var font = fontFamily.GetFont(index))
                        {
                            if (font.IsSymbolFont)
                                display = "Segoe UI";
                        }

                        fontList.Add(new InstalledFont { Name = name, DisplayFont = display });
                    }
                }
                catch { }       // Corrupted font files throw an exception - ignore them
            }
        }
    }

    fontList.Sort();
    fonts = fontList;
    return fontList;
}

I noticed when calling this that some systems have corrupt font files and the above call throws an exception when querying for IsSymbolFont. It is much better to have the exception in this method than later when we try to use the font, as here we can just ignore it.

I have provided a sample project with all the code hooked up. You are free to use it in your code, even for commercial use.

https://theuxblog20160710035436.azurewebsites.net/FontSample.zip

Enjoy!

Paul Tallett, UX Global Practice, Microsoft UK

Disclaimer: The information on this site is provided "AS IS" with no warranties, confers no rights, and is not supported by the authors or Microsoft Corporation. Use of included script samples are subject to the terms specified in the Terms of Use.

XAML provides a rich framework for providing beautiful, responsive designs with many built in controls to simplify the building of apps. However, it is often a requirement to allow the user to choose from a set of themes in order to change the appearance of the entire app. For example, a dark and a light theme, maybe a blue or a red theme, or maybe you want to implement a daytime and night-time mode. The ThemeResource scheme is available in UWP apps, but does not allow the theme to be changed dynamically at runtime.

In this article I outline a simple extensible method based on data binding that allows you to define an unlimited set of themes for your app, and to allow the user to pick from them dynamically.

Here are some screenshots of the sample in both dark and light themes.

By clicking the “Switch” button, the app changes appearance completely. Notice that the app title bar also changes colour.

We start by defining a class in Theme.cs that contains properties for all of the different colours used in our UI. This is completely extensible, you can add as many colour properties as you like for each theme, but the more you add, the more work it is to define a new custom theme. In the sample we really only use a small number of properties, but you can define mouse over properties and disabled properties to control all aspects of your UI. This is also not limited to brushes and colours, you could add other data types to this.

Then, App.xaml, we define the themes. We only defined two, a light and a dark theme, but you can have as many as you like:

<local:ThemeManager x:Key="ThemeManager"/>
<local:Theme x:Key="DarkTheme"  ForegroundColor="#123456" BackgroundColor="Black"
          TextColor="White" PanelBackgroundColor="#FF2b2b2b"
           PopupPanelBackgroundColor="#12345678" SettingsBackgroundColor="#12345678"
           ViewerBackgroundColor="#FF222222"/>
<local:Theme x:Key="LightTheme" ForegroundColor="#123456" BackgroundColor="White"
           TextColor="Black" PanelBackgroundColor="#FFEEEEEE"
           PopupPanelBackgroundColor="#12345678" SettingsBackgroundColor="#12345678"
           ViewerBackgroundColor="White"/>

Notice also the definition for ThemeManager. This is the class that will maintain the current theme for us and allow us to switch themes. ThemeManager is a singleton, and we add some code to our ViewModel to allow us to access the ThemeManager from code behind.

private ThemeManager themeManager = null;
public ThemeManager ThemeManager
{
    get
    {
        if (this.themeManager == null)
        {
            App app = (App.Current) as App;
            this.themeManager = app.Resources["ThemeManager"] as ThemeManager;
        }

        return this.themeManager;
    }
}

This is important to make sure we are accessing the same ThemeManager instance in code as we do declaratively in the XAML markup.

Then, somewhere convenient, we load the themes:

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    this.DataContext = ViewModel.Current;
    ViewModel.Current.ThemeManager.Load();
}

Now all we need to do is in our XAML definitions of our UI, we must not use fixed colours but must always reference the theme colours:

<TextBlock Foreground="{Binding CurrentTheme.TextBrush, Source={StaticResource ThemeManager}}" FontSize="30" Text="This is some sample text" Grid.Row="1" HorizontalAlignment="Center"/>
<Button Content="Switch" FontSize="15" Grid.Row="2" Margin="0,10" HorizontalAlignment="Center" Click="Button_Click"
        Foreground="{Binding CurrentTheme.TextBrush, Source={StaticResource ThemeManager}}"
        BorderBrush="{Binding CurrentTheme.TextBrush, Source={StaticResource ThemeManager}}" BorderThickness="1"/>

Now when we change the CurrentTheme property in code, possibly from our settings page, all of our UI changes colour as the databinding NotifyPropertyChanged will fire.

Because it is dynamic, the user gets immediate feedback of how the UI will look with the new theme. It is also easy to save the current theme index in a local settings file and restore it when the app starts up, so that the user’s preferences are kept (I have commented out this code). If you add themes, add them to the end of the list for backwards compatibility, so that older versions of your settings file will reference the correct chosen colour scheme.

I have included a sample project with all the code. You are free to use it in your code, even for commercial use.

https://theuxblog20160710035436.azurewebsites.net/themingsample.zip

Enjoy!

Paul Tallett, UX Global Practice, Microsoft UK

Disclaimer: The information on this site is provided "AS IS" with no warranties, confers no rights, and is not supported by the authors or Microsoft Corporation. Use of included script samples are subject to the terms specified in the Terms of Use.

Back in Windows 8, Modern Apps were full screen and could only have one window open. In Windows 10, a Universal Application (UWP) can have multiple windows (views) open at once so that a user can, for example, work on multiple documents at once, and switch between windows just like classic Win32 applications such as Word or PowerPoint.

In this post, I’ll show you just how easy it is to do that, and how all UWP apps should implement multiple windows if it is appropriate for their functionality.

All you need to be multi-window is to call the View management APIs in your App.xaml.cs. In your OnLaunched method just add the following code:

protected override async void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;
    if (rootFrame == null)                                      // First activation
    {
        rootFrame = new Frame();
        rootFrame.NavigationFailed += OnNavigationFailed;
        Window.Current.Content = rootFrame;
        if (rootFrame.Content == null)
        {
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }

        Window.Current.Activate();
        dispatchers.Add(CoreWindow.GetForCurrentThread().Dispatcher);
    }
    else                                                        // Subsequent activations - create new view/UI thread
    {
        var view = CoreApplication.CreateNewView();
        int windowId = 0;
        await view.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
        {
            windowId = ApplicationView.GetApplicationViewIdForWindow(CoreWindow.GetForCurrentThread());
            var frame = new Frame();
            frame.Navigate(typeof(MainPage), null);
            Window.Current.Content = frame;
            Window.Current.Activate();
            ApplicationView.GetForCurrentView().Consolidated += View_Consolidated;
        });

        // Run this on the last dispatcher so the windows get positioned correctly
        bool viewShown;
        await dispatchers[dispatchers.Count - 1].RunAsync(CoreDispatcherPriority.Normal, async () =>
            { viewShown = await ApplicationViewSwitcher.TryShowAsStandaloneAsync(windowId); });
        dispatchers.Add(view.Dispatcher);
    }
}

Each view gets its own UI thread. Note how I keep a list of all the dispatchers as this can be useful if you need to do operations in the other windows. It is really important to avoid cross thread access of UI resources as this will crash your application with a cross-thread exception. The solution I use is to have completely separate ViewModel’s for each thread, that are easily accessed in code with ViewModel.Current to reference the ViewModel for the current thread.

public class ViewModel
{
    private static Dictionary<CoreDispatcher, ViewModel> viewModels = new Dictionary<CoreDispatcher, ViewModel>();
    private static int count = 0;
    public static ViewModel Current
    {
        get
        {
            lock (viewModels)
            {
                var dispatcher = CoreWindow.GetForCurrentThread().Dispatcher;
                if (dispatcher == null)
                    throw new ArgumentException("ViewModel.Current must be called from a UI thread");
                ViewModel viewModel = null;
                if (viewModels.TryGetValue(dispatcher, out viewModel))
                    return viewModel;
                viewModel = new ViewModel();
                viewModels[dispatcher] = viewModel;
                viewModel.InstanceId = ++count;             // This is just for the demo project
                return viewModel;
            }
        }
    }

    public int InstanceId { get; set; }
}

Calling ViewModel.Current always returns the correct ViewModel corresponding to the View’s UI thread, so it is very difficult to run into cross-thread problems.

Here is a test project with all the code. Run it, then right click the taskbar icon and run more instances. You will see that each view gets its own ViewModel and displays different content.

The test project can be downloaded here: You are free to use it in your code, even for commercial use.

https://theuxblog20160710035436.azurewebsites.net/MultiWindowSample.zip

Enjoy!

Paul Tallett, UX Global Practice, Microsoft UK

Disclaimer: The information on this site is provided "AS IS" with no warranties, confers no rights, and is not supported by the authors or Microsoft Corporation. Use of included script samples are subject to the terms specified in the Terms of Use.

I recently needed to draw text outlines on one of my projects from a Windows 10 Store app. This is not directly supported by XAML so I had to use some SharpDX DirectX code to retrieve the font outlines and then draw as a Path object. The result can be seen here.

I packaged up the solution into an easy to use User Control so the XAML used for the above was easy:

<local:OutlineTextBlock Text="Hello World!" FontSize="100" FontFamily="Ravie" StrokeThickness="2" VerticalAlignment="Center" HorizontalAlignment="Center">
    <local:OutlineTextBlock.Stroke>
        <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
            <GradientStop Color="Red" Offset="0.3"/>
            <GradientStop Color="Green" Offset="1"/>
        </LinearGradientBrush>
    </local:OutlineTextBlock.Stroke>
</local:OutlineTextBlock>

You can just use the above code to draw text outlines in your project, but if you want to understand how this works, read on.

Fetching the text outlines was quite tricky and involved implementing a DirectX custom text renderer which renders the text into a custom Geometry Sink which in turn converts the font outlines into a PathGeometry which can be used to create a XAML Path object. I found this post which was very nearly what I needed but it still took a lot of work to turn it into the finished result. https://stackoverflow.com/questions/7563798/how-to-implement-the-outline-effect-on-text-with-windowsapicodepack 

Here is the code:

    public Sink SimplifiedGeometrySink { get; set; }
    public OutlineTextRenderer(RenderTarget surface, SharpDX.Direct2D1.Brush brush)
    {
        _factory = surface.Factory;
        _surface = surface;
        _brush = brush;
    }

    public Result DrawGlyphRun(object clientDrawingContext, float baselineOriginX, float baselineOriginY, MeasuringMode measuringMode, SharpDX.DirectWrite.GlyphRun glyphRun, SharpDX.DirectWrite.GlyphRunDescription glyphRunDescription, ComObject clientDrawingEffect)
    {
        using (SharpDX.Direct2D1.PathGeometry path = new SharpDX.Direct2D1.PathGeometry(_factory))
        {
            using (GeometrySink sink = path.Open())
            {
                glyphRun.FontFace.GetGlyphRunOutline(glyphRun.FontSize, glyphRun.Indices, glyphRun.Advances, glyphRun.Offsets, glyphRun.IsSideways, (glyphRun.BidiLevel % 2) > 0, sink);
                sink.Close();
            }

            this.SimplifiedGeometrySink = new Sink();
            path.Simplify(GeometrySimplificationOption.CubicsAndLines, (SharpDX.Direct2D1.SimplifiedGeometrySink)this.SimplifiedGeometrySink);
        }

        return new Result();
    }

    public Result DrawInlineObject(object clientDrawingContext, float originX, float originY, SharpDX.DirectWrite.InlineObject inlineObject, bool isSideways, bool isRightToLeft, ComObject clientDrawingEffect)
    {
        return new Result();
    }

    public Result DrawStrikethrough(object clientDrawingContext, float baselineOriginX, float baselineOriginY, ref SharpDX.DirectWrite.Strikethrough strikethrough, ComObject clientDrawingEffect)
    {
        return new Result();
    }

    public Result DrawUnderline(object clientDrawingContext, float baselineOriginX, float baselineOriginY, ref SharpDX.DirectWrite.Underline underline, ComObject clientDrawingEffect)
    {
        SharpDX.Direct2D1.DeviceContext d2dContext = clientDrawingContext as SharpDX.Direct2D1.DeviceContext;
        RawRectangleF rect = new RawRectangleF(0, underline.Offset, underline.Width, underline.Offset + underline.Thickness);
        SharpDX.Direct2D1.RectangleGeometry geom = new SharpDX.Direct2D1.RectangleGeometry(d2dContext.Factory, rect);
        geom.Simplify(GeometrySimplificationOption.Lines, this.SimplifiedGeometrySink);
        return new Result();
    }

    public float GetPixelsPerDip(object clientDrawingContext)
    {
        return 0;
    }

    public bool IsPixelSnappingDisabled(object clientDrawingContext)
    {
        return false;
    }

    RawMatrix3x2 PixelSnapping.GetCurrentTransform(object clientDrawingContext)
    {
        return new RawMatrix3x2();
    }
}

public class Sink : SharpDX.Direct2D1.SimplifiedGeometrySink
{
    Windows.UI.Xaml.Media.PathFigureCollection figures = new Windows.UI.Xaml.Media.PathFigureCollection();
    Windows.UI.Xaml.Media.PathFigure currentFigure = null;
    public Windows.UI.Xaml.Media.PathFigureCollection PathFigureCollection { get { return figures; } }
    public IDisposable Shadow
    {
        get
        {
            return null;
        }

        set
        {
        }
    }

    public void BeginFigure(RawVector2 startPoint, FigureBegin figureBegin)
    {
        currentFigure = new Windows.UI.Xaml.Media.PathFigure { StartPoint = new Windows.Foundation.Point(startPoint.X, startPoint.Y) };
    }

    public void AddBeziers(SharpDX.Direct2D1.BezierSegment[] beziers)
    {
        foreach (SharpDX.Direct2D1.BezierSegment bez in beziers)
        {
            currentFigure.Segments.Add(new Windows.UI.Xaml.Media.BezierSegment
            {
                Point1 = new Windows.Foundation.Point(bez.Point1.X, bez.Point1.Y),
                Point2 = new Windows.Foundation.Point(bez.Point2.X, bez.Point2.Y),
                Point3 = new Windows.Foundation.Point(bez.Point3.X, bez.Point3.Y)
            });
        }
    }

    public void AddLines(RawVector2[] pointsRef)
    {
        foreach (RawVector2 vect in pointsRef)
        {
            currentFigure.Segments.Add(new Windows.UI.Xaml.Media.LineSegment { Point = new Windows.Foundation.Point(vect.X, vect.Y) });
        }
    }

    public void EndFigure(FigureEnd figureEnd)
    {
        currentFigure.IsClosed = figureEnd == FigureEnd.Closed;
        figures.Add(currentFigure);
    }

    public void Close()
    {
    }

    public void Dispose()
    {
        figures = new Windows.UI.Xaml.Media.PathFigureCollection();
        currentFigure = null;
    }

    public void SetFillMode(SharpDX.Direct2D1.FillMode fillMode)
    {
    }

    public void SetSegmentFlags(SharpDX.Direct2D1.PathSegment vertexFlags)
    {
    }

I have included a demo project with all the code. You are free to use it in your code, even for commercial use.

https://theuxblog20160710035436.azurewebsites.net/OutlineTextDemo.zip

Enjoy!

Paul Tallett, UX Global Practice, Microsoft UK

Disclaimer: The information on this site is provided "AS IS" with no warranties, confers no rights, and is not supported by the authors or Microsoft Corporation. Use of included script samples are subject to the terms specified in the Terms of Use.