[Android] Update/Binding on BitmapImage does not update parent ImageBrush

[queequac]

Current behavior

When using a BitmapImage as ImageSource for a ImageBrush, updates on the BitmapImage are not triggering updates on the brush.

Sample:

        <Grid x:Name="tile">
            <Border Width="48" Height="48" CornerRadius="8">
                <Border.Background>
                    <ImageBrush Stretch="UniformToFill" x:Name="brush">
                        <ImageBrush.ImageSource>
                            <BitmapImage UriSource="{x:Bind TileContent, Mode=OneWay}" DecodePixelType="Logical" DecodePixelWidth="48" DecodePixelHeight="48"/>
                        </ImageBrush.ImageSource>
                    </ImageBrush>
                </Border.Background>
            </Border>
        </Grid>

In the sample above, the UriSource is bound against a property of type Uri. Whenever the uri changes, the new image shall be loaded and the content of the ImageBrush should change.

While this works as expected under Windows, on Android only the initial BitmapImage will be created and any further change (via binding or set programmatically) will be ignored.
Obviously the ImageBrush does not realize the actual instance of its BitmapImage changed.

Expected behavior

Should behave like under Windows. Any change to the BitmapImage (e.g. by modifying the UriSource property) should also be reflected by the ImageBrush using the BitmapImage as its ImageSource.

How to reproduce it (as minimally and precisely as possible)

Use the snippet above and bind against a DependencyProperty. Switching the uri will change the image under Windows, while it will be created under Android once and not change afterwards.

Workaround

Instead of modifying the BitmapImage, under Android the ImageSource has to be set explicitly.
In my case I added code-behind:

        public MyControl()
        {
            this.InitializeComponent();
            this.RegisterPropertyChangedCallback(TileContentProperty, TileContentChanged);
        }

        private void TileContentChanged(DependencyObject sender, DependencyProperty dp)
        {
            BitmapImage bi = new BitmapImage();
            bi.DecodePixelType = DecodePixelType.Logical;
            bi.DecodePixelHeight = 48;
            bi.DecodePixelWidth = 48;
            bi.UriSource = LogoUri;

            brush.ImageSource = bi;
        }

Explicitly setting the ImageSource as a whole will make the ImageBrush realize that something on the underlying BitmapImage object changed.

Works on UWP/WinUI

Yes

Environment

Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia

NuGet package version(s)

Uno.UI version 3.10.11

Affected platforms

Android

IDE

Visual Studio 2019

IDE version

16.11.4

Relevant plugins

No response

Anything else we need to know?

No response

[francoistanguay]

@iury-kc Probably related/similar to the other bug you're working on .You should take a look after.

[ghost]

Hi @queequac ! Do you mind to give more details about your issue?

I tried to reproduce the scenario, however, it doesn`t work with UWP also.
Only changing the Uri TileContent property doesn't update the ImageBrush on UWP as well.

[queequac]

@iury-kc In my case it works like a charme and I am using this under UWP even in production.😅

Create a new blank UWP project (e.g. with Visual Studio 2022) and modify only the MainPage.xaml and MainPage.xaml.cs accordingly:

MainPage.xaml

<Page
    x:Class="ImageBinding.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ImageBinding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Border Width="48" Height="48" CornerRadius="8">
            <Border.Background>
                <ImageBrush Stretch="UniformToFill" x:Name="brush">
                    <ImageBrush.ImageSource>
                        <BitmapImage UriSource="{x:Bind TileContent, Mode=OneWay}" DecodePixelType="Logical" DecodePixelWidth="48" DecodePixelHeight="48"/>
                    </ImageBrush.ImageSource>
                </ImageBrush>
            </Border.Background>
        </Border>

        <Button VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="8" Click="OnChangeIt">Change TileContent property</Button>
    </Grid>
</Page>

MainPage.xaml.cs

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace ImageBinding
{
    public sealed partial class MainPage : Page
    {
        public static readonly DependencyProperty TileContentProperty = DependencyProperty.Register(nameof(TileContent), typeof(Uri), typeof(MainPage), new PropertyMetadata(new Uri("https://cdn.pixabay.com/photo/2020/03/09/17/51/narcis-4916584_960_720.jpg")));

        public Uri TileContent
        {
            get { return (Uri)GetValue(TileContentProperty); }
            set { SetValue(TileContentProperty, value); }
        }

        public MainPage()
        {
            this.InitializeComponent();
        }

        private void OnChangeIt(object sender, RoutedEventArgs e)
        {
            TileContent = new Uri("https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_960_720.jpg");
        }
    }
}

Click the button at the bottom and it switches the narcis to the blue rose.