diff --git a/doc/Learn/Markup/Binding101.md b/doc/Learn/Markup/Binding101.md index a89e51f0b4..4d89f7f1b9 100644 --- a/doc/Learn/Markup/Binding101.md +++ b/doc/Learn/Markup/Binding101.md @@ -48,7 +48,7 @@ public partial class MainPage : Page .Content( new TextBlock() .Text(x => x - .Bind(() => vm.Title) + .Binding(() => vm.Title) .Mode(BindingMode.OneTime) ) ) @@ -68,7 +68,7 @@ public partial class MainPage : Page .Content( new TextBlock() .Text(x => x - .Bind(() => vm.Title) + .Binding(() => vm.Title) .OneTime() ) ) @@ -88,7 +88,7 @@ public partial class MainPage : Page .Content( new TextBlock() .Text(x => x - .Bind(() => vm.Query) + .Binding(() => vm.Query) .Convert(query => $"Search: {query}") ) ) @@ -125,7 +125,7 @@ public partial class MainPage : Page .Content( new TextBox() .Text(x => x - .Bind(() => vm.Enabled) + .Binding(() => vm.Enabled) .Convert(enabled => $"Enabled: {enabled}") .ConvertBack(text => bool.TryParse(text.Replace("Search: ", ""), out var enabled) ? enabled : false) ) @@ -137,7 +137,7 @@ public partial class MainPage : Page ## Binding to other sources -Sometimes you may want or need to bind to your ViewModel. The first case we'll take a look at is one in which we want to bind to a property of another element. In this case we will use the `ElementName` method on the `BindingFactory` to update our binding so that it will bind to a named element in the Visual Tree. +Sometimes you may want or need to bind to your ViewModel. The first case we'll take a look at is one in which we want to bind to a property of another element. In this case we will use the `Source` method to update our binding so that it will bind to a named element in the Visual Tree. ```cs public partial class MainPage : Page @@ -152,8 +152,8 @@ public partial class MainPage : Page .Name("SearchBox"), new TextBox() .Text(x => x - .Bind(() => searchBox.Text) - .ElementName("SearchBox")) + .Source("SearchBox") + .Binding(() => searchBox.Text)) ) ); } @@ -173,7 +173,8 @@ public partial class MainPage : Page .Content( new MyCustomControl() .DataContext(x => x - .Bind(() => this.DataContext) + .Source(this) + .Binding(() => this.DataContext) .Convert(dataContext => { if (dataContext is MyViewModel myViewModel) { @@ -182,7 +183,6 @@ public partial class MainPage : Page return null; }) .OneTime() - .Source(this) ) ) ); @@ -198,4 +198,4 @@ Learn more about: - [Styles](xref:Uno.Extensions.Markup.Styles) - [Templates](xref:Uno.Extensions.Markup.Templates) - [VisualStateManagers](xref:Uno.Extensions.Markup.VisualStateManager) -- [Generating C# Extensions for your libraries](xref:Uno.Extensions.Markup.GeneratingExtensions) \ No newline at end of file +- [Generating C# Extensions for your libraries](xref:Uno.Extensions.Markup.GeneratingExtensions) diff --git a/doc/Learn/Markup/Converters.md b/doc/Learn/Markup/Converters.md index bb7cb6333b..888b40855a 100644 --- a/doc/Learn/Markup/Converters.md +++ b/doc/Learn/Markup/Converters.md @@ -17,7 +17,7 @@ public static class Converters } new Button() - .Enabled(x => x.Bind(() => vm.IsBusy) + .Enabled(x => x.Binding(() => vm.IsBusy) .Converter(Converters.InverseBoolConverter)); ``` @@ -40,7 +40,7 @@ public partial class MainPage : Page new TextBox() .Text(() => vm.Query) new TextBlock() - .Text(x => x.Bind(() => vm.Query) + .Text(x => x.Binding(() => vm.Query) .Convert(query => $"Search: {query}")) ) )); @@ -64,7 +64,7 @@ Sometimes, we may want to make conditionals or apply specific rules to values or ```csharp new TextBox() .Text(() => vm.Query) - .Foreground(x => x.Bind(() => vm.Query) + .Foreground(x => x.Binding(() => vm.Query) .Convert(query => new SolidColorBrush(!string.IsNullOrEmpty(query) && query.Length > 5 ? Colors.Green : Colors.Red))); ``` @@ -84,7 +84,7 @@ And use like this: ```csharp new Button() - .Enabled(x => x.Bind(() => vm.IsBusy) + .Enabled(x => x.Binding(() => vm.IsBusy) .Converter(Converters.InverseBoolConverter)); ``` @@ -100,7 +100,7 @@ public partial class MainPage : Page { this.DataContext((page, vm) => page .Content(new TextBox() - .Text(x => x.Bind(() => vm.Enabled) + .Text(x => x.Binding(() => vm.Enabled) .Convert(enabled => $"Enabled: {enabled}") .ConvertBack(text => bool.TryParse(text.Replace("Search: ", ""), out var enabled) ? enabled : false)) )); diff --git a/doc/Learn/Markup/DependencyPropertyBuilder.md b/doc/Learn/Markup/DependencyPropertyBuilder.md index 3f2b508ac1..ed9a3765fc 100644 --- a/doc/Learn/Markup/DependencyPropertyBuilder.md +++ b/doc/Learn/Markup/DependencyPropertyBuilder.md @@ -11,7 +11,7 @@ The `DependencyPropertyBuilder` provides a fluent API to help you create a bindi ```cs new TextBlock() - .Text(x => x.Bind(() => vm.Message)) + .Text(x => x.Binding(() => vm.Message)) ``` When creating a simplified binding such as the one above you may alternatively simply provide the binding expression like: @@ -50,16 +50,18 @@ Sometimes you aren't binding to the `DataContext` of element and instead you nee ```cs new Slider().Assign(out var slider), new TextBlock() - .Text(x => x.Bind(() => slider.Value) - .Source(slider)) + .Text(x => x + .Source(slider) + .Binding(() => slider.Value)) ``` The second is that we can leverage the element name for our binding such as the following: ```cs new TextBlock() - .Text(x => x.Bind(() => slider.Value) - .ElementName("slider")), + .Text(x => x + .Source("slider") + .Binding(() => slider.Value)), new Slider().Name("slider") ``` diff --git a/doc/Learn/Markup/SourceUsage.md b/doc/Learn/Markup/SourceUsage.md new file mode 100644 index 0000000000..76f07b1c41 --- /dev/null +++ b/doc/Learn/Markup/SourceUsage.md @@ -0,0 +1,118 @@ +--- +uid: Uno.Extensions.Markup.SourceUsage +--- +# Source and Relative Source + +Sometimes, when working with binding expressions, specifying the source or a relative source becomes necessary. In this section, we'll explore how to do that using strongly typed sources. + +## Source Binding + +Binding a property directly from one UI element to another is a common scenario. Here's how you can bind the Text property of a TextBox to the Content property of a button, and vice versa: + +```csharp +new StackPanel() + .Children( + new Button() + .Assign(out var button) + .Content("I am a button"), + + // Creating a TextBox and binding its Text property to a Button's Content + new TextBox() + .Text(x => x.Source(button) + .Binding(() => button.Content)); + ) +``` + +```csharp +new StackPanel() + .Children( + new TextBox() + .Assign(out var textBox) + .Text("I am a TextBox"), + + // Creating a Button and binding its Content property to the TextBox's Text property with TwoWay binding + new Button() + .Content(x => x.Source(textBox) + .Binding(() => textBox.Text) + .TwoWay()); + ) +``` + +```csharp +// Binding with a string identifier for the source button +new TextBox() + .Text(x => x.Source