Modal trong WPF

Bài viết lần này chúng ta sẽ tạo ra Modal trong WPF. Các bạn lập trình Web chắc cũng biết Modal là cái gì đúng không, mình thấy cái đó khá hay mà lập trình ứng dụng desktop lại chỉ có: MessageBox, Dialog,... (trông khá tù).

Mình sẽ tạo ra ModalUserControl.xaml trong UserControl này mình sẽ tạo ra một Template như sau:

<UserControl x:Class="ModalWPF.ModalUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:ModalWPF"
             mc:Ignorable="d" >
    <UserControl.ContentTemplate>
        <DataTemplate>
            <Grid>
                <Grid Background="Black" Opacity="0.5"></Grid>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="2*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="3*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Row="1" Grid.Column="1" Background="White">
                        <Grid.Effect>
                            <DropShadowEffect ShadowDepth="0" Opacity="0.2" />
                        </Grid.Effect>
                        <ContentPresenter Content="{TemplateBinding Content}"></ContentPresenter>
                    </Grid>
                </Grid>
            </Grid>
        </DataTemplate>
    </UserControl.ContentTemplate>
</UserControl>

ModalUserControl.xaml.cs

    public partial class ModalUserControl : UserControl
    {
        public ModalUserControl()
        {
            Visibility = Visibility.Hidden;
            InitializeComponent();
        }

        public void Show(object content = null)
        {
            Visibility = Visibility.Visible;
            if (content != null)
                AddChild(content);
        }

        public void Hide()
        {
            Visibility = Visibility.Collapsed;
        }
    }

Template design sẽ được như thế này: 

Đến đây ta có thể gọi UserControlModal trong MainWindow.xaml được rồi:

MainWindow.xaml

<Window x:Class="ModalWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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"
        xmlns:local="clr-namespace:ModalWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="450">
    <Grid>
        <Button VerticalAlignment="Top" Height="50" Margin="10" Background="GreenYellow" Click="Button_Click">Show Modal</Button>
        <local:ModalUserControl x:Name="Modal">
            <Grid>
                <Label HorizontalAlignment="Center" VerticalAlignment="Top">My Modal</Label>
                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Content Modal........................</TextBlock>
                <Button Background="GreenYellow" Margin="10" HorizontalAlignment="Right" VerticalAlignment="Bottom" Click="HideModal_Click">Hide Modal</Button>
            </Grid>
        </local:ModalUserControl>
    </Grid>
</Window>

MainWindow.xaml.cs

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Modal.Show();
        }

        private void HideModal_Click(object sender, RoutedEventArgs e)
        {
            Modal.Hide();
        }
    }

Như vậy là chúng ta đã tạo ra được Modal cơ bản cho WPF rồi, các bạn có thể thêm custom cho phù hợp với từng ứng dụng của mình nhé: