Replace Frame with Border (#2648)

* Replace Frame with Border. * Edit. * EDit. * Edit. * Edit. * Edits.
dotnet · Nov 27, 2024 · 6635a12 · 6635a12
1 parent 6f9e019
commit 6635a12
Show file tree

Hide file tree

Showing 14 changed files with 230 additions and 214 deletions.
diff --git a/docs/fundamentals/controltemplate.md b/docs/fundamentals/controltemplate.md
@@ -53,19 +53,19 @@ The following XAML example shows a <xref:Microsoft.Maui.Controls.ControlTemplate
              ...>
     <ContentPage.Resources>
       <ControlTemplate x:Key="CardViewControlTemplate">
-          <Frame BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
-                 BackgroundColor="{Binding CardColor}"
-                 BorderColor="{Binding BorderColor}"
+          <Border BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
+                  BackgroundColor="{Binding CardColor}"
+                  Stroke="{Binding BorderColor}"
                  ...>
               <!-- UI objects that define the CardView visual structure -->
-          </Frame>
+          </Border>
       </ControlTemplate>
     </ContentPage.Resources>
     ...
 </ContentPage>
 ```
 
-When a <xref:Microsoft.Maui.Controls.ControlTemplate> is declared as a resource, it must have a key specified with the `x:Key` attribute so that it can be identified in the resource dictionary. In this example, the root element of the `CardViewControlTemplate` is a <xref:Microsoft.Maui.Controls.Frame> object. The <xref:Microsoft.Maui.Controls.Frame> object uses the [`RelativeSource`](xref:Microsoft.Maui.Controls.Xaml.RelativeSourceExtension) markup extension to set its <xref:Microsoft.Maui.Controls.BindableObject.BindingContext> to the runtime object instance to which the template will be applied, which is known as the *templated parent*. The <xref:Microsoft.Maui.Controls.Frame> object uses a combination of controls to define the visual structure of a `CardView` object. The binding expressions of these objects resolve against `CardView` properties, due to inheriting the <xref:Microsoft.Maui.Controls.BindableObject.BindingContext> from the root <xref:Microsoft.Maui.Controls.Frame> element. For more information about the [`RelativeSource`](xref:Microsoft.Maui.Controls.Xaml.RelativeSourceExtension) markup extension, see [Relative bindings](~/fundamentals/data-binding/relative-bindings.md).
+When a <xref:Microsoft.Maui.Controls.ControlTemplate> is declared as a resource, it must have a key specified with the `x:Key` attribute so that it can be identified in the resource dictionary. In this example, the root element of the `CardViewControlTemplate` is a <xref:Microsoft.Maui.Controls.Border> object. The <xref:Microsoft.Maui.Controls.Border> object uses the [`RelativeSource`](xref:Microsoft.Maui.Controls.Xaml.RelativeSourceExtension) markup extension to set its <xref:Microsoft.Maui.Controls.BindableObject.BindingContext> to the runtime object instance to which the template will be applied, which is known as the *templated parent*. The <xref:Microsoft.Maui.Controls.Border> object uses a combination of controls to define the visual structure of a `CardView` object. The binding expressions of these objects resolve against `CardView` properties, due to inheriting the <xref:Microsoft.Maui.Controls.BindableObject.BindingContext> from the root <xref:Microsoft.Maui.Controls.Border> element. For more information about the [`RelativeSource`](xref:Microsoft.Maui.Controls.Xaml.RelativeSourceExtension) markup extension, see [Relative bindings](~/fundamentals/data-binding/relative-bindings.md).
 
 ## Consume a ControlTemplate
 
@@ -95,7 +95,7 @@ The following example shows the `CardViewControlTemplate` being assigned to the
 </ContentPage>
 ```
 
-In this example, the controls in the `CardViewControlTemplate` become part of the visual tree for each `CardView` object. Because the root <xref:Microsoft.Maui.Controls.Frame> object for the control template sets its <xref:Microsoft.Maui.Controls.BindableObject.BindingContext> to the templated parent, the <xref:Microsoft.Maui.Controls.Frame> and its children resolve their binding expressions against the properties of each `CardView` object.
+In this example, the controls in the `CardViewControlTemplate` become part of the visual tree for each `CardView` object. Because the root <xref:Microsoft.Maui.Controls.Border> object for the control template sets its <xref:Microsoft.Maui.Controls.BindableObject.BindingContext> to the templated parent, the <xref:Microsoft.Maui.Controls.Border> and its children resolve their binding expressions against the properties of each `CardView` object.
 
 The following screenshot shows the `CardViewControlTemplate` applied to the the `CardView` objects:
 
@@ -132,11 +132,11 @@ The following XAML example shows a <xref:Microsoft.Maui.Controls.ControlTemplate
              ...>
     <ContentPage.Resources>
         <ControlTemplate x:Key="CardViewControlTemplate">
-            <Frame BackgroundColor="{TemplateBinding CardColor}"
-                   BorderColor="{TemplateBinding BorderColor}"
+            <Border BackgroundColor="{TemplateBinding CardColor}"
+                    Stroke="{TemplateBinding BorderColor}"
                    ...>
                 <!-- UI objects that define the CardView visual structure -->                   
-            </Frame>
+            </Border>
         </ControlTemplate>
     </ContentPage.Resources>
     ...
@@ -197,12 +197,12 @@ For example, the `CardViewUI` custom control defines its user interface using th
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="ControlTemplateDemos.Controls.CardViewUI"
              x:Name="this">
-    <Frame BindingContext="{x:Reference this}"
-           BackgroundColor="{Binding CardColor}"
-           BorderColor="{Binding BorderColor}"
+    <Border BindingContext="{x:Reference this}"
+            BackgroundColor="{Binding CardColor}"
+            Stroke="{Binding BorderColor}"
            ...>
         <!-- UI objects that define the CardView visual structure -->           
-    </Frame>
+    </Border>
 </ContentView>
 ```
 
@@ -384,16 +384,16 @@ In this example, the <xref:Microsoft.Maui.Controls.BindableObject.BindingContext
 
 ```xaml
 <ControlTemplate x:Key="CardViewControlTemplate">
-    <Frame BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
-           BackgroundColor="{Binding CardColor}"
-           BorderColor="{Binding BorderColor}"
+    <Border BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
+            BackgroundColor="{Binding CardColor}"
+            Stroke="{Binding BorderColor}"
            ...>
         <!-- UI objects that define the CardView visual structure -->           
-    </Frame>
+    </Border>
 </ControlTemplate>
 ```
 
-In this example, the root element of the <xref:Microsoft.Maui.Controls.ControlTemplate> is a <xref:Microsoft.Maui.Controls.Frame> object. The <xref:Microsoft.Maui.Controls.Frame> object uses the [`RelativeSource`](xref:Microsoft.Maui.Controls.Xaml.RelativeSourceExtension) markup extension to set its <xref:Microsoft.Maui.Controls.BindableObject.BindingContext> to the templated parent. The binding expressions of the <xref:Microsoft.Maui.Controls.Frame> object and its children resolve against `CardView` properties, due to inheriting the <xref:Microsoft.Maui.Controls.BindableObject.BindingContext> from the root <xref:Microsoft.Maui.Controls.Frame> element. The following screenshot shows the page displaying the `People` collection:
+In this example, the root element of the <xref:Microsoft.Maui.Controls.ControlTemplate> is a <xref:Microsoft.Maui.Controls.Border> object. The <xref:Microsoft.Maui.Controls.Border> object uses the [`RelativeSource`](xref:Microsoft.Maui.Controls.Xaml.RelativeSourceExtension) markup extension to set its <xref:Microsoft.Maui.Controls.BindableObject.BindingContext> to the templated parent. The binding expressions of the <xref:Microsoft.Maui.Controls.Border> object and its children resolve against `CardView` properties, due to inheriting the <xref:Microsoft.Maui.Controls.BindableObject.BindingContext> from the root <xref:Microsoft.Maui.Controls.Border> element. The following screenshot shows the page displaying the `People` collection:
 
 :::image type="content" source="media/controltemplate/viewmodel-controltemplate.png" alt-text="Screenshot of three templated CardView objects that bind to a viewmodel.":::
 

diff --git a/docs/fundamentals/data-binding/relative-bindings.md b/docs/fundamentals/data-binding/relative-bindings.md
@@ -126,9 +126,9 @@ The following XAML shows an example of the `TemplatedParent` relative binding mo
 <ContentPage ...>
     <ContentPage.Resources>
         <ControlTemplate x:Key="CardViewControlTemplate">
-            <Frame BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
-                   BackgroundColor="{Binding CardColor}"
-                   BorderColor="{Binding BorderColor}"
+            <Border BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
+                    BackgroundColor="{Binding CardColor}"
+                    Stroke="{Binding BorderColor}"
                    ...>
                 <Grid>
                     ...
@@ -139,7 +139,7 @@ The following XAML shows an example of the `TemplatedParent` relative binding mo
                     <Label Text="{Binding CardDescription}"
                            ... />
                 </Grid>
-            </Frame>
+            </Border>
         </ControlTemplate>
     </ContentPage.Resources>
     <StackLayout>        
@@ -165,7 +165,7 @@ The following XAML shows an example of the `TemplatedParent` relative binding mo
 </ContentPage>
 ```
 
-In this example, the <xref:Microsoft.Maui.Controls.Frame>, which is the root element of the <xref:Microsoft.Maui.Controls.ControlTemplate>, has its `BindingContext` set to the runtime object instance to which the template is applied. Therefore, the <xref:Microsoft.Maui.Controls.Frame> and its children resolve their binding expressions against the properties of each `CardView` object:
+In this example, the <xref:Microsoft.Maui.Controls.Border>, which is the root element of the <xref:Microsoft.Maui.Controls.ControlTemplate>, has its `BindingContext` set to the runtime object instance to which the template is applied. Therefore, the <xref:Microsoft.Maui.Controls.Border> and its children resolve their binding expressions against the properties of each `CardView` object:
 
 :::image type="content" source="media/relative-bindings/templatedparent-relative-binding.png" alt-text="Screenshot of a TemplatedParent mode relative binding.":::
 

diff --git a/docs/fundamentals/triggers.md b/docs/fundamentals/triggers.md
@@ -410,18 +410,19 @@ The following XAML example shows a <xref:Microsoft.Maui.Controls.Style> that inc
 </Style>
 ...
 <Grid>
-    <Frame BackgroundColor="White"
-           CornerRadius="12"
-           Margin="24"
-           HorizontalOptions="Center"
-           VerticalOptions="Center">
+    <Border BackgroundColor="White"
+            StrokeShape="RoundRectangle 12"
+            Margin="24"
+            Padding="24"
+            HorizontalOptions="Center"
+            VerticalOptions="Center">
         <StackLayout Orientation="Horizontal">
             <CheckBox x:Name="checkBox"
                       VerticalOptions="Center" />
             <Label Text="Check the CheckBox to modify the Grid background color."
                    VerticalOptions="Center" />
         </StackLayout>
-    </Frame>
+    </Border>
 </Grid>
 ```
 

diff --git a/docs/user-interface/brushes/gradient.md b/docs/user-interface/brushes/gradient.md
@@ -52,6 +52,6 @@ The following XAML example creates a diagonal <xref:Microsoft.Maui.Controls.Line
 
 The color of each point between gradient stops is interpolated as a combination of the color specified by the two bounding gradient stops. The following diagram shows the gradient stops from the previous example:
 
-:::image type="content" source="media/gradient/gradient-stops.png" alt-text="Screenshot of a Frame painted with a diagonal LinearGradientBrush." border="false":::
+:::image type="content" source="media/gradient/gradient-stops.png" alt-text="Screenshot of a Border painted with a diagonal LinearGradientBrush." border="false":::
 
 In this diagram, the circles mark the position of gradient stops, and the dashed line shows the gradient axis. The first gradient stop specifies the color yellow at an offset of 0.0. The second gradient stop specifies the color red at an offset of 0.25. The points between these two gradient stops gradually change from yellow to red as you move from left to right along the gradient axis. The third gradient stop specifies the color blue at an offset of 0.75. The points between the second and third gradient stops gradually change from red to blue. The fourth gradient stop specifies the color lime green at an offset of 1.0. The points between the third and fourth gradient stops gradually change from blue to lime green.
diff --git a/docs/user-interface/brushes/lineargradient.md b/docs/user-interface/brushes/lineargradient.md
@@ -28,79 +28,76 @@ A linear gradient brush's gradient stops are positioned along the gradient axis.
 
 The `StartPoint` and `EndPoint` properties are relative to the area being painted. (0,0) represents the top-left corner of the area being painted, and (1,1) represents the bottom-right corner of the area being painted. The following diagram shows the gradient axis for a diagonal linear gradient brush:
 
-:::image type="content" source="media/lineargradient/gradient-axis.png" alt-text="Frame with a diagonal gradient axis." border="false":::
+:::image type="content" source="media/lineargradient/gradient-axis.png" alt-text="Screenshot of a Border with a diagonal gradient axis." border="false":::
 
 In this diagram, the dashed line shows the gradient axis, which highlights the interpolation path of the gradient from the start point to the end point.
 
 ### Create a horizontal linear gradient
 
 To create a horizontal linear gradient, create a <xref:Microsoft.Maui.Controls.LinearGradientBrush> object and set its `StartPoint` to (0,0) and its `EndPoint` to (1,0). Then, add two or more <xref:Microsoft.Maui.Controls.GradientStop> objects to the `LinearGradientBrush.GradientStops` collection, that specify the colors in the gradient and their positions.
 
-The following XAML example shows a horizontal <xref:Microsoft.Maui.Controls.LinearGradientBrush> that's set as the `Background` of a <xref:Microsoft.Maui.Controls.Frame>:
+The following XAML example shows a horizontal <xref:Microsoft.Maui.Controls.LinearGradientBrush> that's set as the `Background` of a <xref:Microsoft.Maui.Controls.Border>:
 
 ```xaml
-<Frame BorderColor="LightGray"
-       HasShadow="True"
-       CornerRadius="12"
-       HeightRequest="120"
-       WidthRequest="120">
-    <Frame.Background>
+<Border Stroke="LightGray"
+        StrokeShape="RoundRectangle 12"
+        HeightRequest="120"
+        WidthRequest="120">
+    <Border.Background>
         <!-- StartPoint defaults to (0,0) -->
         <LinearGradientBrush EndPoint="1,0">
             <GradientStop Color="Yellow"
                           Offset="0.1" />
             <GradientStop Color="Green"
                           Offset="1.0" />
         </LinearGradientBrush>
-    </Frame.Background>
-</Frame>  
+    </Border.Background>
+</Border>  
 ```
 
-In this example, the background of the <xref:Microsoft.Maui.Controls.Frame> is painted with a <xref:Microsoft.Maui.Controls.LinearGradientBrush> that interpolates from yellow to green horizontally:
+In this example, the background of the <xref:Microsoft.Maui.Controls.Border> is painted with a <xref:Microsoft.Maui.Controls.LinearGradientBrush> that interpolates from yellow to green horizontally:
 
-:::image type="content" source="media/lineargradient/horizontal.png" alt-text="Screenshot of a Frame painted with a horizontal LinearGradientBrush.":::
+:::image type="content" source="media/lineargradient/horizontal.png" alt-text="Screenshot of a Border painted with a horizontal LinearGradientBrush.":::
 
 ### Create a vertical linear gradient
 
 To create a vertical linear gradient, create a <xref:Microsoft.Maui.Controls.LinearGradientBrush> object and set its `StartPoint` to (0,0) and its `EndPoint` to (0,1). Then, add two or more <xref:Microsoft.Maui.Controls.GradientStop> objects to the `LinearGradientBrush.GradientStops` collection, that specify the colors in the gradient and their positions.
 
-The following XAML example shows a vertical <xref:Microsoft.Maui.Controls.LinearGradientBrush> that's set as the `Background` of a <xref:Microsoft.Maui.Controls.Frame>:
+The following XAML example shows a vertical <xref:Microsoft.Maui.Controls.LinearGradientBrush> that's set as the `Background` of a <xref:Microsoft.Maui.Controls.Border>:
 
 ```xaml
-<Frame BorderColor="LightGray"
-       HasShadow="True"
-       CornerRadius="12"
-       HeightRequest="120"
-       WidthRequest="120">
-    <Frame.Background>
+<Border Stroke="LightGray"
+        StrokeShape="RoundRectangle 12"
+        HeightRequest="120"
+        WidthRequest="120">
+    <Border.Background>
         <!-- StartPoint defaults to (0,0) -->    
         <LinearGradientBrush EndPoint="0,1">
             <GradientStop Color="Yellow"
                           Offset="0.1" />
             <GradientStop Color="Green"
                           Offset="1.0" />
         </LinearGradientBrush>
-    </Frame.Background>
-</Frame>
+    </Border.Background>
+</Border>
 ```
 
-In this example, the background of the <xref:Microsoft.Maui.Controls.Frame> is painted with a <xref:Microsoft.Maui.Controls.LinearGradientBrush> that interpolates from yellow to green vertically:
+In this example, the background of the <xref:Microsoft.Maui.Controls.Border> is painted with a <xref:Microsoft.Maui.Controls.LinearGradientBrush> that interpolates from yellow to green vertically:
 
-:::image type="content" source="media/lineargradient/vertical.png" alt-text="Screenshot of a Frame painted with a vertical LinearGradientBrush.":::
+:::image type="content" source="media/lineargradient/vertical.png" alt-text="Screenshot of a Border painted with a vertical LinearGradientBrush.":::
 
 ### Create a diagonal linear gradient
 
 To create a diagonal linear gradient, create a <xref:Microsoft.Maui.Controls.LinearGradientBrush> object and set its `StartPoint` to (0,0) and its `EndPoint` to (1,1). Then, add two or more <xref:Microsoft.Maui.Controls.GradientStop> objects to the `LinearGradientBrush.GradientStops` collection, that specify the colors in the gradient and their positions.
 
-The following XAML example shows a diagonal <xref:Microsoft.Maui.Controls.LinearGradientBrush> that's set as the `Background` of a <xref:Microsoft.Maui.Controls.Frame>:
+The following XAML example shows a diagonal <xref:Microsoft.Maui.Controls.LinearGradientBrush> that's set as the `Background` of a <xref:Microsoft.Maui.Controls.Border>:
 
 ```xaml
-<Frame BorderColor="LightGray"
-       HasShadow="True"
-       CornerRadius="12"
-       HeightRequest="120"
-       WidthRequest="120">
-    <Frame.Background>
+<Border Stroke="LightGray"
+        StrokeShape="RoundRectangle 12"
+        HeightRequest="120"
+        WidthRequest="120">
+    <Border.Background>
         <!-- StartPoint defaults to (0,0)      
              Endpoint defaults to (1,1) -->
         <LinearGradientBrush>
@@ -109,10 +106,10 @@ The following XAML example shows a diagonal <xref:Microsoft.Maui.Controls.Linear
             <GradientStop Color="Green"
                           Offset="1.0" />
         </LinearGradientBrush>
-    </Frame.Background>
-</Frame>
+    </Border.Background>
+</Border>
 ```
 
-In this example, the background of the <xref:Microsoft.Maui.Controls.Frame> is painted with a <xref:Microsoft.Maui.Controls.LinearGradientBrush> that interpolates from yellow to green diagonally:
+In this example, the background of the <xref:Microsoft.Maui.Controls.Border> is painted with a <xref:Microsoft.Maui.Controls.LinearGradientBrush> that interpolates from yellow to green diagonally:
 
-:::image type="content" source="media/lineargradient/diagonal.png" alt-text="Screenshot of a Frame painted with a diagonal LinearGradientBrush.":::
+:::image type="content" source="media/lineargradient/diagonal.png" alt-text="Screenshot of a Border painted with a diagonal LinearGradientBrush.":::