Improve debugger experience (#27017)

* add debugger display on controls

* more DebuggerDisplay

* add ", "

* Fix typo on SearchCommand

Co-authored-by: Gerald Versluis <[email protected]>

* fix typo in GetDebuggerDisplay

* remove wrong attribute

* fix typo in attribute

* code style

---------

Co-authored-by: Gerald Versluis <[email protected]>

Author: pictos

src/Controls/src/Core/ActivityIndicator/ActivityIndicator.cs

@@ -1,10 +1,12 @@
 #nullable disable
 using System;
+using System.Diagnostics;
 using Microsoft.Maui.Graphics;
 
 namespace Microsoft.Maui.Controls
 {
 	/// <include file="../../docs/Microsoft.Maui.Controls/ActivityIndicator.xml" path="Type[@FullName='Microsoft.Maui.Controls.ActivityIndicator']/Docs/*" />
+	[DebuggerDisplay("{GetDebuggerDisplay(), nq}")]
 	public partial class ActivityIndicator : View, IColorElement, IElementConfiguration<ActivityIndicator>, IActivityIndicator
 	{
 		/// <summary>Bindable property for <see cref="IsRunning"/>.</summary>
@@ -40,5 +42,10 @@ public IPlatformElementConfiguration<T, ActivityIndicator> On<T>() where T : ICo
 		{
 			return _platformConfigurationRegistry.Value.On<T>();
 		}
+
+		private protected override string GetDebuggerDisplay()
+		{
+			return $"IsRunning = {IsRunning}, {base.GetDebuggerDisplay()}";
+		}
 	}
 }

src/Controls/src/Core/Application/Application.cs

@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.ComponentModel;
+using System.Diagnostics;
 using System.Diagnostics.CodeAnalysis;
 using System.Threading;
 using System.Threading.Tasks;

src/Controls/src/Core/Button/Button.cs

@@ -13,6 +13,7 @@ namespace Microsoft.Maui.Controls
 	/// <summary>
 	/// A button <see cref="View" /> that reacts to touch events.
 	/// </summary>
+	[DebuggerDisplay("{GetDebuggerDisplay(), nq}")]
 	public partial class Button : View, IFontElement, ITextElement, IBorderElement, IButtonController, IElementConfiguration<Button>, IPaddingElement, IImageController, IViewController, IButtonElement, ICommandElement, IImageElement, IButton, ITextButton, IImageButton
 	{
 		const double DefaultSpacing = 10;
@@ -607,5 +608,10 @@ public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo c
 			public override object ConvertTo(ITypeDescriptorContext context, CultureInfo culture, object value, Type destinationType)
 				=> throw new NotSupportedException();
 		}
+
+		private protected override string GetDebuggerDisplay()
+		{
+			return $"Text = {Text}, Command = {Command}, {base.GetDebuggerDisplay()}";
+		}
 	}
 }

src/Controls/src/Core/CheckBox/CheckBox.cs

@@ -1,10 +1,12 @@
 #nullable disable
 using System;
+using System.Diagnostics;
 using Microsoft.Maui.Graphics;
 
 namespace Microsoft.Maui.Controls
 {
 	/// <include file="../../docs/Microsoft.Maui.Controls/CheckBox.xml" path="Type[@FullName='Microsoft.Maui.Controls.CheckBox']/Docs/*" />
+	[DebuggerDisplay("{GetDebuggerDisplay(), nq}")]
 	public partial class CheckBox : View, IElementConfiguration<CheckBox>, IBorderElement, IColorElement, ICheckBox
 	{
 		readonly Lazy<PlatformConfigurationRegistry<CheckBox>> _platformConfigurationRegistry;
@@ -79,5 +81,10 @@ bool ICheckBox.IsChecked
 			get => IsChecked;
 			set => SetValue(IsCheckedProperty, value, SetterSpecificity.FromHandler);
 		}
+
+		private protected override string GetDebuggerDisplay()
+		{
+			return $"IsChecked = {IsChecked}, {base.GetDebuggerDisplay()}";
+		}
 	}
 }

src/Controls/src/Core/ContentPage/ContentPage.cs

@@ -1,6 +1,7 @@
 #nullable disable
 
 using System;
+using System.Diagnostics;
 using Microsoft.Maui.Graphics;
 using Microsoft.Maui.HotReload;
 using Microsoft.Maui.Layouts;
