ChildWindow - A Grid as a panel

[marcosgerene]

Hi folks,

I am creating a control where I will show a UserControl as a Dialog inside a window. The idea is pretty similar to SimpleChildWindow (https://github.com/punker76/MahApps.Metro.SimpleChildWindow).

This is what I have till now:

PantherChildWindow

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
			xmlns:materialIcons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
			 
	xmlns:local="clr-namespace:Scantimburgo.Calculos;assembly=Scantimburgo.Calculos"
			 
             x:Class="Scantimburgo.Calculos.PantherChildWindow">
	<Grid Background="{DynamicResource ChildWindowBackground}" Opacity="0.4">
		<Grid DragDrop.AllowDrop="True"
			HorizontalAlignment="Center"
			  VerticalAlignment="Center"
			  Opacity="10" >

			<Border x:Name="BorderChildGrid" BorderThickness="5,5" CornerRadius="5,5"  
					BorderBrush="{DynamicResource SystemAccentColor}">
				<Grid x:Name="ChildGrid"
					RowDefinitions="Auto,*"
					Width="400" Height="300"
					Background="{DynamicResource SystemRegionColor}" >

					<Grid x:Name="GridTitle" ColumnDefinitions="*, Auto" Background="{DynamicResource DataGridHeaderColor}">
						<TextBlock x:Name="TextBlockTitle" HorizontalAlignment="Center" VerticalAlignment="Center"
							Text="Titulo do ChildWindow" Classes="Padrao" />

						<Button Grid.Column="1" Classes="BotaoReduzido" Height="20" Width="20" Margin="0,0,5,0"
								Background="Transparent" Tapped="CloseWindow">
							<materialIcons:MaterialIcon Kind="Close" Foreground="DarkRed" Width="15" Height="15" />
						</Button>
					</Grid>

					<Grid x:Name="GridContent">
						
					</Grid>					
				</Grid>
			</Border>

		</Grid>
	</Grid>
</UserControl>


public partial class PantherChildWindow : UserControl
{
#if DEBUG
    public PantherChildWindow()
#else
    private PantherChildWindow()
#endif
    {
        InitializeComponent();
        DetachOnClose = false;
    }

    public event EventHandler<EventArgs>? ChildWindowClosed;

    public bool DetachOnClose { get; set; }

    public Control? ChildWindowContent
    {
        get
        {
            return GridContent.Children.FirstOrDefault();
        }
        set
        {
            GridContent.Children.Clear();
            if (value != null)
                GridContent.Children.Add(value);
        }
    }

    public void CloseWindow(object sender, TappedEventArgs e)
    {
        this.IsVisible = false;
        if (DetachOnClose)
        {
            if (this.Parent is Panel _parent)
                _parent.Children.Remove(this);
        }
        ChildWindowClosed?.Invoke(this, e);
    }

    public static PantherChildWindow NewInstance(Panel mainpanel, Control content, string title, bool detachonclose = true)
    {
        var child = new PantherChildWindow();
        child.TextBlockTitle.Text = title;
        child.ChildWindowContent = content;
        child.DetachOnClose = detachonclose;

        mainpanel.Children.Add(child);
        child.SetValue(Grid.RowProperty, 0);
        child.SetValue(Grid.RowSpanProperty, 99);
        child.SetValue(Grid.ColumnProperty, 0);
        child.SetValue(Grid.ColumnSpanProperty, 99);
        
        child.ChildWindowClosed += (s, e) =>
        {
            foreach (var pn in mainpanel.Children)
            {
                pn.IsEnabled = true;
            }
        };

        foreach (var pn in mainpanel.Children)
        {
            if (pn != child)
                pn.IsEnabled = false;
        }

        return child;
    }
}

Button "Adicionar" calling the ChildWindow:

 public void AdicionarHandler(object sender, TappedEventArgs e)
 {
     if (this.Content is Panel mainpanel)
     {
         var view = new PedidoComponenteView();
         var child = PantherChildWindow.NewInstance(mainpanel, view, "Item bla bla bla", true);
         child.ChildWindowClosed += (s, e) =>
         {
             Console.WriteLine($"{view.Tag}");                
         };
     }
 }

I am looking here for advices, best practices and ideas how could I do this better? Even dragging the inside Grid would be interesting.

[timunie]

check what other libs do by exploring https://github.com/AvaloniaCommunity/awesome-avalonia

For example, FluentAvalonia has a ContentDialog and TaskDialog which are interesting. Dragging can maybe be achieved by Avalonia.Behaviors

[workgroupengineering]

There is ContentDialog in Labs.

[marcosgerene]

@workgroupengineering @timunie

I will take a look at awesome controls, thanks.

Just for context:
I am using Avalonia to build some small applications before I change my main application from WPF to Avalonia. Looking for everything I did till now it's just missing SimpleChildWindow (mentioned above) and Flyouts (https://mahapps.com/docs/controls/flyouts) 'cause flyout in Avalonia is another kind of component.

---

Edit:
I found Expander as a solution for Flyout.

[tomlm]

Check out https://github.com/tomlm/iciclecreek.Avalonia.WindowManager/

[rabbitism]

Ursa's overlay dialog is designed to be like this.