UWP Passing an Image Source to a user control for a background
<p>I am making a small UWP app in which each page has a similar layout.  I have created a custom UserControl following <a href="https://stackoverflow.com/questions/34193938/how-to-create-a-main-layout-template-in-xaml">this thread</a>, but I am not able to wrap my head around how to pass an Image Source to the background image of the UserControl.</p>

<p>If I remove the references to bgImage, and only mainContent, the whole thing works as expected.</p>

<p>How do I pass a background image source or URI to a UserControl for use with a control?</p>

<p>UserControl XAML:</p>

<pre><code>&lt;UserControl
    x:Class="App1.MainTemplate"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"&gt;

    &lt;Grid Background="Black"&gt;
        &lt;!-- Background image grid --&gt;
        &lt;Grid Margin="0"&gt;
            &lt;Grid.Background&gt;
                &lt;ImageBrush Opacity="100" ImageSource="{x:Bind bgImage}" Stretch="UniformToFill"/&gt;
            &lt;/Grid.Background&gt;

            &lt;!-- Content grid --&gt;
            &lt;Grid Margin="25" x:Name="contentGrid" Opacity="100"&gt;
                &lt;!-- Darkened insert --&gt;
                &lt;Border BorderThickness="1" CornerRadius="8" BorderBrush="Black"&gt;
                    &lt;Rectangle Name="Background" Opacity="0.55" Fill="Black" /&gt;
                &lt;/Border&gt;

                &lt;StackPanel VerticalAlignment="Center"&gt;
                    &lt;!-- Content here. --&gt;
                    &lt;ContentPresenter Content="{x:Bind mainContent}" /&gt;

                &lt;/StackPanel&gt;
            &lt;/Grid&gt;
        &lt;/Grid&gt;
    &lt;/Grid&gt;
&lt;/UserControl&gt;
</code></pre>

<p>MainTemplate.CS:</p>

<pre><code>   public sealed partial class MainTemplate : UserControl
    {
        public MainTemplate()
        {
            this.InitializeComponent();
        }

        public static readonly DependencyProperty bgImageProperty = DependencyProperty.Register("bgImage", typeof(ImageSource), typeof(MainTemplate), new PropertyMetadata(null));
        public object bgImage
        {
            get { return GetValue(bgImageProperty); }
            set { SetValue(bgImageProperty, value); }
        }

        public static readonly DependencyProperty mainContentProperty = DependencyProperty.Register("mainContent", typeof(object), typeof(MainTemplate), new PropertyMetadata(null));
        public object mainContent
        {
            get { return GetValue(mainContentProperty); }
            set { SetValue(mainContentProperty, value); }
        }

    }
</code></pre>

<p>And finally, an example from one of the pages I am trying to use (MainPage.xaml):</p>

<pre><code>&lt;local:MainTemplate&gt;
    &lt;local:MainTemplate.bgImage&gt;
        &lt;Image Source="Assets/backgrounds/tailings 2.jpg"/&gt;
    &lt;/local:MainTemplate.bgImage&gt;

    &lt;local:MainTemplate.mainContent&gt;
        &lt;Button 
                    x:Name="app1" 
                    Content="" 
                    HorizontalAlignment="Center" 
                    Click="app1_Click" 
                    Width="426" 
                    Height="134" 
                    Style="{StaticResource noMouseoverHover}"
                    &gt;
            &lt;Button.Background&gt;
                &lt;ImageBrush ImageSource="Assets/logos/image.png"/&gt;
            &lt;/Button.Background&gt;
        &lt;/Button&gt;
    &lt;/local:MainTemplate.mainContent&gt;

&lt;/local:MainTemplate&gt;
</code></pre>

<p>The error I get on compile/run is:</p>

<pre><code>Error       Invalid binding path 'bgImage' : Cannot bind type 'System.Object' to 'Windows.UI.Xaml.Media.ImageSource' without a converter    App1    
</code></pre>