WINUI 模态框或模态窗口

WINUI中是没有类似Winform里的模态框的，为了实现同样的需求，小子借助于popup进行了相应的实现。

 

思路：自定义控件实现一个窗体，进行信息展示与信息选择；这个窗体作为弹出窗口的展示页面；

在页面上进行相应的选择进行什么样的操作，则通过通过委托在实例化这个窗口时传递相应的参数，选择后执行相应的委托即可。

 

 

<?xml version="1.0" encoding="utf-8"?>
<UserControl
    x:Class="Jedi.JV.WinUI.Controls.ModalDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Jedi.JV.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid  HorizontalAlignment="Center" VerticalAlignment="Center">
        <Border Background="#000" Opacity="0.2" Width="2560" Height="1440" />
        <Grid  Width="700" Height="400" Background="AliceBlue"  CornerRadius="12" Margin="530 0 930 150" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition  Height="70"/>
                    <RowDefinition  Height="*"/>
                    <RowDefinition  Height="100"/>
                </Grid.RowDefinitions>
                <Grid  Grid.Row="0" Background="#546EEF" >
                    <TextBlock   Text="{x:Bind Title,Mode=TwoWay}" HorizontalAlignment="Left"  Margin="10" Foreground="White"  FontSize="30"/>
                    <Button HorizontalAlignment="Right"  Width="44"
                       Height="44"
                       Margin="0,0,26,0"
                       Background="#768BF2" Click="BtnClose_Click">
                        <Button.Content>
                            <Image
                               Width="20"
                               Height="20"
                               Source="../../Images/关闭窗口@2x.png"
                               Stretch="Uniform"  />
                        </Button.Content>
                    </Button>
                </Grid>
                <StackPanel Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"  Orientation="Horizontal">
                    <Image
                      Grid.Column="1"
                      Width="74"
                      Height="66"
                      Source="../../Images/报错提示@2x.png"
                      Stretch="Uniform" />
                    <TextBlock  Margin="10" Text="{x:Bind Message,Mode=TwoWay}" FontSize="38" />
                </StackPanel>
                <StackPanel Grid.Row="2" Orientation="Horizontal"  HorizontalAlignment="Center">
                    <Button  Content="取消" x:Name="BtnCancel" Click="BtnClose_Click" Background="#546EEF" Width="90" Height="80" Foreground="White" FontSize="36" Margin="10"/>
                    <Button  Content="确认" x:Name="BtnComfirm" Click="BtnComfirm_Click" Background="#546EEF" Width="90" Height="80" Foreground="White" FontSize="36" Margin="10"/>
                </StackPanel>
            </Grid>

    </Grid>

</UserControl>

 

窗体的相应后台代码：

public sealed partial class ModalDialog : UserControl
{
    public ModalDialog()
    {
        this.InitializeComponent();
    }
    public Action<int> Action  { get; set; }
    public int id { get; set; }
    public string Message
    {
        get { return (string)GetValue(MessageProperty); }
        set { SetValue(MessageProperty, value); }
    }

    public static readonly DependencyProperty MessageProperty =
        DependencyProperty.Register("Message", typeof(string), typeof(ModalDialog), new PropertyMetadata(string.Empty));


    public string Title
    {
        get { return (string)GetValue(TitleProperty); }
        set { SetValue(TitleProperty, value); }
    }

    public static readonly DependencyProperty TitleProperty =
        DependencyProperty.Register("MeTitlessage", typeof(string), typeof(ModalDialog), new PropertyMetadata(string.Empty));


    public bool Result { get; private set; }
    private void BtnClose_Click(object sender, RoutedEventArgs e)
    {
        ModalDialogHost.Instance.CloseModal();
        Result = false;
     
    }

    private void BtnComfirm_Click(object sender, RoutedEventArgs e)
    {
        Result = true;
        ModalDialogHost.Instance.CloseModal();
        Task.Run(() =>
        {
            Action?.Invoke(id);
        });
        
    }

}

 

 

Popup逻辑：

internal class ModalDialogHost
{
    private ModalDialogHost()
    {
            
    }
    public static ModalDialogHost Instance
    {
        get
        {
            return Nested.instance;
        }
    }
    class Nested
    {
        static Nested() { }
        internal static readonly ModalDialogHost instance = new();
    }

    public Popup Popup { get; private set; }

    public void ShowModal(UIElement content, Window window)
    {
        if (Popup == null)
        {
            Popup = new Popup();
        }
        Popup.Child = content;

        if (window != null)
        {
            if (window.Content is Panel Conatiner)
            {
                if (Conatiner.Children.Contains(Popup))
                {
                    Popup.IsOpen = true;
                }
                else
                {
                    Conatiner.Children.Add(Popup);
                    Popup.IsOpen = true;
                }
            }
        }

    }

    public void CloseModal()
    {
        Popup.IsOpen = false;
    }
}