Use compiled bindings (#2803)

* Compile bindings * Compile bindings. * Compile bindings.
dotnet · Feb 26, 2025 · 4ac86e3 · 4ac86e3
1 parent 4fd3a5d
commit 4ac86e3
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 19 deletions.
diff --git a/docs/xaml/fundamentals/data-binding-basics.md b/docs/xaml/fundamentals/data-binding-basics.md
@@ -21,6 +21,9 @@ The target property must be a bindable property, which means that the target obj
 
 In XAML, you must also perform the same two steps that are required in code, except that the `Binding` markup extension takes the place of the `SetBinding` call and the `Binding` class. However, when you define data bindings in XAML, there are multiple ways to set the `BindingContext` of the target object. Sometimes it’s set from the code-behind file, sometimes using a [`StaticResource`](xref:Microsoft.Maui.Controls.Xaml.StaticResourceExtension) or `x:Static` markup extension, and sometimes as the content of `BindingContext` property-element tags.
 
+> [!NOTE]
+> The data binding expressions on this page use compiled bindings. For more information about compiled bindings, see [Compiled bindings](~/fundamentals/data-binding/compiled-bindings.md).
+
 ## View-to-view bindings
 
 You can define data bindings to link properties of two views on the same page. In this case, you set the `BindingContext` of the target object using the `x:Reference` markup extension.
@@ -31,7 +34,8 @@ The following example contains a <xref:Microsoft.Maui.Controls.Slider> and two <
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="XamlSamples.SliderBindingsPage"
-             Title="Slider Bindings Page">
+             Title="Slider Bindings Page"
+             x:DataType="Slider">
     <StackLayout>
         <Label Text="ROTATION"
                BindingContext="{x:Reference slider}"
@@ -103,44 +107,52 @@ The following example demonstrates one common use of the `OneWayToSource` and `T
 
         <!-- Slider and identifying Label for Scale -->
         <Slider x:Name="scaleSlider"
+                x:DataType="Label"
                 BindingContext="{x:Reference label}"
                 Grid.Row="1" Grid.Column="0"
                 Maximum="10"
                 Value="{Binding Scale, Mode=TwoWay}" />
-        <Label BindingContext="{x:Reference scaleSlider}"
+        <Label x:DataType="Slider"
+               BindingContext="{x:Reference scaleSlider}"
                Text="{Binding Value, StringFormat='Scale = {0:F1}'}"
                Grid.Row="1" Grid.Column="1"
                VerticalTextAlignment="Center" />
 
         <!-- Slider and identifying Label for Rotation -->
         <Slider x:Name="rotationSlider"
+                x:DataType="Label"
                 BindingContext="{x:Reference label}"
                 Grid.Row="2" Grid.Column="0"
                 Maximum="360"
                 Value="{Binding Rotation, Mode=OneWayToSource}" />
-        <Label BindingContext="{x:Reference rotationSlider}"
+        <Label x:DataType="Slider"
+               BindingContext="{x:Reference rotationSlider}"
                Text="{Binding Value, StringFormat='Rotation = {0:F0}'}"
                Grid.Row="2" Grid.Column="1"
                VerticalTextAlignment="Center" />
 
         <!-- Slider and identifying Label for RotationX -->
         <Slider x:Name="rotationXSlider"
+                x:DataType="Label"
                 BindingContext="{x:Reference label}"
                 Grid.Row="3" Grid.Column="0"
                 Maximum="360"
                 Value="{Binding RotationX, Mode=OneWayToSource}" />
-        <Label BindingContext="{x:Reference rotationXSlider}"
+        <Label x:DataType="Slider"
+               BindingContext="{x:Reference rotationXSlider}"
                Text="{Binding Value, StringFormat='RotationX = {0:F0}'}"
                Grid.Row="3" Grid.Column="1"
                VerticalTextAlignment="Center" />
 
         <!-- Slider and identifying Label for RotationY -->
         <Slider x:Name="rotationYSlider"
+                x:DataType="Label"
                 BindingContext="{x:Reference label}"
                 Grid.Row="4" Grid.Column="0"
                 Maximum="360"
                 Value="{Binding RotationY, Mode=OneWayToSource}" />
-        <Label BindingContext="{x:Reference rotationYSlider}"
+        <Label x:DataType="Slider"
+               BindingContext="{x:Reference rotationYSlider}"
                Text="{Binding Value, StringFormat='RotationY = {0:F0}'}"
                Grid.Row="4" Grid.Column="1"
                VerticalTextAlignment="Center" />
@@ -255,7 +267,7 @@ To define a template for the items, the `ItemTemplate` should be set to a <xref:
 ```xaml
 <ListView ItemsSource="{x:Static local:NamedColor.All}">
     <ListView.ItemTemplate>
-        <DataTemplate>
+        <DataTemplate x:DataType="local:NamedColor">
             <ViewCell>
                 <Label Text="{Binding FriendlyName}" />
             </ViewCell>
@@ -288,7 +300,7 @@ The item template can be expanded to display more information and the actual col
     <ListView ItemsSource="{x:Static local:NamedColor.All}"
               RowHeight="{StaticResource rowHeight}">
         <ListView.ItemTemplate>
-            <DataTemplate>
+            <DataTemplate x:DataType="local:NamedColor">
                 <ViewCell>
                     <StackLayout Padding="5, 5, 0, 5"
                                  Orientation="Horizontal"

diff --git a/docs/xaml/fundamentals/mvvm.md b/docs/xaml/fundamentals/mvvm.md
@@ -24,7 +24,8 @@ In [XAML markup extensions](markup-extensions.md) you saw how to define a new XM
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:sys="clr-namespace:System;assembly=netstandard"
              x:Class="XamlSamples.OneShotDateTimePage"
-             Title="One-Shot DateTime Page">
+             Title="One-Shot DateTime Page"
+             x:DataType="sys:DateTime">
 
     <VerticalStackLayout BindingContext="{x:Static sys:DateTime.Now}"
                          Spacing="25" Padding="30,0"
@@ -108,7 +109,8 @@ The following example shows XAML that consumes `ClockViewModel`:
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:XamlSamples"
              x:Class="XamlSamples.ClockPage"
-             Title="Clock Page">
+             Title="Clock Page"
+             x:DataType="local:ClockViewModel">
     <ContentPage.BindingContext>
         <local:ClockViewModel />
     </ContentPage.BindingContext>
@@ -215,7 +217,8 @@ The following XAML example contains a <xref:Microsoft.Maui.Controls.BoxView> who
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:XamlSamples"
              x:Class="XamlSamples.HslColorScrollPage"
-             Title="HSL Color Scroll Page">
+             Title="HSL Color Scroll Page"
+             x:DataType="local:HslViewModel">
     <ContentPage.BindingContext>
         <local:HslViewModel Color="Aqua" />
     </ContentPage.BindingContext>
@@ -373,7 +376,8 @@ The following example shows the XAML that consumes the `KeypadViewModel`:
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:XamlSamples"
              x:Class="XamlSamples.KeypadPage"
-             Title="Keypad Page">
+             Title="Keypad Page"
+             x:DataType="local:KeypadViewModel">
     <ContentPage.BindingContext>
         <local:KeypadViewModel />
     </ContentPage.BindingContext>

diff --git a/docs/xaml/generics.md b/docs/xaml/generics.md
@@ -96,7 +96,7 @@ A single object type argument can be specified as a prefixed string argument usi
             </scg:List>
         </CollectionView.ItemsSource>
         <CollectionView.ItemTemplate>
-            <DataTemplate>
+            <DataTemplate x:DataType="models:Monkey">
                 <Grid Padding="10">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
@@ -165,7 +165,7 @@ Multiple type arguments can be specified as prefixed string arguments, delimited
             </scg:List>
         </CollectionView.ItemsSource>
         <CollectionView.ItemTemplate>
-            <DataTemplate>
+            <DataTemplate x:DataType="scg:KeyValuePair(x:String,models:Monkey)">
                 <Grid Padding="10">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />

diff --git a/docs/xaml/markup-extensions/consume.md b/docs/xaml/markup-extensions/consume.md
@@ -136,15 +136,17 @@ The following XAML example shows two uses of `x:Reference` with data bindings, t
              x:Name="page"
              Title="x:Reference Demo">    
     <StackLayout Margin="10, 0">        
-        <Label Text="{Binding Source={x:Reference page},
+        <Label x:DataType="ContentPage"
+               Text="{Binding Source={x:Reference page},
                               StringFormat='The type of this page is {0}'}"
                FontSize="18"
                VerticalOptions="Center"
                HorizontalTextAlignment="Center" />
         <Slider x:Name="slider"
                 Maximum="360"
                 VerticalOptions="Center" />
