将鼠标悬停在 UWP 位图图标上时,它会在暗模式和亮模式之间切换

UWP Bitmap-Icon is changing between Dark and Light Mode when hovering over it

只要将鼠标悬停在图标上,它就会从浅色模式变为深色模式。它从应该处于亮模式开始,但每当我用鼠标移动时它就会变成暗模式 这是我的图标的代码

<Page
x:Class="ticketer.Views.ContentGridPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:models1="using:ticketer.Core"
Style="{StaticResource PageStyle}"
mc:Ignorable="d">

<Grid x:Name="ContentArea"> 
    <controls:AdaptiveGridView
        Padding="{StaticResource MediumLeftRightMargin}"
        animations:Connected.ListItemElementName="itemThumbnail"
        animations:Connected.ListItemKey="animationKeyContentGrid"
        DesiredWidth="180"
        SelectionMode = "None"
        IsItemClickEnabled = "True"
        ItemClick="OnItemClick"
        ItemHeight="160"
        ItemsSource="{x:Bind Source,Mode=OneWay}"
        StretchContentForSingleRow="False"
        >
        <controls:AdaptiveGridView.ItemTemplate>
            <DataTemplate x:DataType="models1:ticketData">
                <Grid 
                    x:Name="itemThumbnail"
                    Padding="{StaticResource XSmallLeftTopRightBottomMargin}"
                    Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}" Visibility="Visible">
                    <Border BorderThickness="2" BorderBrush="White">

                        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

                            <BitmapIcon Height="30px"
                                    UriSource="Assets/ticket2.png"></BitmapIcon>
                            <TextBlock
                            Margin="{StaticResource XXSmallTopMargin}"
                            HorizontalAlignment="Center"
                            Style="{ThemeResource BodyTextStyle}"
                            Text="{x:Bind TITLE}" />
                        </StackPanel>
                    </Border>
                </Grid>
            </DataTemplate>
        </controls:AdaptiveGridView.ItemTemplate>
    </controls:AdaptiveGridView>
</Grid>

UWP Bitmap-Icon is changing between Dark and Light Mode when hovering over it

请检查 AdaptiveGridView source code,它是从 GridView 继承的,因此每个项目将呈现为 GridViewItem。如果我们覆盖了默认的 GridViewItemForegroundPointerOver 资源,它将在光标指向上方时更改默认行为。请将 GridViewItemForegroundPointerOver 添加到您的 Application.Resources 中,如下所示。

<SolidColorBrush x:Key="GridViewItemForegroundPointerOver" Color="Black" />

我能够重现此问题,只是针对 MenuFlyoutItem 控件图标(按钮等不受影响)。重现:

  1. 将 UWP 页面的 RequestedTheme 设置为“深色”
  2. 将 Windows 主题设置为浅色(在 OS 的设置中)
  3. 拥有带有您自己的白色位图图标的 MenuFlyoutItem
  4. 将鼠标悬停在弹出菜单项上,当光标离开时,图标变为黑色

以下,不完美,但仍然是重置图标后的解决方案。首先注册受影响图标的 PointerExited 事件,在我的例子中:

menuFlyoutItem.PointerExited += menuFlyoutItem_PointerExited;

然后添加以下方法(您需要稍微更改它以符合您的情况)

    private void menuFlyoutItem_PointerExited(object sender, PointerRoutedEventArgs e)
    {
            var DefaultTheme = new Windows.UI.ViewManagement.UISettings();
            var uiTheme = DefaultTheme.GetColorValue(Windows.UI.ViewManagement.UIColorType.Background).ToString();

            if (uiTheme == "#FFFFFFFF")
            {

                string url = "ms-appx:///Assets/youricon.png";
                BitmapIcon x = new BitmapIcon();
                x.UriSource = new Uri(url);

                menuFlyoutItem.Icon = x;
            }

    }

这会在问题发生后立即将图标图像重置为默认值。这并不完美,因为您会看到图像由于代码而闪烁一次,但至少它会保持要求的颜色。

根据我的看法,这是 UWP/MenuFlyoutItem 或其图标中的错误,因为这些控件(之一)如果与系统主题不同,则根本不尊重应用程序的主题。