diff --git a/doc/Learn/Markup/Binding101.md b/doc/Learn/Markup/Binding101.md index 4d89f7f1b9..e9b78b65b4 100644 --- a/doc/Learn/Markup/Binding101.md +++ b/doc/Learn/Markup/Binding101.md @@ -147,12 +147,11 @@ public partial class MainPage : Page this.DataContext((page, vm) => page .Content( new TextBox() - .Assign(out var searchBox) - .Text(() => vm.Query) - .Name("SearchBox"), + .Name(out var searchBox) + .Text(() => vm.Query), new TextBox() .Text(x => x - .Source("SearchBox") + .Source(nameof(searchBox)) .Binding(() => searchBox.Text)) ) ); diff --git a/doc/Learn/Markup/DependencyPropertyBuilder.md b/doc/Learn/Markup/DependencyPropertyBuilder.md index ed9a3765fc..6b174430b2 100644 --- a/doc/Learn/Markup/DependencyPropertyBuilder.md +++ b/doc/Learn/Markup/DependencyPropertyBuilder.md @@ -45,16 +45,20 @@ If you wish to perform tasks such as manipulate the value of the binding or form ### Reference Sources -Sometimes you aren't binding to the `DataContext` of element and instead you need to reference another source. With WinUI we have 2 ways of doing this. The first is that we could specify a source directly such as: +Sometimes you aren't binding to the `DataContext` of the element and instead, you need to reference another source. With WinUI we have 2 ways of doing this. The first is that we could specify a source directly such as: ```cs -new Slider().Assign(out var slider), +new Slider().Name(out var slider), new TextBlock() .Text(x => x .Source(slider) .Binding(() => slider.Value)) ``` + > [!NOTE] + > Using the `.Name(out var fe)` syntax not only gives you a variable representing your `FrameworkElement` control but also sets the control's `Name` property to match the variable name. For example, in the scenario mentioned earlier, the `Slider` would have its `Name` property set to "slider" because the variable name used is `slider`. + + The second is that we can leverage the element name for our binding such as the following: ```cs diff --git a/doc/Learn/Markup/HowTo-CustomMarkupProject-Theme.md b/doc/Learn/Markup/HowTo-CustomMarkupProject-Theme.md index 2ca5275575..6a27ed0185 100644 --- a/doc/Learn/Markup/HowTo-CustomMarkupProject-Theme.md +++ b/doc/Learn/Markup/HowTo-CustomMarkupProject-Theme.md @@ -198,7 +198,7 @@ new Grid().RowDefinitions("*, *") .Grid(column: 0) .Content("Toggle Theme") .HorizontalAlignment(HorizontalAlignment.Right) - .Assign(out var toggle) + .Name(out var toggle) ), ``` diff --git a/doc/Learn/Markup/HowTo-CustomMarkupProject-Toolkit.md b/doc/Learn/Markup/HowTo-CustomMarkupProject-Toolkit.md index 378f920309..e1378154b2 100644 --- a/doc/Learn/Markup/HowTo-CustomMarkupProject-Toolkit.md +++ b/doc/Learn/Markup/HowTo-CustomMarkupProject-Toolkit.md @@ -49,7 +49,7 @@ The navigation bar can include items such as a back button, a page title, and ot new NavigationBar().Content("Title Second Page"), new Button() .Content("Go to Main Page") - .Assign(out var navigationButton) + .Name(out var navigationButton) )); navigationButton.Click += (s, e) => @@ -72,11 +72,11 @@ The navigation bar can include items such as a back button, a page title, and ot ```csharp new Button() .Content("Go to Second Page") - .Assign(out var navigationButton), + .Name(out var navigationButton), ``` - The main ideia here is to create a button that have Assign it self the output variable named in this case as navigationButton. - After that we need to add a Click EventHandler to add the Navigation using the Frame.Navigate. + The main idea here is to create a button that has to assign itself, through the `Name` extension method, the output variable named in this case is `navigationButton`. + After that, we need to add a Click EventHandler to add the Navigation using the Frame.Navigate. > Notice how simple it is to create an action for the Button's Click event. @@ -168,7 +168,7 @@ The navigation bar can include items such as a back button, a page title, and ot new NavigationBar().Content("Title Main Page"), new Button() .Content("Go to Second Page") - .Assign(out var navigationButton) + .Name(out var navigationButton) )); navigationButton.Click += (s, e) => @@ -242,13 +242,13 @@ Chips are often used to display short pieces of information such as tags, catego ```csharp new ChipGroup() - .Assign(out var chipGroup) + .Name(out var chipGroup) .Items( new Chip() .Margin(5) .Content("Go to Second Page") .Background(new SolidColorBrush(Colors.LightBlue)) - .Assign(out var navigationChip), + .Name(out var navigationChip), ) ``` @@ -259,7 +259,7 @@ Chips are often used to display short pieces of information such as tags, catego ```csharp new ChipGroup() - .Assign(out var chipGroup) + .Name(out var chipGroup) .Items( new Chip() .Margin(5) @@ -274,18 +274,18 @@ Chips are often used to display short pieces of information such as tags, catego ```csharp new ChipGroup() - .Assign(out var chipGroup) + .Name(out var chipGroup) .Items( new Chip() .Margin(5) .Content("Chip 3") - .Assign(out var chipElement) + .Name(out var chipElement) ) ``` - And we need to add the event handlers on our code. - Notice that we are using the Assign to have access to the chipElement in other places. + And we need to add the event handlers to our code. + Notice that we are using the `Name` extension method to have access to the chipElement in other places. ```csharp @@ -392,9 +392,9 @@ Chips are often used to display short pieces of information such as tags, catego .Children( new Button() .Content("Go to Second Page") - .Assign(out var navigationButton), + .Name(out var navigationButton), new ChipGroup() - .Assign(out var chipGroup) + .Name(out var chipGroup) .Items( new Chip() .Margin(5) @@ -404,7 +404,7 @@ Chips are often used to display short pieces of information such as tags, catego .Margin(5) .CanRemove(true) .Content("Chip 2") - .Assign(out var chipRemoveElement) + .Name(out var chipRemoveElement) .Style(new Style() .Setters(s => s.Foreground(new SolidColorBrush(Colors.Red))) ), @@ -413,7 +413,7 @@ Chips are often used to display short pieces of information such as tags, catego .Content("Chip 3") //.Icon(new PathIcon().Data(StaticResource.Get("Icon_Check"))) //.Icon(new SymbolIcon(Symbol.Favorite)) - .Assign(out var chipElement) + .Name(out var chipElement) ) ) ) diff --git a/doc/Learn/Markup/HowTo-CustomMarkupProject-VisualStates.md b/doc/Learn/Markup/HowTo-CustomMarkupProject-VisualStates.md index acd62ca183..ded58d700a 100644 --- a/doc/Learn/Markup/HowTo-CustomMarkupProject-VisualStates.md +++ b/doc/Learn/Markup/HowTo-CustomMarkupProject-VisualStates.md @@ -33,13 +33,13 @@ It provides a way to create custom components that can be used in multiple parts this.Background(ThemeResource.Get("ApplicationPageBackgroundThemeBrush")) .Content( new ChipGroup() - .Assign(out var chipGroup) + .Name(out var chipGroup) .Items( new Chip() .Margin(5) .Content("First Chip") .Background(new SolidColorBrush(Colors.LightBlue)) - .Assign(out var navigationChip), + .Name(out var navigationChip), new Chip() .Margin(5) .Content("Chip 2") @@ -49,7 +49,7 @@ It provides a way to create custom components that can be used in multiple parts new Chip() .Margin(5) .Content("Chip 3") - .Assign(out var chipElement) + .Name(out var chipElement) ) ); ``` @@ -80,7 +80,7 @@ It provides a way to create custom components that can be used in multiple parts .Children( new Button() .Content("Go to Second Page") - .Assign(out var navigationButton), + .Name(out var navigationButton), new SampleUserControl() ) ``` @@ -109,7 +109,7 @@ It provides a way to create custom components that can be used in multiple parts .Children( new Button() .Content("Go to Main Page") - .Assign(out var navigationButton), + .Name(out var navigationButton), new SampleUserControl() ) ) @@ -245,7 +245,7 @@ It provides a way to create custom components that can be used in multiple parts .Children( new Button() .Content("Go to Second Page") - .Assign(out var navigationButton), + .Name(out var navigationButton), new SampleUserControl() ) ) @@ -345,7 +345,7 @@ With this we can control events and changes. ) ``` - We will change the navigationButton (the same that has been Assign for control the Navigation) and will the Background Color now. + We will change the navigationButton (the same one that has been assigned for controlling the navigation) and change its background color now. And change the value of the Width of the Button that will be used on the EventHandler. You can add the Button before the `new SampleUserControl()`. @@ -354,7 +354,7 @@ With this we can control events and changes. .Width(200) .Height(40) .Content("VisualStateManager Test") - .Assign(out var btn), + .Name(out var btn), ``` And to handle the Event Handlers we need to create the Event Handlers so that the events are fired and the actions happen. @@ -408,7 +408,7 @@ With this we can control events and changes. new Button() .Grid(row: 1) .Content("Visual State on UserControl") - .Assign(out var visualStateButtonChips) + .Name(out var visualStateButtonChips) ``` And to handle the Event Handlers we need to create the Event Handlers so that the events are fired and the actions happen. @@ -581,12 +581,12 @@ With this we can control events and changes. .Children( new Button() .Content("Go to Second Page") - .Assign(out var navigationButton), + .Name(out var navigationButton), new Button() .Width(200) .Height(40) .Content("VisualStateManager Test") - .Assign(out var btn), + .Name(out var btn), new SampleUserControl() ) )