-        <Label BindingContext="{x:Reference slider}"
+        <Label x:DataType="Slider"
+               BindingContext="{x:Reference slider}"
                Text="{Binding Value, StringFormat='{0:F0}&#x00B0; rotation'}"
                Rotation="{Binding Value}"
                FontSize="24"
@@ -171,10 +173,12 @@ The following XAML example demonstrates using the `x:Type` markup extension to i
 ```xaml
 <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:MarkupExtensions"
              x:Class="MarkupExtensions.TypeDemoPage"
-             Title="x:Type Demo">    
+             Title="x:Type Demo"
+             x:DataType="local:TypeDemoPage">
     <StackLayout x:Name="stackLayout"
-                 Padding="10, 0">        
+                 Padding="10, 0">
         <Button Text="Create a Slider"
                 HorizontalOptions="Center"
                 VerticalOptions="Center"
@@ -278,15 +282,15 @@ The following XAML example shows how to use `x:Array` to add items to a <xref:Mi
             </x:Array>
         </ListView.ItemsSource>
         <ListView.ItemTemplate>
-            <DataTemplate>
+            <DataTemplate x:DataType="Color">
                 <ViewCell>
                     <BoxView Color="{Binding}"
                              Margin="3" />
                 </ViewCell>
             </DataTemplate>
         </ListView.ItemTemplate>
     </ListView>
-</ContentPage>     
+</ContentPage>  
 ```
 
 In this example, the <xref:Microsoft.Maui.Controls.ViewCell> creates a simple <xref:Microsoft.Maui.Controls.BoxView> for each color entry: