SwipeItem icon created with BitmapIconSource changes foreground when in a ListView

Question

I added a SwipeControl in the ListView.ItemTemplate, and I need to use a custom icon so I'm using a BitmapIconSource.

What is happening is that when SwipeItems are shown, foreground for icons created with the a BitmapIconSource is changed to black. Here is an gif that shows the problem

I created a SwipeControl with 2 SwipeItems, the first SwipeItem uses a BitmapIconSource, the second uses a SymbolIconSource. As you can see only the icon created with BitmapIconSource changes foreground from white to black.

Here XAML to reproduce the problem

   <Page x:Class="SwipeItemCustomItemInListView.AppShell.MainPage"  
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
         xmlns:system="using:System"  
         mc:Ignorable="d"  
         Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
       <Grid>  
           <ListView ItemsSource="{x:Bind _list}" SelectionMode="None" IsItemClickEnabled="True">  
               <ListView.Resources>  
                   <BitmapIconSource x:Key="BitmapIcon" UriSource="/Assets/Phone.png"/>  
                   <SymbolIconSource x:Key="SymbolIcon" Symbol="AttachCamera" />  
                   <SwipeItems x:Key="SwipeItems" Mode="Reveal">  
                       <SwipeItem Background="Red" BehaviorOnInvoked="Close"  
                                  Text="BitmapIcon"  
                                  IconSource="{StaticResource BitmapIcon}"  
                                  Foreground="White"/>  
                       <SwipeItem Background="Red" BehaviorOnInvoked="Close"  
                                  Text="SymbolIcon"  
                                  IconSource="{StaticResource SymbolIcon}"  
                                  Foreground="White"/>  
                   </SwipeItems>  
               </ListView.Resources>  
               <ListView.ItemTemplate>  
                   <DataTemplate x:DataType="system:String">  
                       <SwipeControl LeftItems="{StaticResource SwipeItems}" Padding="8,0">  
                           <TextBlock Text="{x:Bind}" VerticalAlignment="Center"/>  
                       </SwipeControl>  
                   </DataTemplate>  
               </ListView.ItemTemplate>  
           </ListView>  
       </Grid>  
   </Page>  

Answer 1

Hello,

Welcome to Microsoft Q&A.

This seems to be the default behavior. I mean, under the Light theme, the icon will change its color to black, and under the Dark theme, it will change to white.

If you need the BitmapIconSource to stay white all the time, you can follow the steps below:

1. Replace Phone.png with a white icon.
2. Set BitmapIconSource.ShowAsMonochrome to False <BitmapIconSource x:Key="BitmapIcon"
   UriSource="/Assets/Phone.png"
   ShowAsMonochrome="False"/>

Thanks.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.