diff --git a/doc/Learn/Markup/Binding-To-DataTemplates.md b/doc/Learn/Markup/Binding-To-DataTemplates.md new file mode 100644 index 0000000000..e7a34f29eb --- /dev/null +++ b/doc/Learn/Markup/Binding-To-DataTemplates.md @@ -0,0 +1,89 @@ +--- +uid: Uno.Extensions.Markup.BindToDataTemplate +--- + +# Binding to DataTemplates + +When working with DataTemplates, accessing data or commands from the parent context can be challenging. DataTemplates operate within their own scope, making it difficult to bind properties or trigger actions in the parent view model. This separation can lead to confusion, especially when dealing with nested templates and multiple levels of data context. + +See the following example how we could access the command `RemoveItemCommand` defined inside the `ViewModel` class inside the ListView `ItemTemplate`. + +```csharp +this.DataContext(new ViewModel(), (page, vm) + => page + .Content( + new ListView() + .ItemsSource(() => vm.Items) + .ItemTemplate(item => + new StackPanel() + .Children( + new TextBlock() + .Text(() => item.Text), + new Button() + .Content("Delete") + .CommandParameter(() => item) + + // Since we have access to the `page` and `vm` alias from the DataContext method + // We can take advantage of them and use them on our binding expression + .Command(x => x.Source(page) + .DataContext() + .Binding(() => vm.RemoveItemCommand) + ) + ) + ) + ) +) +``` + +Alternatively we could extract the button instance to a helper method and take advantage of the `RelativeSource` method to provide the `CommandParameter`. + +```csharp +... + +.Children( + new TextBlock() + .Text(() => item.Text), + CreateButton() +) +... + +private Button CreateButton() + => new Button() + .Content("Delete") + .CommandParameter(x => x.RelativeSource