Validate that ContentView works adding samples in the Gallery (#1674)

dotnet · Jul 20, 2021 · ff78dcb · ff78dcb
1 parent b865406
commit ff78dcb
Show file tree

Hide file tree

Showing 7 changed files with 283 additions and 0 deletions.
diff --git a/src/Controls/samples/Controls.Sample/Controls/CardView/CardView.xaml b/src/Controls/samples/Controls.Sample/Controls/CardView/CardView.xaml
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ContentView 
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    x:Class="Maui.Controls.Sample.Controls.CardView">
+    <Frame
+        x:Name="Card"
+        BackgroundColor="{Binding CardColor}"
+        BorderColor="{Binding BorderColor}"
+        CornerRadius="5"
+        HasShadow="True"
+        Padding="8"
+        VerticalOptions="Center"
+        HorizontalOptions="Center"
+        Margin="0, 12, 0, 0">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="75" />
+                <RowDefinition Height="4" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="75" />
+                <ColumnDefinition Width="200" />
+            </Grid.ColumnDefinitions>
+            <Frame 
+                IsClippedToBounds="True"
+                BorderColor="{Binding BorderColor, FallbackValue='Black'}"
+                BackgroundColor="{Binding IconBackgroundColor, FallbackValue='Gray'}"
+                CornerRadius="38"
+                HeightRequest="60"
+                WidthRequest="60"
+                HorizontalOptions="Center"
+                HasShadow="False"
+                VerticalOptions="Center">
+                <Image 
+                    Source="{Binding IconImageSource}"
+                    Margin="-20"
+                    WidthRequest="100"
+                    HeightRequest="100"
+                    Aspect="AspectFill" />
+            </Frame>
+            <Label 
+                Grid.Column="1"
+                Text="{Binding CardTitle, FallbackValue='Card Title'}"
+                FontAttributes="Bold"
+                FontSize="Large"
+                VerticalTextAlignment="Center"
+                HorizontalTextAlignment="Start" />
+            <BoxView
+                Grid.Row="1"
+                    Grid.ColumnSpan="2"
+                    BackgroundColor="{Binding BorderColor, FallbackValue='Black'}"
+                    HeightRequest="2"
+                    HorizontalOptions="Fill" />
+            <Label 
+                Grid.Row="2"
+                Grid.ColumnSpan="2"
+                Text="{Binding CardDescription, FallbackValue='Card description text.'}"
+                VerticalTextAlignment="Start"
+                VerticalOptions="Fill"
+                HorizontalOptions="Fill" />
+        </Grid>
+    </Frame>
+</ContentView>
diff --git a/src/Controls/samples/Controls.Sample/Controls/CardView/CardView.xaml.cs b/src/Controls/samples/Controls.Sample/Controls/CardView/CardView.xaml.cs
@@ -0,0 +1,69 @@
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Graphics;
+
+namespace Maui.Controls.Sample.Controls
+{
+	public partial class CardView : ContentView
+	{
+		public static readonly BindableProperty CardTitleProperty =
+			BindableProperty.Create(nameof(CardTitle), typeof(string), typeof(CardView), string.Empty);
+
+		public static readonly BindableProperty CardDescriptionProperty =
+			BindableProperty.Create(nameof(CardDescription), typeof(string), typeof(CardView), string.Empty);
+
+		public static readonly BindableProperty BorderColorProperty =
+			BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(CardView), Colors.DarkGray);
+
+		public static readonly BindableProperty CardColorProperty =
+			BindableProperty.Create(nameof(CardColor), typeof(Color), typeof(CardView), Colors.White);
+
+		public static readonly BindableProperty IconImageSourceProperty =
+			BindableProperty.Create(nameof(IconImageSource), typeof(ImageSource), typeof(CardView), default(ImageSource));
+
+		public static readonly BindableProperty IconBackgroundColorProperty =
+			BindableProperty.Create(nameof(IconBackgroundColor), typeof(Color), typeof(CardView), Colors.LightGray);
+
+		public string CardTitle
+		{
+			get => (string)GetValue(CardTitleProperty);
+			set => SetValue(CardTitleProperty, value);
+		}
+
+		public string CardDescription
+		{
+			get => (string)GetValue(CardDescriptionProperty);
+			set => SetValue(CardDescriptionProperty, value);
+		}
+
+		public Color BorderColor
+		{
+			get => (Color)GetValue(BorderColorProperty);
+			set => SetValue(BorderColorProperty, value);
+		}
+
+		public Color CardColor
+		{
+			get => (Color)GetValue(CardColorProperty);
+			set => SetValue(CardColorProperty, value);
+		}
+
+		public ImageSource IconImageSource
+		{
+			get => (ImageSource)GetValue(IconImageSourceProperty);
+			set => SetValue(IconImageSourceProperty, value);
+		}
+
+		public Color IconBackgroundColor
+		{
+			get => (Color)GetValue(IconBackgroundColorProperty);
+			set => SetValue(IconBackgroundColorProperty, value);
+		}
+
+		public CardView()
+		{
+			InitializeComponent();
+
+			Card.BindingContext = this;
+		}
+	}
+}
diff --git a/src/Controls/samples/Controls.Sample/Pages/Layouts/ContentViewPage.xaml b/src/Controls/samples/Controls.Sample/Pages/Layouts/ContentViewPage.xaml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<views:BasePage
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    x:Class="Maui.Controls.Sample.Pages.ContentViewPage"
+    xmlns:controls="clr-namespace:Maui.Controls.Sample.Controls"
+    xmlns:views="clr-namespace:Maui.Controls.Sample.Pages.Base"
+    Title="ContentView">
+    <views:BasePage.Content>
+        <ScrollView>
+            <StackLayout
+                Padding="12">
+                <controls:CardView 
+                    BorderColor="DarkGray"
+                    CardTitle="Slavko Vlasic"
+                    CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
+                    IconBackgroundColor="SlateGray"
+                    IconImageSource="dotnet_bot.png"/>
+                <controls:CardView
+                    BorderColor="DarkGray"
+                    CardTitle="Carolina Pena"
+                    CardDescription="Phasellus eu convallis mi. In tempus augue eu dignissim fermentum. Morbi ut lacus vitae eros lacinia."
+                    IconBackgroundColor="SlateGray"
+                    IconImageSource="dotnet_bot.png" />
+                <controls:CardView
+                    BorderColor="DarkGray"
+                    CardTitle="Wade Blanks"
+                    CardDescription="Aliquam sagittis, odio lacinia fermentum dictum, mi erat scelerisque erat, quis aliquet arcu."
+                    IconBackgroundColor="SlateGray"
+                    IconImageSource="dotnet_bot.png" />
+                <controls:CardView
+                    BorderColor="DarkGray"
+                    CardTitle="Colette Quint"
+                    CardDescription="In pellentesque odio eget augue elementum lobortis. Sed augue massa, rhoncus eu nisi vitae, egestas."
+                    IconBackgroundColor="SlateGray"
+                    IconImageSource="dotnet_bot.png" />
+            </StackLayout>
+        </ScrollView>
+    </views:BasePage.Content>
+</views:BasePage>
diff --git a/src/Controls/samples/Controls.Sample/Pages/Layouts/ContentViewPage.xaml.cs b/src/Controls/samples/Controls.Sample/Pages/Layouts/ContentViewPage.xaml.cs
@@ -0,0 +1,10 @@
+namespace Maui.Controls.Sample.Pages
+{
+	public partial class ContentViewPage
+	{
+		public ContentViewPage()
+		{
+			InitializeComponent();
+		}
+	}
+}
diff --git a/src/Controls/samples/Controls.Sample/Pages/Layouts/TemplatedViewPage.xaml b/src/Controls/samples/Controls.Sample/Pages/Layouts/TemplatedViewPage.xaml
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<views:BasePage
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    x:Class="Maui.Controls.Sample.Pages.TemplatedViewPage"
+    xmlns:controls="clr-namespace:Maui.Controls.Sample.Controls"
+    xmlns:views="clr-namespace:Maui.Controls.Sample.Pages.Base"
+    Title="TemplatedView">
+    <views:BasePage.Resources>
+        <ResourceDictionary>
+
+            <ControlTemplate x:Key="CardViewCompressed">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="100" />
+                    </Grid.RowDefinitions>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="100" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+                    <Image 
+                        Source="{TemplateBinding IconImageSource}"
+                        BackgroundColor="{TemplateBinding IconBackgroundColor}"
+                        WidthRequest="100"
+                        HeightRequest="100"
+                        Aspect="AspectFill"
+                        HorizontalOptions="Center"
+                        VerticalOptions="Center" />
+                    <StackLayout Grid.Column="1">
+                        <Label 
+                            Text="{TemplateBinding CardTitle}"
+                            FontAttributes="Bold" />
+                        <Label 
+                            Text="{TemplateBinding CardDescription}" />
+                    </StackLayout>
+                </Grid>
+            </ControlTemplate>
+
+        </ResourceDictionary>
+    </views:BasePage.Resources>
+    <views:BasePage.Content>
+        <StackLayout
+            Padding="12">
+            <Label 
+                Text="A standard CardView control is suitable for grid layouts:"
+                FontAttributes="Italic"
+                TextColor="Red"
+                Margin="0,0,0,10" />
+            <controls:CardView 
+                BorderColor="DarkGray"
+                CardTitle="Slavko Vlasic"
+                CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
+                IconBackgroundColor="SlateGray"
+                IconImageSource="dotnet_bot.png" />
+            <Label 
+                Text="A ControlTemplate overrides the standard view, creating a more compact view suitable for lists:"
+                FontAttributes="Italic"
+                TextColor="Red"
+                Margin="0,0,0,10" />
+            <controls:CardView 
+                BorderColor="DarkGray"
+                CardTitle="Carolina Pena"
+                CardDescription="Phasellus eu convallis mi. In tempus augue eu dignissim fermentum. Morbi ut lacus vitae eros lacinia."
+                IconBackgroundColor="SlateGray"
+                IconImageSource="dotnet_bot.png"
+                ControlTemplate="{StaticResource CardViewCompressed}" />
+            <controls:CardView 
+                BorderColor="DarkGray"
+                CardTitle="Wade Blanks"
+                CardDescription="Aliquam sagittis, odio lacinia fermentum dictum, mi erat scelerisque erat, quis aliquet arcu."
+                IconBackgroundColor="SlateGray"
+                IconImageSource="dotnet_bot.png"
+                ControlTemplate="{StaticResource CardViewCompressed}" />
+            <controls:CardView 
+                BorderColor="DarkGray"
+                CardTitle="Colette Quint"
+                CardDescription="In pellentesque odio eget augue elementum lobortis. Sed augue massa, rhoncus eu nisi vitae, egestas."
+                IconBackgroundColor="SlateGray"
+                IconImageSource="dotnet_bot.png"
+                ControlTemplate="{StaticResource CardViewCompressed}" />
+        </StackLayout>
+    </views:BasePage.Content>
+</views:BasePage>
diff --git a/src/Controls/samples/Controls.Sample/Pages/Layouts/TemplatedViewPage.xaml.cs b/src/Controls/samples/Controls.Sample/Pages/Layouts/TemplatedViewPage.xaml.cs
@@ -0,0 +1,10 @@
+namespace Maui.Controls.Sample.Pages
+{
+	public partial class TemplatedViewPage
+	{
+		public TemplatedViewPage()
+		{
+			InitializeComponent();
+		}
+	}
+}
diff --git a/src/Controls/samples/Controls.Sample/ViewModels/LayoutsViewModel.cs b/src/Controls/samples/Controls.Sample/ViewModels/LayoutsViewModel.cs
@@ -12,6 +12,9 @@ protected override IEnumerable<SectionModel> CreateItems() => new[]
 			new SectionModel(typeof(AbsoluteLayoutPage), "AbsoluteLayout",
 				"An AbsoluteLayout is used to position and size children using explicit values. The position is specified by the upper-left corner of the child relative to the upper-left corner of the AbsoluteLayout, in device-independent units."),
 
+			new SectionModel(typeof(ContentViewPage), "ContentView",
+				"ContentView contains a single child that is set with the Content property. The Content property can be set to any View derivative, including other Layout derivatives. ContentView is mostly used as a structural element."),
+
 			new SectionModel(typeof(FlexLayoutPage), "FlexLayout",
 				"FlexLayout is also capable of wrapping its children if there are too many to fit in a single row or column, and also has many options for orientation, alignment, and adapting to various screen sizes."),
 
@@ -27,6 +30,9 @@ protected override IEnumerable<SectionModel> CreateItems() => new[]
 			new SectionModel(typeof(StackLayoutPage), "StackLayout",
 				"A StackLayout organizes child views in a one-dimensional horizontal or vertical stack."),
 
+			new SectionModel(typeof(TemplatedViewPage), "TemplatedView",
+				"TemplatedView displays content with a control template, and is the base class for ContentView."),
+
 			new SectionModel(typeof(HorizontalStackLayoutPage), "HorizontalStackLayout",
 				"A HorizontalStackLayout organizes child views in a one-dimensional horizontal stack."),