Custom ContentDialog in WinUI 3

Question

In my program I have a TabControl with multiple tabs and in each tab there could be a dialog that the user may open at any time. I use the dialogs to allow the user to enter stuff into a database. I wish to replicate the look and functionality of the original ContentDialog but not be limited to only having 1 open at a time.

The idea would be something along the lines of a panel that floats over the rest of the tab control item(but not the whole app window) and denies interaction with anything in that tab control below it (but not the whole program) until closed.

The current limitations on ContentDialog's according to Microsoft:

"There can only be one ContentDialog open per thread at a time. Attempting to open two ContentDialogs will throw an exception, even if they are attempting to open in separate app windows."

https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.contentdialog?view=windows-app-sdk-1.4

What would be the best way to go about this?

Answer 1

One way to achieve what you are trying to do without the ContentDialog is to show a layer on top of your tab content and on top of that layer show what you wanted to show on the ContentDialog.

For example:

<TabView>
    <TabView.TabItems>
        <TabViewItem
            VerticalContentAlignment="Stretch"
            Header="Tab #1">
            <Grid>
                <Grid
                    x:Name="ContentPanel"
                    VerticalAlignment="Stretch">
                    <Button
                        Click="ShowMessageButton_Click"
                        Content="Show message" />
                </Grid>

                <StackPanel
                    x:Name="MessageBasePanel"
                    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                    Opacity="0.5"
                    Visibility="Collapsed" />
                <StackPanel
                    x:Name="MessagePanel"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Visibility="Collapsed">
                    <TextBlock Text="Some message." />
                    <Button
                        Click="CloseMessageButton_Click"
                        Content="Close" />
                </StackPanel>
            </Grid>

        </TabViewItem>
        <TabViewItem Header="PowerShell">
            <TabViewItem.IconSource>
                <BitmapIconSource
                    ShowAsMonochrome="False"
                    UriSource="/Assets/TabViewIcons/powershell.png" />
            </TabViewItem.IconSource>
        </TabViewItem>
        <TabViewItem Header="Windows Subsystem for Linux">
            <TabViewItem.IconSource>
                <BitmapIconSource
                    ShowAsMonochrome="False"
                    UriSource="/Assets/TabViewIcons/linux.png" />
            </TabViewItem.IconSource>
        </TabViewItem>
    </TabView.TabItems>
</TabView>

private void ShowMessageButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
    this.MessageBasePanel.Visibility = Visibility.Visible;
    this.MessagePanel.Visibility = Visibility.Visible;
}

private void CloseMessageButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
{
    this.MessageBasePanel.Visibility = Visibility.Collapsed;
    this.MessagePanel.Visibility = Visibility.Collapsed;
}