Associating with a UserControl DP from a DataTemplate UWP

Question

I have a FlipView that shows Figurines . The figures contain the path to their image.

The binding of this property to a regular DataTemplate is fine. (the code below works fine)

</DataTemplate>
    <Canvas x:Name="DefaultImageCanvas" Width="660" Height="372">
        <Image Name="imageFlip" Width="660" Height="372" Source="{Binding Path}"
            Stretch="Uniform" />
    </Canvas>
</DataTemplate>

But when using my UserControl instead, it no longer works:

<DataTemplate>
    <local:FigurineStickerUserControl Width="660" Height="372"
                                      FigurinePath="{Binding Path}"/>
</DataTemplate>

FigurinePath is never set. (If I use a hard-coded string, its fine.) Here is the error in the output:

: BindingExpression: "Path" "Com.Test.ViewModels.UserControl.FigurineStickerUserControlViewModel, eSmart.ViewModels, Version = 1.0.0.0, Culture = neutral, PublicKeyToken = null". BindingExpression: Path = 'Path' DataItem = 'Com.Test.ViewModels.UserControl.FigurineStickerUserControlViewModel, Test.ViewModels, Version = 1.0.0.0, Culture = neutral, PublicKeyToken = null'; target element - "Com.Test.Views.FigurineStickerUserControl" (Name= 'pageRoot'); target "FigurinePath" ( "Object" )

, DataTemplate DataContext UserControl, UC DataContext. UC DataContext ( ViewModel), .

, WinRT/UWP FindAncestor, . : (FlipFigurine FlipView)

<local:FigurineStickerUserControl Width="660" Height="372"
                                  FigurinePath="{Binding SelectedItem.Path, ElementName=FlipFigurine}"/>

. DP , DP . .

FigurinePath="{Binding SelectedItem, ElementName=FlipFigurine}"

- Figurine Path FigurinePath UC??

Answer 1

FindAncestor, , , . , , , , :

https://github.com/mikoskinen/uwpusercontrolbinding/tree/master

:

MainPage.xaml

<DataTemplate>
    <local:MyUserControl Width="660" Height="372" FigurinePath="{Binding Path}"/>
</DataTemplate>

MainPage.xaml.cs

private ObservableCollection<MyUserControlVm> coll;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    coll = new ObservableCollection<MyUserControlVm>();
    coll.Add(new MyUserControlVm("http://libcloud.readthedocs.org/en/latest/_images/azure.jpg"));
    coll.Add(new MyUserControlVm("http://www.nimbo.com/wp-content/uploads/windows-azure-logo-nimbo1.png"));

    this.Flip.ItemsSource = coll;

    base.OnNavigatedTo(e);
}

MyUserControl.xaml

<Grid>
    <Canvas Width="660" Height="372">
        <Image Width="660" Height="372" Source="{Binding FigurinePath}" Stretch="Uniform" />
    </Canvas>
</Grid>

MyUserControl.xaml.cs

public sealed partial class MyUserControl : UserControl
{
    public static readonly DependencyProperty FigurinePathProperty = DependencyProperty.Register(
        "FigurinePath", typeof (Uri), typeof (MyUserControl), new PropertyMetadata(default(Uri)));

    public Uri FigurinePath
    {
        get { return (Uri) GetValue(FigurinePathProperty); }
        set { SetValue(FigurinePathProperty, value); }
    }

    public MyUserControl()
    {
        this.InitializeComponent();
        (this.Content as FrameworkElement).DataContext = this;
    }
}

MyUserControlVM.cs

public class MyUserControlVm
{
    public Uri Path { get; set; }

    public MyUserControlVm(string url)
    {
        Path = new Uri(url);
    }

    public void VmAction()
    {

    }
}

, , .