将鼠标悬停在 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 控件图标(按钮等不受影响)。重现:
- 将 UWP 页面的 RequestedTheme 设置为“深色”
- 将 Windows 主题设置为浅色(在 OS 的设置中)
- 拥有带有您自己的白色位图图标的 MenuFlyoutItem
- 将鼠标悬停在弹出菜单项上,当光标离开时,图标变为黑色
以下,不完美,但仍然是重置图标后的解决方案。首先注册受影响图标的 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 或其图标中的错误,因为这些控件(之一)如果与系统主题不同,则根本不尊重应用程序的主题。
只要将鼠标悬停在图标上,它就会从浅色模式变为深色模式。它从应该处于亮模式开始,但每当我用鼠标移动时它就会变成暗模式
<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 控件图标(按钮等不受影响)。重现:
- 将 UWP 页面的 RequestedTheme 设置为“深色”
- 将 Windows 主题设置为浅色(在 OS 的设置中)
- 拥有带有您自己的白色位图图标的 MenuFlyoutItem
- 将鼠标悬停在弹出菜单项上,当光标离开时,图标变为黑色
以下,不完美,但仍然是重置图标后的解决方案。首先注册受影响图标的 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 或其图标中的错误,因为这些控件(之一)如果与系统主题不同,则根本不尊重应用程序的主题。