From 6635a1249c2c069abeaf22c995a2425c7e44aa37 Mon Sep 17 00:00:00 2001 From: David Britch Date: Wed, 27 Nov 2024 16:24:08 +0000 Subject: [PATCH] Replace Frame with Border (#2648) * Replace Frame with Border. * Edit. * EDit. * Edit. * Edit. * Edits. --- docs/fundamentals/controltemplate.md | 36 +++++----- .../data-binding/relative-bindings.md | 10 +-- docs/fundamentals/triggers.md | 13 ++-- docs/user-interface/brushes/gradient.md | 2 +- docs/user-interface/brushes/lineargradient.md | 65 +++++++++--------- docs/user-interface/brushes/radialgradient.md | 33 +++++---- docs/user-interface/brushes/solidcolor.md | 68 +++++++++---------- .../controls/carouselview/interaction.md | 4 +- .../controls/carouselview/layout.md | 40 +++++------ .../controls/carouselview/populate-data.md | 44 ++++++------ docs/user-interface/controls/contentview.md | 14 ++-- docs/user-interface/layouts/stacklayout.md | 68 +++++++++---------- .../layouts/verticalstacklayout.md | 20 +++--- docs/whats-new/dotnet-9.md | 27 +++++++- 14 files changed, 230 insertions(+), 214 deletions(-) diff --git a/docs/fundamentals/controltemplate.md b/docs/fundamentals/controltemplate.md index 813a02d5b..6bf44144c 100644 --- a/docs/fundamentals/controltemplate.md +++ b/docs/fundamentals/controltemplate.md @@ -53,19 +53,19 @@ The following XAML example shows a - - + ... ``` -When a 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 object. The object uses the [`RelativeSource`](xref:Microsoft.Maui.Controls.Xaml.RelativeSourceExtension) markup extension to set its to the runtime object instance to which the template will be applied, which is known as the *templated parent*. The 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 from the root 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 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 object. The object uses the [`RelativeSource`](xref:Microsoft.Maui.Controls.Xaml.RelativeSourceExtension) markup extension to set its to the runtime object instance to which the template will be applied, which is known as the *templated parent*. The 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 from the root 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 ``` -In this example, the controls in the `CardViewControlTemplate` become part of the visual tree for each `CardView` object. Because the root object for the control template sets its to the templated parent, the 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 object for the control template sets its to the templated parent, the 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 - - + ... @@ -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"> - - + ``` @@ -384,16 +384,16 @@ In this example, the - - + ``` -In this example, the root element of the is a object. The object uses the [`RelativeSource`](xref:Microsoft.Maui.Controls.Xaml.RelativeSourceExtension) markup extension to set its to the templated parent. The binding expressions of the object and its children resolve against `CardView` properties, due to inheriting the from the root element. The following screenshot shows the page displaying the `People` collection: +In this example, the root element of the is a object. The object uses the [`RelativeSource`](xref:Microsoft.Maui.Controls.Xaml.RelativeSourceExtension) markup extension to set its to the templated parent. The binding expressions of the object and its children resolve against `CardView` properties, due to inheriting the from the root 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 index 7d8f6998a..5a0b954d1 100644 --- 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 - ... @@ -139,7 +139,7 @@ The following XAML shows an example of the `TemplatedParent` relative binding mo - + @@ -165,7 +165,7 @@ The following XAML shows an example of the `TemplatedParent` relative binding mo ``` -In this example, the , which is the root element of the , has its `BindingContext` set to the runtime object instance to which the template is applied. Therefore, the and its children resolve their binding expressions against the properties of each `CardView` object: +In this example, the , which is the root element of the , has its `BindingContext` set to the runtime object instance to which the template is applied. Therefore, the 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 index 319604f92..c6d21d3f0 100644 --- a/docs/fundamentals/triggers.md +++ b/docs/fundamentals/triggers.md @@ -410,18 +410,19 @@ The following XAML example shows a that inc ... - + - + ``` diff --git a/docs/user-interface/brushes/gradient.md b/docs/user-interface/brushes/gradient.md index 4ccf7f439..7ec6f7886 100644 --- 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 object and set its `StartPoint` to (0,0) and its `EndPoint` to (1,0). Then, add two or more objects to the `LinearGradientBrush.GradientStops` collection, that specify the colors in the gradient and their positions. -The following XAML example shows a horizontal that's set as the `Background` of a : +The following XAML example shows a horizontal that's set as the `Background` of a : ```xaml - - + + - - + + ``` -In this example, the background of the is painted with a that interpolates from yellow to green horizontally: +In this example, the background of the is painted with a 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 object and set its `StartPoint` to (0,0) and its `EndPoint` to (0,1). Then, add two or more objects to the `LinearGradientBrush.GradientStops` collection, that specify the colors in the gradient and their positions. -The following XAML example shows a vertical that's set as the `Background` of a : +The following XAML example shows a vertical that's set as the `Background` of a : ```xaml - - + + - - + + ``` -In this example, the background of the is painted with a that interpolates from yellow to green vertically: +In this example, the background of the is painted with a 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 object and set its `StartPoint` to (0,0) and its `EndPoint` to (1,1). Then, add two or more objects to the `LinearGradientBrush.GradientStops` collection, that specify the colors in the gradient and their positions. -The following XAML example shows a diagonal that's set as the `Background` of a : +The following XAML example shows a diagonal that's set as the `Background` of a : ```xaml - - + + @@ -109,10 +106,10 @@ The following XAML example shows a diagonal - - + + ``` -In this example, the background of the is painted with a that interpolates from yellow to green diagonally: +In this example, the background of the is painted with a 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."::: diff --git a/docs/user-interface/brushes/radialgradient.md b/docs/user-interface/brushes/radialgradient.md index 6cbe34981..99ae771b5 100644 --- a/docs/user-interface/brushes/radialgradient.md +++ b/docs/user-interface/brushes/radialgradient.md @@ -28,15 +28,14 @@ A radial gradient brush's gradient stops are positioned along a gradient axis de To create a radial gradient, create a object and set its `Center` and `Radius` properties. Then, add two or more objects to the `RadialGradientBrush.GradientStops` collection, that specify the colors in the gradient and their positions. -The following XAML example shows a that's set as the `Background` of a : +The following XAML example shows a that's set as the `Background` of a : ```xaml - - + + @@ -45,15 +44,15 @@ The following XAML example shows a - - + + ``` -In this example, the background of the is painted with a that interpolates from red to dark blue. The center of the radial gradient is positioned in the center of the : +In this example, the background of the is painted with a that interpolates from red to dark blue. The center of the radial gradient is positioned in the center of the : -:::image type="content" source="media/radialgradient/center.png" alt-text="Screenshot of a Frame painted with a centered RadialGradientBrush."::: +:::image type="content" source="media/radialgradient/center.png" alt-text="Screenshot of a Border painted with a centered RadialGradientBrush."::: -The following XAML example moves the center of the radial gradient to the top-left corner of the : +The following XAML example moves the center of the radial gradient to the top-left corner of the : ```xaml @@ -65,11 +64,11 @@ The following XAML example moves the center of the radial gradient to the top-le ``` -In this example, the background of the is painted with a that interpolates from red to dark blue. The center of the radial gradient is positioned in the top-left of the : +In this example, the background of the is painted with a that interpolates from red to dark blue. The center of the radial gradient is positioned in the top-left of the : -:::image type="content" source="media/radialgradient/top-left.png" alt-text="Screenshot of a Frame painted with a top-left RadialGradientBrush."::: +:::image type="content" source="media/radialgradient/top-left.png" alt-text="Screenshot of a Border painted with a top-left RadialGradientBrush."::: -The following XAML example moves the center of the radial gradient to the bottom-right corner of the : +The following XAML example moves the center of the radial gradient to the bottom-right corner of the : ```xaml @@ -81,6 +80,6 @@ The following XAML example moves the center of the radial gradient to the bottom ``` -In this example, the background of the is painted with a that interpolates from red to dark blue. The center of the radial gradient is positioned in the bottom-right of the : +In this example, the background of the is painted with a that interpolates from red to dark blue. The center of the radial gradient is positioned in the bottom-right of the : -:::image type="content" source="media/radialgradient/bottom-right.png" alt-text="Screenshot of a Frame painted with a bottom-right RadialGradientBrush."::: +:::image type="content" source="media/radialgradient/bottom-right.png" alt-text="Screenshot of a Border painted with a bottom-right RadialGradientBrush."::: diff --git a/docs/user-interface/brushes/solidcolor.md b/docs/user-interface/brushes/solidcolor.md index 970c33152..176538f1a 100644 --- a/docs/user-interface/brushes/solidcolor.md +++ b/docs/user-interface/brushes/solidcolor.md @@ -23,61 +23,58 @@ There are three main techniques for creating a from a value. In XAML, this enables a to be created from a predefined value: ```xaml - + ``` -In this example, the background of the is painted with a dark blue : +In this example, the background of the is painted with a dark blue : -:::image type="content" source="media/solidcolor/predefined-color.png" alt-text="Screenshot of a Frame painted with a predefined color."::: +:::image type="content" source="media/solidcolor/predefined-color.png" alt-text="Screenshot of a Border painted with a predefined color."::: Alternatively, the value can be specified using property tag syntax: ```xaml - - - - - + + + + + ``` -In this example, the background of the is painted with a whose color is specified by setting the `SolidColorBrush.Color` property. +In this example, the background of the is painted with a whose color is specified by setting the `SolidColorBrush.Color` property. ### Use a predefined Brush The class defines a set of commonly used objects. The following example uses one of these predefined objects: ```xaml - + ``` The equivalent C# code is: ```csharp -Frame frame = new Frame +Border border = new Border { Background = Brush.Indigo, - BorderColor = Colors.LightGray, + Stroke = Colors.LightGray, // ... }; ``` -In this example, the background of the is painted with an indigo : +In this example, the background of the is painted with an indigo : -:::image type="content" source="media/solidcolor/predefined-brush.png" alt-text="Screenshot of a Frame painted with a predefined SolidColorBrush."::: +:::image type="content" source="media/solidcolor/predefined-brush.png" alt-text="Screenshot of a Border painted with a predefined SolidColorBrush."::: For a list of predefined objects provided by the class, see [Solid color brushes](#solid-color-brushes). @@ -94,17 +91,16 @@ In addition, a color can be specified as `#aarrggbb` where `aa` specifies the al The following example sets the color value of a using hexadecimal notation: ```xaml - + ``` -In this example, the background of the is painted with a salmon-colored : +In this example, the background of the is painted with a salmon-colored : -:::image type="content" source="media/solidcolor/hex.png" alt-text="Screenshot of a Frame painted with a SolidColorBrush created with hexadecimal notation."::: +:::image type="content" source="media/solidcolor/hex.png" alt-text="Screenshot of a Border painted with a SolidColorBrush created with hexadecimal notation."::: For other ways of describing color, see [Colors](~/user-interface/graphics/colors.md). diff --git a/docs/user-interface/controls/carouselview/interaction.md b/docs/user-interface/controls/carouselview/interaction.md index c9c83b0d5..3eb22f0de 100644 --- a/docs/user-interface/controls/carouselview/interaction.md +++ b/docs/user-interface/controls/carouselview/interaction.md @@ -316,9 +316,9 @@ The following XAML example shows how to define the `CurrentItem`, `PreviousItem` - + ... - + diff --git a/docs/user-interface/controls/carouselview/layout.md b/docs/user-interface/controls/carouselview/layout.md index 651e5bfe3..4ca89c2d8 100644 --- a/docs/user-interface/controls/carouselview/layout.md +++ b/docs/user-interface/controls/carouselview/layout.md @@ -42,13 +42,13 @@ By default, will display its items h - + - + @@ -110,13 +110,13 @@ This results in a layout that grows horizontally as new items are added. - + - + @@ -216,19 +216,19 @@ This code results in a vertical layout that has a spacing of 20 between items. ## Dynamic resizing of items -Items in a can be dynamically resized at runtime by changing layout related properties of elements within the . For example, the following code example changes the and properties of an object, and the property of its parent : +Items in a can be dynamically resized at runtime by changing layout related properties of elements within the . For example, the following code example changes the and properties of an object, and the property of its parent : ```csharp void OnImageTapped(object sender, EventArgs e) { Image image = sender as Image; image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(150) ? 200 : 150; - Frame frame = ((Frame)image.Parent.Parent); - frame.HeightRequest = frame.HeightRequest.Equals(300) ? 350 : 300; + Border border = ((Border)image.Parent.Parent); + border.HeightRequest = border.HeightRequest.Equals(360) ? 410 : 360; } ``` -The `OnImageTapped` event handler is executed in response to an object being tapped, and changes the dimensions of the image (and its parent , so that it's more easily viewed: +The `OnImageTapped` event handler is executed in response to an object being tapped, and changes the dimensions of the image (and its parent ), so that it's more easily viewed: :::image type="content" source="media/layout/runtime-resizing.png" alt-text="Screenshot of a CarouselView with dynamic item sizing."::: diff --git a/docs/user-interface/controls/carouselview/populate-data.md b/docs/user-interface/controls/carouselview/populate-data.md index fc0533727..420732f99 100644 --- a/docs/user-interface/controls/carouselview/populate-data.md +++ b/docs/user-interface/controls/carouselview/populate-data.md @@ -55,13 +55,13 @@ The appearance of each item in the c - + - + @@ -114,9 +114,9 @@ carouselView.ItemTemplate = new DataTemplate(() => stackLayout.Add(locationLabel); stackLayout.Add(detailsLabel); - Frame frame = new Frame { ... }; + Border border = new Border { ... }; StackLayout rootStackLayout = new StackLayout(); - rootStackLayout.Add(frame); + rootStackLayout.Add(border); return rootStackLayout; }); @@ -239,13 +239,13 @@ For more information about indicators, see [IndicatorView](~/user-interface/cont - + @@ -269,7 +269,7 @@ For more information about indicators, see [IndicatorView](~/user-interface/cont - + @@ -285,7 +285,7 @@ carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys"); carouselView.ItemTemplate = new DataTemplate(() => { StackLayout stackLayout = new StackLayout(); - Frame frame = new Frame { ... }; + Border border = new Border { ... }; SwipeView swipeView = new SwipeView(); SwipeItem favoriteSwipeItem = new SwipeItem @@ -311,14 +311,14 @@ carouselView.ItemTemplate = new DataTemplate(() => StackLayout swipeViewStackLayout = new StackLayout { ... }; swipeView.Content = swipeViewStackLayout; - frame.Content = swipeView; - stackLayout.Add(frame); + border.Content = swipeView; + stackLayout.Add(border); return stackLayout; }); ``` -In this example, the content is a that defines the appearance of each item that's surrounded by a in the . The swipe items are used to perform actions on the content, and are revealed when the control is swiped from the bottom and from the top: +In this example, the content is a that defines the appearance of each item that's surrounded by a in the . The swipe items are used to perform actions on the content, and are revealed when the control is swiped from the bottom and from the top: :::image type="content" source="media/populate-data/swipeview-bottom.png" alt-text="Screenshot of a CarouselView bottom context menu item."::: :::image type="content" source="media/populate-data/swipeview-top.png" alt-text="Screenshot of a CarouselView top context menu item."::: diff --git a/docs/user-interface/controls/contentview.md b/docs/user-interface/controls/contentview.md index 4c634a6d3..7dc6baf5e 100644 --- a/docs/user-interface/controls/contentview.md +++ b/docs/user-interface/controls/contentview.md @@ -75,18 +75,18 @@ The custom control UI can be defined in the XAML file for the - ... - - + ``` diff --git a/docs/user-interface/layouts/stacklayout.md b/docs/user-interface/layouts/stacklayout.md index 7abfaa835..2aec4a12e 100644 --- a/docs/user-interface/layouts/stacklayout.md +++ b/docs/user-interface/layouts/stacklayout.md @@ -286,8 +286,8 @@ The following XAML shows an example of nesting ... - + - - + + - - + + - + ... ``` -In this example, the parent contains nested objects inside objects. The parent is oriented vertically, while the child objects are oriented horizontally: +In this example, the parent contains nested objects inside objects. The parent is oriented vertically, while the child objects are oriented horizontally: :::image type="content" source="media/stacklayout/nested.png" alt-text="Nested .NET MAUI StackLayouts."::: @@ -340,59 +340,59 @@ public class CombinedStackLayoutPage : ContentPage { Title = "Combined StackLayouts demo"; - Frame frame1 = new Frame + Border border1 = new Border { - BorderColor = Colors.Black, + Stroke = Colors.Black, Padding = new Thickness(5) }; - StackLayout frame1StackLayout = new StackLayout + StackLayout border1StackLayout = new StackLayout { Orientation = StackOrientation.Horizontal, Spacing = 15 }; - frame1StackLayout.Add(new BoxView { Color = Colors.Red, WidthRequest = 40 }); - frame1StackLayout.Add(new Label { Text = "Red", FontSize = 22, VerticalOptions = LayoutOptions.Center }); - frame1.Content = frame1StackLayout; + border1StackLayout.Add(new BoxView { Color = Colors.Red, WidthRequest = 40 }); + border1StackLayout.Add(new Label { Text = "Red", FontSize = 20, VerticalOptions = LayoutOptions.Center }); + border1.Content = border1StackLayout; - Frame frame2 = new Frame + Border border2 = new Border { - BorderColor = Colors.Black, + Stroke = Colors.Black, Padding = new Thickness(5) }; - StackLayout frame2StackLayout = new StackLayout + StackLayout border2StackLayout = new StackLayout { Orientation = StackOrientation.Horizontal, Spacing = 15 }; - frame2StackLayout.Add(new BoxView { Color = Colors.Yellow, WidthRequest = 40 }); - frame2StackLayout.Add(new Label { Text = "Yellow", FontSize = 22, VerticalOptions = LayoutOptions.Center }); - frame2.Content = frame2StackLayout; + border2StackLayout.Add(new BoxView { Color = Colors.Yellow, WidthRequest = 40 }); + border2StackLayout.Add(new Label { Text = "Yellow", FontSize = 20, VerticalOptions = LayoutOptions.Center }); + border2.Content = border2StackLayout; - Frame frame3 = new Frame + Border border3 = new Border { - BorderColor = Colors.Black, + Stroke = Colors.Black, Padding = new Thickness(5) }; - StackLayout frame3StackLayout = new StackLayout + StackLayout border3StackLayout = new StackLayout { Orientation = StackOrientation.Horizontal, Spacing = 15 }; - frame3StackLayout.Add(new BoxView { Color = Colors.Blue, WidthRequest = 40 }); - frame3StackLayout.Add(new Label { Text = "Blue", FontSize = 22, VerticalOptions = LayoutOptions.Center }); - frame3.Content = frame3StackLayout; + border3StackLayout.Add(new BoxView { Color = Colors.Blue, WidthRequest = 40 }); + border3StackLayout.Add(new Label { Text = "Blue", FontSize = 20, VerticalOptions = LayoutOptions.Center }); + border3.Content = border3StackLayout; ... StackLayout stackLayout = new StackLayout { Margin = new Thickness(20) }; stackLayout.Add(new Label { Text = "Primary colors" }); - stackLayout.Add(frame1); - stackLayout.Add(frame2); - stackLayout.Add(frame3); + stackLayout.Add(border1); + stackLayout.Add(border2); + stackLayout.Add(border3); stackLayout.Add(new Label { Text = "Secondary colors" }); - stackLayout.Add(frame4); - stackLayout.Add(frame5); - stackLayout.Add(frame6); + stackLayout.Add(border4); + stackLayout.Add(border5); + stackLayout.Add(border6); Content = stackLayout; } diff --git a/docs/user-interface/layouts/verticalstacklayout.md b/docs/user-interface/layouts/verticalstacklayout.md index 2c0f4048c..2e688fb42 100644 --- a/docs/user-interface/layouts/verticalstacklayout.md +++ b/docs/user-interface/layouts/verticalstacklayout.md @@ -154,8 +154,8 @@ The following XAML shows an example of nesting