How to Bind the SourceUri a BitmapIcon to RadioButton in Windows 10 UWP Apps

Question

I am trying to make a typical Radio Button Style for Windows 10 SplitView Control - With an Icon and text. I tried TemplateBinding the UriSource property to RadioButton's Tag property. But the problem here is that Tag is a string type and UriSource is Uri. So it is not working. Is there a way to Set the UriSource in some other way?

Relevant Snippet of the Style:

<Grid Name="BackgroundGrid" Background="Transparent" VerticalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="48"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <BitmapIcon Height="38" UriSource="{TemplateBinding Tag}" Margin="5,8,5,5" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>

And the RadioButton:

<RadioButton Style="{StaticResource SplitViewRadioButtonStyle}" Content="Home" x:Name="Home" Tag="/Assets/Home.png"/>

Answer 1

So I worked up a solution by extending the RadioButton Control and Adding two properties i.e., IconUri and IconBitmap.

 public static readonly DependencyProperty IconUriProperty = DependencyProperty.Register("IconUri", typeof(Uri), typeof(CustomRadioButton), new PropertyMetadata(null, OnIconBitmapChanged));

    private static void OnIconBitmapChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ImageRadioButton current = d as CustomRadioButton;
        if(current!=null)
        {
            current.IconBitmap = new BitmapImage(current.IconUri);
        }
    }

    public Uri IconUri
    {
        get { return (Uri)GetValue(IconUriProperty); }
        set { SetValue(IconUriProperty, value); }
    }

    public static readonly DependencyProperty IconBitmapProperty = DependencyProperty.Register("IconBitmap", typeof(BitmapImage), typeof(CustomRadioButton), new PropertyMetadata(null));

    public BitmapImage IconBitmap
    {
        get { return (BitmapImage)GetValue(IconBitmapProperty); }
        set { SetValue(IconBitmapProperty, value); }
    }

And then Binding the Image Control in the Style to IconBitmap. Since, here we are binding to the BitmapImage directly, it doesn't fail. Also works with Web URIs.

Xaml for RadioButton:

<templatedControls:CustomRadioButton IconUri="uri" Style="{StaticResource CustomRadioButtonStyle}"/>

And in its style:

<Image Source="{TemplateBinding IconBitmap}" />

To make the style work with your Extended Radio Button just replace 'Target' of the style from RadioButton to templatedControls:CustomRadioButton, where templatedControls is the XAML namespace which has the CustomRadioButton.