Set Image Source in code behind for different themes

MCApp 21 Reputation points
2022-12-30T00:26:19.597+00:00

In my xamarin.forms app, I have a situation similar to this:

  • in a CollectionView, I set a lot of elements
  • one of this elements is an image
  • I set source of this image in the code behind. in fact, according to a bool, image can have a specific source (if bool is true) or different source (if bool is false)

Problem: if bool is false, image must have different source according to the app theme. how can I have to set this source to make it responsive to change of theme if user is enjoying the app during theme changing?

I post a sample code:

My cs file:

public partial class MainPage : ContentPage, INotifyPropertyChanged  
    {  
        public event PropertyChangedEventHandler PropertyChanged;  
  
  
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)  
        {  
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  
        }  
  
        public MainPage()  
        {  
            InitializeComponent();  
            BindingContext = this;   
            Load();  
        }  
  
        void Load()  
        {  
            bool IsDog = false;  
  
            if (IsDog)  
                ImgSource = "nf.png";  
            else  
                ImgSource = Application.Current.RequestedTheme == OSAppTheme.Light ? "userstandardlight.png" : ImgSource = "userstandarddark.png";  
  
        }  
  
        public ImageSource _ImgSource = null;  
        public ImageSource ImgSource  
        {  
            get => _ImgSource;  
            set  
            {  
                _ImgSource = value;  
                OnPropertyChanged(nameof(ImgSource));  
  
            }  
        }  
  
    }  

My XAML file:

<StackLayout  
        Orientation="Vertical">  
  
        <Image  
            WidthRequest="100"  
            HeightRequest="100"  
            Margin="50"  
            Source="{Binding ImgSource}"  
            />  
  
    </StackLayout>  

So, if IsDog is true, no issue of course. If IsDog is false, source is userstandardlight or userstandarddark (according to the current theme); but if I change theme (or automatically change if user set this feature in the settings phone), there is no change of the source. How can I change source if theme changes? I cannot reload all elements, because my real app is really complicated and UX would be very bad if I force reload of entire collection. (the above sample is just a demo)

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,272 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 66,561 Reputation points Microsoft Vendor
    2022-12-30T02:58:33.923+00:00

    Hello,

    You can do this by React to theme changes. Add the Application.Current.RequestedThemeChanged to the MainPage's constructor. If your theme changed, RequestedThemeChanged event will be invoked, you can set different images by themes like following code.

       public MainPage()  
               {  
                   InitializeComponent();  
                   BindingContext = this;  
                   Application.Current.RequestedThemeChanged += (s, a) =>  
                   {  
                       // Respond to the theme change  
                       if (a.RequestedTheme == OSAppTheme.Light)  
                       {  
                           ImgSource = "userstandardlight.png";  
                      }  
                       else  
                       {  
                           ImgSource = "userstandarddark.png";  
                       }  
                        
                   };  
               }  
    

    Best Regards,

    Leon Lu


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    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.


0 additional answers

Sort by: Most helpful