Xamarin forms Change and enable image button

Question

Does anyone know how to change Imagebutton source? Refer to the picture link, when user click on step1 (MainPage), it will redirect user to another page (SecondPage). Once user click on "done" button in SecondPage, I want to change my imagebutton source and at the same time, enable click event. I am not sure not to call the function from one page to another.

(P.S my btnclickcount doesn't seems to be working sometimes... I only want to record the start date time on first button click)

    public partial class MainPage : ContentPage
    {
    public string mainpagevalue;

    int offlinecount = 0;
    int onlinecount = 0;

    public MainPage()
    {
        InitializeComponent();

    }
    private void btnOffline_Clicked(object sender, EventArgs e)
    {
        offlinecount++;
        txtOfflineStatus.Text = "IN PROGRESS";

        Navigation.PushAsync(new SecondPage(this, lblEndDT, txtOfflineStatus, btnOnline, btnMH));


        if (offlinecount == 1)
        {
            string currentDT = DateTime.Now.ToString();
            lblStartDT.Text = currentDT;
        }


    }

    private void btnOnline_Clicked(object sender, EventArgs e)
    {
        onlinecount++;

        txtOnlineStatus.Text = "IN PROGRESS";

        Navigation.PushAsync(new ThirdPage(this, lblOnlineEndDT, btnTS, txtOnlineStatus));

        if (onlinecount == 1)
        {
            string onlinestartDT = DateTime.Now.ToString();
            lblOnlineStartDT.Text = onlinestartDT;
        }

    }

Third Page

 public partial class ThirdPage : ContentPage
{
    Label wopLblOnlineEndDT;
    MainPage mainpage;
    ImageButton btntroubleshoot;
    Label wolblOnlineStatus;

    public ThirdPage()
    {
        InitializeComponent();

    }
    public ThirdPage(MainPage woPage, Label lblOnlineEndDT, ImageButton btnTS, Label lblOnlineStatus)
    {
        InitializeComponent();
        mainpage = woPage;
        wopLblOnlineEndDT = lblOnlineEndDT;
        btntroubleshoot = btnTS;
        wolblOnlineStatus = lblOnlineStatus;
    }
    private void BtnDone_Clicked(object sender, EventArgs e)
    {
        string edt = DateTime.Now.ToString();
        wopLblOnlineEndDT.Text = edt;
        mainpage.mainpagevalue = wopLblOnlineEndDT.Text;
        btntroubleshoot.Source = "troubleshooting";
        btntroubleshoot.IsEnabled = true;
        wolblOnlineStatus.Text = "COMPLETED";
        wolblOnlineStatus.TextColor = Color.FromRgb(0, 214, 54);
        Navigation.PopAsync();
    }
}

XAML

 <ImageButton x:Name="btnOffline" IsEnabled="True" Source="@drawable/offlinetool.png" Grid.Row="1" Grid.Column="1" BackgroundColor="Transparent" Clicked="btnOffline_Clicked"/>
        <Label Text="Offline Tool" Grid.Row="2" Grid.Column="1" Margin="15,0,0,0"/>
        <ImageButton Source="@drawable/material.png" Grid.Row="4" Grid.Column="1" BackgroundColor="Transparent"/>
        <Label Text="Material Handler" Grid.Row="5" Grid.Column="1" />
        <Image Source="@drawable/Picture1.png" Grid.Row="6" Grid.ColumnSpan="6" BackgroundColor="Transparent"/>

        <Label Text="Start Date Time:" Grid.Row="1" Grid.Column="3"/>
        <Label Text="End Date Time:" Grid.Row="1" Grid.Column="3" Margin="7,40,0,0"/>
        <Label Text="Status:" Grid.Row="2" Grid.Column="3" Margin="58,0,0,0" />
        <Label x:Name="txtOfflineStatus" Text="NOT STARTED" TextColor="Red" Grid.Column="4" Grid.Row="2"/>
        <Label x:Name="lblStartDT" Text="" Grid.Column="4" Grid.Row="1"/>
        <Label x:Name="lblEndDT" Text="-" Grid.Column="4" Grid.Row="1" Margin="0,40,0,0"/>

        <Label Text="Start Date Time:" Grid.Row="4" Grid.Column="3"  />
        <Label Text="End Date Time:" Grid.Row="4" Grid.Column="3" Margin="7,40,0,0"/>
        <Label Text="Status:" Grid.Row="5" Grid.Column="3" Margin="58,0,0,0" />
        <Label Text="NOT STARTED" TextColor="Red" Grid.Column="4" Grid.Row="5"/>


        <!--#Online Tool-->
        <ImageButton x:Name="btnOnline" Source="@drawable/ot.png" Grid.Row="8" Grid.Column="1" BackgroundColor="Transparent" Clicked="btnOnline_Clicked" IsEnabled="False"/>
        <Label Text="Online Tool" Grid.Row="9" Grid.Column="1" Margin="19,0,0,0"/>
        <ImageButton x:Name="btnMH" Source="@drawable/mh.png" Grid.Row="11" Grid.Column="1" BackgroundColor="Transparent" Clicked="imgbtnMH_Clicked" IsEnabled="False"/>
        <Label Text="Material Handler" Grid.Row="12" Grid.Column="1"/>
        <Image Source="@drawable/Picture1.png" Grid.Row="13" Grid.ColumnSpan="6" BackgroundColor="Transparent"/>

        <Label Text="Start Date Time:" Grid.Row="8" Grid.Column="3" />
        <Label Text="End Date Time:" Grid.Row="8" Grid.Column="3" Margin="7,40,0,0"/>
        <Label Text="Status:" Grid.Row="9" Grid.Column="3" Margin="58,0,0,0" />
        <Label Text="NOT STARTED" TextColor="Red" Grid.Column="4" Grid.Row="9"/>
        <Label x:Name="lblOnlineStartDT" Text="00:00:00" Grid.Column="4" Grid.Row="8"/>
        <Label x:Name="lblOnlineEndDT" Text="" Grid.Column="4" Grid.Row="8" Margin="0,40,0,0"/>
        <Label x:Name="txtOnlineStatus" Text="NOT STARTED" TextColor="Red" Grid.Column="4" Grid.Row="9"/>

Jack Hua Jack Hua · Accepted Answer · 2020-03-09T02:36:18

You can pass the reference of imageButton to the SecondPage too and change the Source in the done method. Let me show you how to do it:

In the MainPage xaml, create an ImageButton named MyImageButton:

<StackLayout>
    <!-- Place new controls here -->

    <Label x:Name="lblStartDT" Text="startTest" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand"/>

    <Button Text="go to secondPage" Clicked="btnOffline_Clicked"  HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand"/>

    <Label x:Name="lblEndDT" Text="endTest" 
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />

    <ImageButton x:Name="MyImageButton" Source="Images.png" IsEnabled="False" 
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />

</StackLayout>

In code behind, pass MyImageButton to the SecondPage:

    private void btnOffline_Clicked(object sender, EventArgs e)
    {
        //Pass the parametere you need when you go to SecondPage 
        //Navigation.PushAsync(new SecondPage(this, lblEndDT));

        Navigation.PushAsync(new SecondPage(this, lblEndDT, MyImageButton));

        string currentDT = DateTime.Now.ToString();
        lblStartDT.Text = currentDT;

    }

In the SecondPage, get the reference of myImageBtn and modify it in the done method:

public partial class SecondPage : ContentPage
{
    Label MainPagelblEndDT;
    MainPage mainPage;
    ImageButton myImageBtn;
    public SecondPage()
    {
        InitializeComponent();
    }

    public SecondPage(MainPage mainP,Label lblEndDT)
    {
        InitializeComponent();

        //Get the lblEndDT reference here
        MainPagelblEndDT = lblEndDT;
        //Get the MainPage reference here
        mainPage = mainP;
    }

    public SecondPage(MainPage mainP, Label lblEndDT, ImageButton imageBtn)
    {
        InitializeComponent();

        //Get the lblEndDT reference here
        MainPagelblEndDT = lblEndDT;
        //Get the MainPage reference here
        mainPage = mainP;
        //Get the ImageButton reference here
        myImageBtn = imageBtn;
    }

    private void Button_Clicked(object sender, EventArgs e)
    {           
        string edt = DateTime.Now.ToString();

        //Use it
        MainPagelblEndDT.Text = edt;      

        mainPage.previouspagevalue = MainPagelblEndDT.Text;

        //change the source of imageBtn
        myImageBtn.Source = "Images1";
        myImageBtn.IsEnabled = true;

        Navigation.PopAsync();
    }
}

A sample project is available here.

Xamarin forms Change and enable image button

2 Answers