@@ -9,6 +10,7 @@ namespace Microsoft.Maui.Controls
 {
 	/// <include file="../../docs/Microsoft.Maui.Controls/ContentPage.xml" path="Type[@FullName='Microsoft.Maui.Controls.ContentPage']/Docs/*" />
 	[ContentProperty("Content")]
+	[DebuggerDisplay("{GetDebuggerDisplay(), nq}")]
 	public partial class ContentPage : TemplatedPage, IContentView, HotReload.IHotReloadableView
 	{
 		/// <summary>Bindable property for <see cref="Content"/>.</summary>
@@ -147,5 +149,10 @@ Size IContentView.CrossPlatformMeasure(double widthConstraint, double heightCons
 		{
 			return (this as ICrossPlatformLayout).CrossPlatformMeasure(widthConstraint, heightConstraint);
 		}
+
+		private protected override string GetDebuggerDisplay()
+		{
+			return $"Content = {Content}, BindingContext = {BindingContext}";
+		}
 	}
 }

src/Controls/src/Core/ContentView/ContentView.cs

@@ -1,11 +1,13 @@
 #nullable disable
+using System.Diagnostics;
 using Microsoft.Maui.Graphics;
 using Microsoft.Maui.Layouts;
 
 namespace Microsoft.Maui.Controls
 {
 	/// <include file="../../docs/Microsoft.Maui.Controls/ContentView.xml" path="Type[@FullName='Microsoft.Maui.Controls.ContentView']/Docs/*" />
 	[ContentProperty("Content")]
+	[DebuggerDisplay("{GetDebuggerDisplay(), nq}")]
 	public partial class ContentView : TemplatedView, IContentView
 	{
 		/// <summary>Bindable property for <see cref="Content"/>.</summary>
@@ -46,5 +48,10 @@ internal override void SetChildInheritedBindingContext(Element child, object con
 		object IContentView.Content => Content;
 
 		IView IContentView.PresentedContent => ((this as IControlTemplated).TemplateRoot as IView) ?? Content;
+
+		private protected override string GetDebuggerDisplay()
+		{
+			return $"Content = {Content}, {base.GetDebuggerDisplay()}";
+		}
 	}
 }

src/Controls/src/Core/DatePicker/DatePicker.cs

@@ -1,11 +1,13 @@
 #nullable disable
 using System;
+using System.Diagnostics;
 using Microsoft.Maui.Controls.Internals;
 using Microsoft.Maui.Graphics;
 
 namespace Microsoft.Maui.Controls
 {
 	/// <include file="../../docs/Microsoft.Maui.Controls/DatePicker.xml" path="Type[@FullName='Microsoft.Maui.Controls.DatePicker']/Docs/*" />
+	[DebuggerDisplay("{GetDebuggerDisplay(), nq}")]
 	public partial class DatePicker : View, IFontElement, ITextElement, IElementConfiguration<DatePicker>, IDatePicker
 	{
 		/// <summary>Bindable property for <see cref="Format"/>.</summary>
@@ -239,5 +241,10 @@ string IDatePicker.Format
 			get => Format;
 			set => SetValue(FormatProperty, value, SetterSpecificity.FromHandler);
 		}
+
+		private protected override string GetDebuggerDisplay()
+		{
+			return $"Date = {Date}, {base.GetDebuggerDisplay()}";
+		}
 	}
 }

src/Controls/src/Core/FlyoutPage/FlyoutPage.cs

@@ -381,5 +381,9 @@ double IFlyoutView.FlyoutWidth
 #else
 		double IFlyoutView.FlyoutWidth => -1;
 #endif
+		private protected override string GetDebuggerDisplay()
+		{
+			return $"DetailPage = {Detail}, FlyoutPage = {Flyout}, BindingContext = {BindingContext}";
+		}
 	}
 }

src/Controls/src/Core/Image/Image.cs

@@ -1,10 +1,12 @@
 #nullable disable
 using System;
 using System.ComponentModel;
+using System.Diagnostics;
 
 namespace Microsoft.Maui.Controls
 {
 	/// <include file="../../docs/Microsoft.Maui.Controls/Image.xml" path="Type[@FullName='Microsoft.Maui.Controls.Image']/Docs/*" />
+	[DebuggerDisplay("{GetDebuggerDisplay(), nq}")]
 	public partial class Image : View, IImageController, IElementConfiguration<Image>, IViewController, IImageElement, IImage
 	{
 		/// <summary>Bindable property for <see cref="Source"/>.</summary>
@@ -103,5 +105,10 @@ void IImageElement.RaiseImageSourcePropertyChanged() =>
 
 		void IImageSourcePart.UpdateIsLoading(bool isLoading) =>
 			IsLoading = isLoading;
+
+		private protected override string GetDebuggerDisplay()
+		{
+			return $"Source = {Source}, {base.GetDebuggerDisplay()}";
+		}
 	}
 }

src/Controls/src/Core/IndicatorView/IndicatorView.cs

@@ -2,6 +2,7 @@
 using System;
 using System.Collections;
 using System.Collections.Specialized;
+using System.Diagnostics;
 using Microsoft.Maui.Controls.Internals;
 using Microsoft.Maui.Graphics;
 using Microsoft.Maui.Layouts;
@@ -10,6 +11,8 @@ namespace Microsoft.Maui.Controls
 {
 	/// <include file="../../docs/Microsoft.Maui.Controls/IndicatorView.xml" path="Type[@FullName='Microsoft.Maui.Controls.IndicatorView']/Docs/*" />
 	[ContentProperty(nameof(IndicatorLayout))]
+
+	[DebuggerDisplay("{GetDebuggerDisplay(), nq}")]
 	public partial class IndicatorView : TemplatedView, ITemplatedIndicatorView
 	{
 		const int DefaultPadding = 4;
@@ -193,5 +196,10 @@ int IIndicatorView.Position
 			get => Position;
 			set => SetValue(PositionProperty, value, SetterSpecificity.FromHandler);
 		}
+
+		private protected override string GetDebuggerDisplay()
+		{
+			return $"Position = {Position}, Count = {Count}, {base.GetDebuggerDisplay()}";
+		}
 	}
 }