📝 custom view and events

ch03_DataBinding/ex_CustomContentView/MainPage.xaml

@@ -11,17 +11,28 @@
             ImageName="{Binding Artist1.Picture}"
             Title="{Binding Artist1.Name}"
             SubTitle="{Binding Artist1.Instrument}"
-            Color="{Binding MainColor}" />
+            Color="{Binding MainColor}" 
+            InfoClicked="OnInfoClicked"
+            NextClicked="OnNextClicked"
+            Tapped="OnTapped"
+            NextCommand="{Binding MyNextCommand}"
+            NextCommandParameter="D.Joussein"/>
         <local:MyAvatarView 
             ImageName="{Binding Artist2.Picture}"
             Title="{Binding Artist2.Name}"
             SubTitle="{Binding Artist2.Instrument}"
-            Color="{Binding MainColor}" />
+            Color="{Binding MainColor}" 
+            InfoClicked="OnInfoClicked"
+            NextClicked="OnNextClicked"
+            Tapped="OnTapped"/>
         <local:MyAvatarView 
             ImageName="{Binding Artist3.Picture}"
             Title="{Binding Artist3.Name}"
             SubTitle="{Binding Artist3.Instrument}"
-            Color="{Binding MainColor}" />
+            Color="{Binding MainColor}" 
+            InfoClicked="OnInfoClicked"
+            NextClicked="OnNextClicked"
+            Tapped="OnTapped"/>
         <Image Source="nout_live_album.png" WidthRequest="100"/>
     </VerticalStackLayout>
 </ContentPage>

ch03_DataBinding/ex_CustomContentView/MainPage.xaml.cs

@@ -1,14 +1,17 @@
-namespace ex_CustomContentView;
+using System.Windows.Input;
+
+namespace ex_CustomContentView;
 
 public partial class MainPage : ContentPage
 {
 	public MainPage()
 	{
 		InitializeComponent();
+		InitCommands();
 		BindingContext = this;
 	}
 
-	public Artist Artist1 { get; set; } 
+    public Artist Artist1 { get; set; } 
 		= new Artist 
 		{ 
 			Name = "Delphine Joussein",
@@ -33,5 +36,34 @@ public partial class MainPage : ContentPage
 		}; 
 
 	public Color MainColor { get; set; } = Colors.DarkSalmon;
+
+	void OnNextClicked(object sender, EventArgs e)
+	{
+		DisplayAlert("Next", $"You have clicked on Next of an {sender.GetType().Name}", "Ok");
+	}
+
+	void OnInfoClicked(object sender, EventArgs e)
+	{
+		DisplayAlert("Info", $"You have clicked on Information of a {sender.GetType().Name}, whose Title is {(sender as MyAvatarView)?.Title}", "Ok");
+	}
+
+	int colorIndex=0;
+	Color[] colors = { Colors.DarkKhaki, Colors.DarkGoldenrod, Colors.DarkOliveGreen, Colors.DarkOrchid, Colors.DarkSeaGreen, Colors.DarkTurquoise, Colors.DarkViolet, Colors.DarkSalmon };
+	private void OnTapped(object sender, TappedEventArgs e)
+	{
+		if(sender is not MyAvatarView) return;
+		(sender as MyAvatarView)!.Color = colors[colorIndex];
+		colorIndex++;
+		colorIndex %= colors.Length;
+	}
+
+	public ICommand MyNextCommand { get; set; }
+
+	private void InitCommands()
+    {
+        MyNextCommand = new Command<object>(
+			str => DisplayAlert("Next2", $"This view is related to {str}", "Ok")
+		);
+    }
 }
 

ch03_DataBinding/ex_CustomContentView/MauiProgram.cs

@@ -1,4 +1,5 @@
-using Microsoft.Extensions.Logging;
+using CommunityToolkit.Maui;
+using Microsoft.Extensions.Logging;
 
 namespace ex_CustomContentView;
 
@@ -9,6 +10,7 @@ public static class MauiProgram
 		var builder = MauiApp.CreateBuilder();
 		builder
 			.UseMauiApp<App>()
