UWP将图像源传递给背景的用户控件

Question

我正在制作一个小型 UWP 应用，其中每个页面都有类似的布局。我在this thread 之后创建了一个自定义用户控件，但我无法理解如何将图像源传递给用户控件的背景图像。

如果我删除了对 bgImage 的引用，并且只删除了 mainContent，那么整个事情就会按预期工作。

如何将背景图像源或 URI 传递给 UserControl 以与控件一起使用？

用户控件 XAML：

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

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

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

                <StackPanel VerticalAlignment="Center">
                    <!-- Content here. -->
                    <ContentPresenter Content="{x:Bind mainContent}" />

                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
</UserControl>

MainTemplate.CS：

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

    }

最后，我尝试使用的页面之一（MainPage.xaml）的示例：

<local:MainTemplate>
    <local:MainTemplate.bgImage>
        <Image Source="Assets/backgrounds/tailings 2.jpg"/>
    </local:MainTemplate.bgImage>

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

</local:MainTemplate>

我在编译/运行时遇到的错误是：

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

Answer 1

正如马特的回答中已经显示的那样，bgImage 属性的类型应该是ImageSource：

public ImageSource bgImage
{
    get { return (ImageSource)GetValue(bgImageProperty); }
    set { SetValue(bgImageProperty, value); }
}

除此之外，您无法将Image 控件分配给该属性，就像您在此处尝试做的那样：

<local:MainTemplate>
    <local:MainTemplate.bgImage>
        <Image Source="Assets/backgrounds/tailings 2.jpg"/>
    </local:MainTemplate.bgImage>
    ...
</local:MainTheme>

相反，您应该分配一个BitmapImage，例如：

<local:MainTemplate>
    <local:MainTemplate.bgImage>
        <BitmapImage UriSource="Assets/backgrounds/tailings 2.jpg"/>
    </local:MainTemplate.bgImage>
    ...
</local:MainTheme>

或者更短，利用内置类型转换：

<local:MainTheme bgImage="/Assets/backgrounds/tailings 2.jpg">
    ...
</local:MainTheme>

---

除了上述之外，您还应该将x:Bind 模式设置为OneWay，因为默认为OneTime。以后对 bgImage 属性的更改将被忽略：

<ImageBrush ImageSource="{x:Bind bgImage, Mode=OneWay}" ... />

---

最后，.NET 中关于属性名称的命名约定被广泛接受。它们应该以大写字母开头，所以你的应该是BgImage。

Answer 2

您是否只需将属性设置为ImageSource 而不是object

public ImageSource bgImage
{
    get { return (ImageSource)GetValue(bgImageProperty); }
    set { SetValue(bgImageProperty, value); }
}