Image instead of Symbol SplitView.Pane Item Icon

Question

I want to use a image (PNG) to set it as a icon for a SplitView.Pane item. There is no icons that in Sagoe MDL2 font. I know that it is recomended to use vector font but I realy need to replace that with a png image. Here is how it work now:

XAML ...

<SplitView.Pane>
                <!-- A custom ListView to display the items in the pane.  The automation Name is set in the ContainerContentChanging event. -->
                <controls:NavMenuListView x:Name="NavMenuList"
                                          TabIndex="3"
                                          Margin="0,48,0,0"
                                          ContainerContentChanging="NavMenuItemContainerContentChanging"
                                          ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
                                          ItemTemplate="{StaticResource NavMenuItemTemplate}"
                                          ItemInvoked="NavMenuList_ItemInvoked">
</SplitView.Pane>

Adding items to navigation list Code:

private List<NavMenuItem> navlist = new List<NavMenuItem>(
            new[]
            {
        new NavMenuItem()
                {

                    Symbol = Symbol.Shop,
                    Label = "Go to shop",
                    DestinationPage = typeof(Views.Page1)
                }
            });

And the NavMenuItem class:

public class NavMenuItem
    {
        public string Label { get; set; }
        public Symbol Symbol { get; set; }
        public char SymbolAsChar
        {
            get
            {
                return (char)this.Symbol;
            }
        }

        public Type DestinationPage { get; set; }
        public object Arguments { get; set; }

    }

And one more question to not open another topic. How to open a left pane on settings button press like in Windows 10 Mail app?. Thanks.

Answer 1

Use uri instead of the symbol.

public Uri IconUri {get; set;}

and in NavMenuItemTemplate use an Image and bind its Source property to IconUri.

To open the pane, just set IsPaneOpen to true.

splitView.IsPaneOpen = true;