Change Image based on source name MAUI - image

Question

Hi I'm new to coding in xamarin forms + MAUI with that said, my problem is that I'm trying to get a Image to change its source if the app loses/get connection to wifi.
I first tried to code like James Montemagno did for one of his video about databinding and i got it to work when I was typing in an entry. I then tried to do this automatically by using
"NetworkAccess accessType = Connectivity.Current.NetworkAccess;
    IEnumerable profiles = Connectivity.Current.ConnectionProfiles;'
and if this profile contains Wifi connection, i set a string called wifi to "wificonnected.png" if not wifi ="wifidisconnected.png".
This will not automatically change my Image source, it's just blank. Do you have any tips on what I should do, or do you have a more clever way?
I just want to build simple indicators.
 
ViewModel code:
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using DisplayV3.Pages;
namespace DisplayV3.ViewModels;
public partial class HomeViewModel : ObservableObject
{
NetworkAccess accessType = Connectivity.Current.NetworkAccess;
IEnumerable<ConnectionProfile> profiles = Connectivity.Current.ConnectionProfiles;
[NotifyPropertyChangedFor(nameof(HasWifi))]
[ObservableProperty]
string wifi;
public string HasWifi => $"{wifi}";
[RelayCommand]
async void CheckInternet()
{
if (profiles.Contains(ConnectionProfile.WiFi))
{
wifi = "wificonnected.png";
}
else
{
wifi = "wifidisconnected.png";
}
await App.Current.MainPage.DisplayAlert("Has", HasWifi, wifi);
//Console.WriteLine(HasWifi);
}
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(FullName))]
string firstName;
[ObservableProperty]
[NotifyPropertyChangedFor(nameof(FullName))]
string lastName;
public string FullName => $"{FirstName}{LastName}"; ```
Home Page/MainPage
``` <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodel="clr-namespace:DisplayV3.ViewModels"
x:DataType="viewmodel:HomeViewModel"
x:Class="DisplayV3.Pages.Home"
Title="Home">
<ScrollView>
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<Entry Placeholder="First name"
Text="{Binding FirstName}"/>
<Entry Placeholder="Last name"
Text="{Binding LastName}"/>
<Label
Text="{Binding FullName}"
HorizontalOptions="Center"/>
<Image
Source="{Binding HasWifi}"
HeightRequest="200"
HorizontalOptions="Center" />
<Label
Text="{Binding HasWifi}"
HorizontalOptions="Center"/>
<Button
Command="{Binding CheckInternetCommand}"
Text="Knapp"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ScrollView>
</ContentPage> ```

Answer 1

You can try to bind property Wifi to your Image View.
<Image
Source="{Binding Wifi}"
HeightRequest="200"
HorizontalOptions="Center" />
And you can change the value for property Wifi not wifi ,just as follows:
[NotifyPropertyChangedFor(nameof(HasWifi))]
[ObservableProperty]
string wifi;
public string HasWifi => $"{wifi}";
[RelayCommand]
async void CheckInternet()
{
if (profiles.Contains(ConnectionProfile.WiFi))
{
// replace wifi with `Wifi ` here
Wifi = "wificonnected.png";
}
else
{// replace wifi with `Wifi ` here
Wifi = "wifidisconnected.png";
}
await App.Current.MainPage.DisplayAlert("Has", HasWifi, wifi);
}

Answer 2

You are binding a non observable property so if that changes (HasWifi), it would never inpact on the ui, only on the view model.
[ObservableProperty]
string hasWifi => $"{Wifi}";