Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Alert not rendering in dark theme if XamlRoot or window is dark #8777

Merged
merged 2 commits into from Oct 8, 2021
Merged

Fix Alert not rendering in dark theme if XamlRoot or window is dark #8777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e590b2b
Fix XAML bug with alerts inside a dark themed parent
lyahdav Jul 19, 2021
00ce876
Change files
lyahdav Oct 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-b59fd8be-3390-42f3-b269-8fce04ab15ae.json
View file
Open in desktop
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Fix XAML bug with alerts inside a dark themed parent",
"packageName": "react-native-windows",
"email": "lyahdav@users.noreply.github.com",
"dependentChangeType": "patch"
}
19 changes: 19 additions & 0 deletions vnext/Microsoft.ReactNative/Modules/AlertModule.cpp
View file
Open in desktop
Expand Up @@ -43,9 +43,12 @@ void Alert::ProcessPendingAlertRequests() noexcept {
dialog.DefaultButton(static_cast<xaml::Controls::ContentDialogButton>(defaultButton));
}

auto useXamlRootForThemeBugWorkaround = false;

if (Is19H1OrHigher()) {
// XamlRoot added in 19H1
if (const auto xamlRoot = React::XamlUIService::GetXamlRoot(m_context.Properties().Handle())) {
useXamlRootForThemeBugWorkaround = true;
dialog.XamlRoot(xamlRoot);
auto rootChangedToken = xamlRoot.Changed([=](auto &&, auto &&) {
const auto rootSize = xamlRoot.Size();
Expand All @@ -71,6 +74,22 @@ void Alert::ProcessPendingAlertRequests() noexcept {
}
}

// Workaround XAML bug with ContentDialog and dark theme:
// https://github.com/microsoft/microsoft-ui-xaml/issues/2331
dialog.Opened([useXamlRootForThemeBugWorkaround](winrt::IInspectable const &sender, auto &&) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this only repros in islands, right? if so, we should only do this dance if the app is an islands app, there are some helpers we use elsewhere for detecting this

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not only Islands. You can see the bug (and fix) in UWP in screenshots above.

auto contentDialog = sender.as<xaml::Controls::ContentDialog>();
auto popups = xaml::Media::VisualTreeHelper::GetOpenPopupsForXamlRoot(contentDialog.XamlRoot());

auto contentAsFrameworkElement = useXamlRootForThemeBugWorkaround
? contentDialog.XamlRoot().Content().try_as<xaml::FrameworkElement>()
: xaml::Window::Current().Content().try_as<xaml::FrameworkElement>();
if (contentAsFrameworkElement) {
for (uint32_t i = 0; i < popups.Size(); i++) {
popups.GetAt(i).RequestedTheme(contentAsFrameworkElement.ActualTheme());
}
}
});

auto asyncOp = dialog.ShowAsync();
asyncOp.Completed(
[jsDispatcher, result, this](
Expand Down