How to blocked/Inactivate Uwp app title bar due to show ContentDialog?

Question

I need to blocked/Inactivate whole Uwp app with title bar due to show ContentDialog. I have used the code from Microsoft XAML Controls Gallery App, Whereas Control-Gallery app properly blocked the whole application but my test app is not blocking the app.

This is another screen shoot after adding winui:XamlControlsResources ControlsResourcesVersion="Version2" in Resource dictionary. Which can also be achieved by overriding SystemControlPageBackgroundMediumAltMediumBrush.

<SolidColorBrush x:Key="SystemControlPageBackgroundMediumAltMediumBrush" Color="#000000" Opacity="0.18"/>

Or

<Application
x:Class="App2.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:winui="using:Microsoft.UI.Xaml.Controls">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <winui:XamlControlsResources ControlsResourcesVersion="Version2" />
        </ResourceDictionary.MergedDictionaries>            
    </ResourceDictionary>
</Application.Resources>

Here is the used sample code:

<Page
x:Class="App2.ContentDialogContent"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <!--  Content body  -->
    <TextBlock Text="Lorem ipsum dolor sit amet, adipisicing elit." TextWrapping="Wrap" />
    <CheckBox Content="Upload your content to the cloud." />
</StackPanel>
</Page>

Button click:

    private async void button_Click(object sender, RoutedEventArgs e)
    {
        ContentDialog dialog = new ContentDialog();
        dialog.Title = "Save your work?";
        dialog.PrimaryButtonText = "Save";
        dialog.SecondaryButtonText = "Don't Save";
        dialog.CloseButtonText = "Cancel";
        dialog.DefaultButton = ContentDialogButton.Primary;
        dialog.Content = new ContentDialogContent();

        var result = await dialog.ShowAsync();

        if (result == ContentDialogResult.Primary)
        {
            //DialogResult.Text = "User saved their work";
        }
        else if (result == ContentDialogResult.Secondary)
        {
            //DialogResult.Text = "User did not save their work";
        }
        else
        {
            //DialogResult.Text = "User cancelled the dialog";
        }
      }

I have used ExtendViewIntoTitleBar, but the problem remains with title bar's system button area.

Do you also set https://learn.microsoft.com/en-us/uwp/api/windows.applicationmodel.core.coreapplicationviewtitlebar.extendviewintotitlebar?view=winrt-22000 to `true` as the [Gallery App does](https://github.com/microsoft/Xaml-Controls-Gallery/blob/e97be1ead343cc6d9b6646a056431bdffe7c75d8/XamlControlsGallery/App.xaml.cs#L113)? — Sir Rufo, Mar 28 '22 at 01:14
please try to set ApplicationViewTitleBar button background color as transparent like following. — Nico Zhu, Mar 29 '22 at 15:12

Nico Zhu · Accepted Answer · 2022-03-29T15:12:09.493

As Sir Rufo said, your expected view has been set ExtendViewIntoTitleBar as true that could extend your view content into title bar. and it could make whole current view content block by ContentDialog.

For using ExtendViewIntoTitleBar, please refer to Title bar customization.

var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;

Update

You need to set your title bar button background color as transparent.

ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Transparent;

How to blocked/Inactivate Uwp app title bar due to show ContentDialog?

1 Answers1