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

user_14774694 0
Viewed 414

Whenever hovering over the icon it changes from light mode into dark mode. It starts with being in Light-Mode as it should be, but whenever I go over with the mouse it changes into darkmode image This is the Code for my Icon

<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-xaml uwp icons
2 Answers

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

Please check AdaptiveGridView source code, it was inherit from GridView, so the each item will be rendered as GridViewItem. If we have override the default GridViewItemForegroundPointerOver resource, it will change the default behavior when cursor point over. Please add the GridViewItemForegroundPointerOver in to your Application.Resources like the following.

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

I was able to reproduce this issue, just for MenuFlyoutItem control icon (buttons, etc. are not affected). To reproduce:

  1. Set RequestedTheme of your UWP Page to "Dark"
  2. Set Windows Theme to Light (in settings of OS)
  3. Have MenuFlyoutItem with your own white bitmap icon
  4. Hover over the menu flyout item and when cursor leaves, icon turns black

Below, not perfect, but still solution which resets the icon right after. First register for PointerExited event of affected icon, in my case:

menuFlyoutItem.PointerExited += menuFlyoutItem_PointerExited;

Then add following method (you will need to little bit alter it to match your case)

    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;
            }

    }

This will reset icon image to your default right after the issue occurs. This is not perfect as you will see that image blinks once due to the code, but at least it will stay in requested color.

According to my opinion, this is a bug in UWP/MenuFlyoutItem or its Icon as (one of) these controls simply do(es) not respect the application's theme if its different from the system one.

user_37323230
Related