Change Image based on source name MAUI-CodePudding

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> ```

CodePudding user response：

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

CodePudding user response：

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