UWPバックグラウンドのユーザーコントロールにイメージソースを渡す

Question

私は、各ページが同様のレイアウトを持つ小さなUWPアプリケーションを作っています。私はthis threadの後にカスタムUserControlを作成しましたが、私はUserControlのバックグラウンドイメージにイメージソースを渡す方法について私の頭を包み込むことができません。

bgImageへの参照を削除し、mainContentのみを削除すると、すべてが正常に機能します。

コントロールで使用するために背景画像ソースまたはURIをUserControlに渡すにはどうすればよいですか？

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を）を使用しようとしていますページの1から例：

<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

はあなただけImageSourceはなく、すでにマットの答えに示すobject

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

Answer 2

のようにプロパティを設定する必要はありません、bgImageプロパティのタイプはImageSource次のようになります。

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

これ以外にも、ここでしようとしているように、Imageコントロールをプロパティに割り当てることはできません。

、上記に加えて

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

---

：組み込みの型変換を利用して、

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

か短い：

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

代わりに、あなたは次のように、BitmapImageを割り当てる必要がありますデフォルトはOneTimeなのでモードをOneWayに設定する必要があります。 bgImageプロパティへのその後の変更は、それ以外の場合は無視されます：

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

---

を最後に、.NETのプロパティ名については広く受け入れられている命名規則があります。彼らは大文字で始める必要がありますので、おそらくBgImageになるはずです。