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

How about an attached property ?

I like this approach over converters 'cause you can attach it to any control you want and it has better performance.

Attached Property

public class Properties
{
    public static Uri GetIconUri(DependencyObject obj)
    {
        return (Uri)obj.GetValue(IconUriProperty);
    }

    public static void SetIconUri(DependencyObject obj, Uri value)
    {
        obj.SetValue(IconUriProperty, value);
    }

    public static readonly DependencyProperty IconUriProperty =
        DependencyProperty.RegisterAttached("IconUri", typeof(Uri), typeof(Properties), new PropertyMetadata(null));
}

Binding inside Style

<BitmapIcon UriSource="{Binding Path=(local:Properties.IconUri), RelativeSource={RelativeSource TemplatedParent}}" ...

Usage

<RadioButton local:Properties.IconUri="Assets/Home.png" ...

Answer 2

最简单的方法是将ms-appx ///添加为应用程序中的资源

Tag="ms-appx///Assets/Home.png"

Answer 3

So I worked up a solution by extending the RadioButton Control and Adding two properties ie, 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.