Xamarin UWP custom CommandBar

Question

I'd like to create a custom CommandBar for the UWP part of my Xamarin project.

I want to make a logo on a background color. The only way to get this, is making a visualbrush or grid, to contain both the background color and the picture.

I've read it can be done like so;

<Window.Resources>
    <VisualBrush x:Key="myBrush">
        <VisualBrush.Visual>
            <Grid>
                <Rectangle Fill="Red" />
                <Image Source="troll.png" />
            </Grid>
        </VisualBrush.Visual>
    </VisualBrush>
</Window.Resources>

I need to add this commandbar during runtime like so:

var _globalAppBar = new CommandBar();
_globalAppBar.Background = [Link  to above layout]

Questions:

1. How or where can I add this in my Xamarin UWP project? Add a XAML file?

2. How can I link during run time to the layout? Or is there a better way to do this?

Answer 1

Ideally, you would create a new style for the CommandBar and add it to the App.xaml resource dictionary

<Application.Resources>
 <Style TargetType="CommandBar">
   <Setter Property="Background">
     <Setter.Value>
      <VisualBrush>
        <VisualBrush.Visual>
          <Grid>
            <Rectangle Fill="Red" />
            <Image Source="troll.png" />
          </Grid>
        </VisualBrush.Visual>
       </VisualBrush>
     </Setter.Value>
   </Setter>
 </Style>
</Application.Resources>

because the style has no key, it will become the implicit style for CommandBar and therefore be applied to all CommandBar instances