+			.UseMauiCommunityToolkit()
 			.ConfigureFonts(fonts =>
 			{
 				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");

ch03_DataBinding/ex_CustomContentView/MyAvatarView.xaml

@@ -2,17 +2,20 @@
 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="ex_CustomContentView.MyAvatarView"
+             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
              x:Name="root">
     <Grid Margin="0,0,0,4" 
           BindingContext="{x:Reference root}">
+        <Grid.GestureRecognizers>
+            <TapGestureRecognizer Tapped="OnTapped"/>
+        </Grid.GestureRecognizers>
         <Border Stroke="{Binding Color}" StrokeThickness="4"
-                Margin="0, 4" Padding="8,4"
+                Margin="0, 2" Padding="8,4">
-                BackgroundColor="GhostWhite">
             <Border.StrokeShape>
                 <RoundRectangle CornerRadius="30, 30, 30, 0"/>
             </Border.StrokeShape>
-            <Grid ColumnDefinitions="Auto, *" RowDefinitions="2*, *, *"
+            <Grid ColumnDefinitions="Auto, *, Auto, Auto" RowDefinitions="2*, *"
-                    ColumnSpacing="15">
+                    ColumnSpacing="10" MinimumHeightRequest="74">
                 <Frame Grid.RowSpan="2" 
                         WidthRequest="60" HeightRequest="60"
                         Padding="0" CornerRadius="30" Margin="0"
@@ -24,9 +27,31 @@
                     </Frame.Shadow>
                     <Image Source="{Binding ImageName}"/>
                 </Frame>
-                <Label Text="{Binding Title}" Grid.Column="1" FontSize="Medium"/>
+                <Label Text="{Binding Title}" Grid.Column="1" FontSize="Medium"
+                       VerticalOptions="Center"/>
                 <Label Text="{Binding SubTitle}"
                         Grid.Column="1" Grid.Row="1" FontSize="Small"/>
+                <ImageButton Source="info_circle.png" 
+                             WidthRequest="28" MinimumWidthRequest="20"
+                             HeightRequest="28" MinimumHeightRequest="20"
+                             Grid.Column="2" Grid.RowSpan="2"
+                             Clicked="OnInfoClicked">
+                    <ImageButton.Behaviors>
+                        <toolkit:IconTintColorBehavior 
+                            TintColor="{AppThemeBinding Light=Black, Dark=White}"/>
+                    </ImageButton.Behaviors>
+                </ImageButton>
+                <ImageButton Source="chevron_right_circle.png" x:Name="nextButton"
+                             WidthRequest="28" MinimumWidthRequest="20"
+                             HeightRequest="28" MinimumHeightRequest="20"
+                             Grid.Column="3" Grid.RowSpan="2"
+                             Command="{Binding NextCommand}"
+                             CommandParameter="{Binding NextCommandParameter}">
+                    <ImageButton.Behaviors>
+                        <toolkit:IconTintColorBehavior 
+                            TintColor="{AppThemeBinding Light=Black, Dark=White}"/>
+                    </ImageButton.Behaviors>
+                </ImageButton>
             </Grid>
         </Border>
     </Grid>

ch03_DataBinding/ex_CustomContentView/MyAvatarView.xaml.cs

@@ -1,3 +1,5 @@
+using System.Windows.Input;
+
 namespace ex_CustomContentView;
 
 public partial class MyAvatarView : ContentView
@@ -42,4 +44,42 @@ public partial class MyAvatarView : ContentView
 		get => (Color)GetValue(ColorProperty);
 		set => SetValue(ColorProperty, value);
 	}
+
+	public event EventHandler NextClicked
+	{
+		add => nextButton.Clicked += value;
+		remove => nextButton.Clicked -= value;
+	}	
+
+	public event EventHandler InfoClicked;
+
+	void OnInfoClicked(object sender, EventArgs args)
+	{
+		InfoClicked?.Invoke(this, args);
+	}
+
+	public event EventHandler<TappedEventArgs> Tapped;
+
+	private void OnTapped(object sender, TappedEventArgs e)
+	{
+		Tapped?.Invoke(this, e);
+	}
+
+	public static readonly BindableProperty NextCommandProperty =
+		BindableProperty.Create("NextCommand", typeof(ICommand), typeof(MyAvatarView), null);
+	
+	public ICommand NextCommand
+	{
+		get => (ICommand)GetValue(NextCommandProperty);
+		set => SetValue(NextCommandProperty, value);
+	}
+
+	public static readonly BindableProperty NextCommandParameterProperty =
+		BindableProperty.Create("NextCommandParameter", typeof(object), typeof(MyAvatarView), null);
+	
+	public object NextCommandParameter
+	{
+		get => GetValue(NextCommandParameterProperty);
+		set => SetValue(NextCommandParameterProperty, value);
+	}
 }

ch03_DataBinding/ex_CustomContentView/ex_CustomContentView.csproj

@@ -16,6 +16,7 @@
 		<OutputType>Exe</OutputType>
 		<RootNamespace>ex_CustomContentView</RootNamespace>
 		<UseMaui>true</UseMaui>
+		<MauiVersion>8.0.14</MauiVersion>
 		<SingleProject>true</SingleProject>
 		<ImplicitUsings>enable</ImplicitUsings>
 		<Nullable>enable</Nullable>
@@ -57,6 +58,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
+		<PackageReference Include="communitytoolkit.maui" Version="8.0.1" />
 		<PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
 		<PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
 		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />