如何在 Windows 10 个 UWP 应用程序中将 SourceUri 和 BitmapIcon 绑定到 RadioButton

Question

我正在尝试为 Windows 10 SplitView 控件制作典型的单选按钮样式 - 带有图标和文本。我尝试将 UriSource 属性模板绑定到 RadioButton 的标签属性。但是这里的问题是Tag是字符串类型而UriSource是Uri。所以它不起作用。有没有办法以其他方式设置 UriSource？

风格的相关片段：

<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>

和单选按钮：

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

Answer 1

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

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

Answer 2

附加属性 怎么样？

我喜欢这种方法而不是转换器，因为您可以将它附加到您想要的任何控件，并且它具有更好的性能。

附上属性

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));
}

样式内绑定

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

用法

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

Answer 3

所以我通过扩展 RadioButton 控件并添加两个属性（即 IconUri 和 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); }
    }

然后将样式中的图像控件绑定到IconBitmap。因为，这里我们直接绑定到 BitmapImage，所以它不会失败。也适用于 Web URI。

Xaml 对于 RadioButton：

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

其风格：

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

要使样式与您的扩展单选按钮一起使用，只需将样式的 'Target' 从 RadioButton 替换为 templatedControls:CustomRadioButton，其中 templatedControls 是具有 CustomRadioButton 的 XAML 命名空间。

如何在 Windows 10 个 UWP 应用程序中将 SourceUri 和 BitmapIcon 绑定到 RadioButton

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

xaml

resourcedictionary

windows-10

windows-10-mobile

uwp

附上属性

样式内绑定

用法