1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to change image when selecting a tab using MVVM and XAML?

How to change image when selecting a tab using MVVM and XAML?

I'm looking for a way to change the images in the tab view when the user taps on them. Here is the XAML I have so far:

 <tabView:SfTabView DisplayMode="ImageWithText" TabHeaderPosition="Bottom" EnableSwiping="False" TabHeight="70" TabHeaderBackgroundColor="#3CB44A" VisibleHeaderCount="3" >

            <tabView:SfTabView.SelectionIndicatorSettings >

                <tabView:SelectionIndicatorSettings

                    Color="#EDF7F4"

                    />

            </tabView:SfTabView.SelectionIndicatorSettings>

<tabView:SfTabItem ImageSource="MasterProfile2.png" SelectionColor="#EDF7F4" TitleFontFamily="Inter-V" FontIconFontSize="15">

                <tabView:SfTabItem.Content>

                    <Grid>


                        <StackLayout Padding="20">

                            <Label Text="Update Master Profile" FontSize="Medium" TextColor="#404041" HorizontalOptions="CenterAndExpand" FontFamily="Inter-V" FontAttributes="Bold"/>

                            <Label/>



                            <Label Text="SMS Mobile No:" FontSize="Medium" TextColor="#404041" FontFamily="Inter-V" FontAttributes="Bold"/>


                            <StackLayout Orientation="Horizontal">

                                <Label Text="+673" FontSize="Medium" Margin="0,7,0,0" TextColor="#404041" FontFamily="Inter-V"/>

                                <border:SfBorder BorderColor="Black" BackgroundColor="White" CornerRadius="5" >

                                    <control:BorderlessEntry

                                    Text="{Binding phoneNumber}" TextColor="#404041" FontSize="Medium"

                                        Keyboard="Numeric"

                                    HeightRequest="40"

                                        WidthRequest="100"

                                    Margin="10,0,0,0"

                                    BackgroundColor="Transparent"

                                        FontFamily="Inter-V"

                                    >

                                        <control:BorderlessEntry.Behaviors>

                                            <FastEntry:XamarinFastEntryBehaviour

                                                                 MaxLength="7"/>

                                        </control:BorderlessEntry.Behaviors>


                                    </control:BorderlessEntry>

                                </border:SfBorder>

                            </StackLayout>


                            <Label Text="Email:" FontSize="Medium" TextColor="#404041" FontFamily="Inter-V" FontAttributes="Bold"/>


                            <border:SfBorder BorderColor="Black" BackgroundColor="White" CornerRadius="5" >

                                <control:BorderlessEntry

                                    Text="{Binding email}" TextColor="#404041"

                                    HeightRequest="40"

                                    FontFamily="Inter-V"

                                    Margin="10,0,0,0"

                                    BackgroundColor="Transparent">


                                </control:BorderlessEntry>

                            </border:SfBorder>


                            <buttons:SfButton Text="Save Changes" Command="{Binding SaveChangesCommand}" TextColor="White"

                            BackgroundColor="#3CB44A" Margin="0,20,0,0" CornerRadius="5" FontFamily="Inter-V" />


                        </StackLayout>

                    </Grid>

                </tabView:SfTabItem.Content>

            </tabView:SfTabItem>

            <tabView:SfTabItem ImageSource="Logout2.png" SelectionColor="#EDF7F4" TitleFontFamily="Inter-V" FontIconFontSize="15">


                <tabView:SfTabItem.Content>

                    <Grid>

                        <StackLayout Padding="20" VerticalOptions="CenterAndExpand">

                            <Label Text="Are you sure you want to log out?" HorizontalTextAlignment="Center" TextColor="#404041" FontFamily="Inter-V" FontAttributes="Bold" FontSize="16" />

                            <buttons:SfButton Text="Logout" Command="{Binding LogoutCommand}" VerticalOptions="Center" BackgroundColor="#3CB44A" TextColor="White" CornerRadius="5" FontFamily="Inter-V"/>

                        </StackLayout>

                    </Grid>

                </tabView:SfTabItem.Content>

            </tabView:SfTabItem>

        </tabView:SfTabView>

Any help is appreciated.


5 Replies 1 reply marked as answer
RS Ruba Shanmugam Syncfusion Team June 9, 2022 01:38 PM UTC

Hi Hamdy,


We have validated your requirement “How to change the image when selecting a tab using MVVM and XAML” and prepared a sample based on that. Here we have changed the image while selecting the tab through the SelectionChanged event to command behaviour using MVVM.


Code snippet:


ViewModel.cs

 

  private void TabViewSelectionChanged(object obj)

        {

            SfTabView tabView = obj as Syncfusion.XForms.TabView.SfTabView;

            for (int i = 0; i < tabView.Items.Count; i++)

            {

                if (i == tabView.SelectedIndex)

                {

                    tabView.Items[i].ImageSource = "apple.png";

                }

                else

                {

                    tabView.Items[i].ImageSource = UnSelectedImages[i];

                }

            }

        }  


Please let us know if you have any other concerns. 


Regards, 

Ruba Shanmugam


Attachment: TabViewSample_SelectionImage_MVVM_bf442c79.zip

Marked as answer
HA hamdy June 10, 2022 06:18 AM UTC

It works perfectly on android but on ios the images in the tab bar do not change.


RS Ruba Shanmugam Syncfusion Team June 13, 2022 04:10 PM UTC

Hi Hamdy,


Currently, we are validating the reported issue and we will let you know the details on June 15, 2022. We appreciate your patience until then.


Regards,

Ruba Shanmugam


RS Ruba Shanmugam Syncfusion Team June 16, 2022 01:56 PM UTC

Hi Hamdy,


We were able to reproduce the reported issue “SfTabItem ImageSource is not properly updated dynamically” and we have confirmed this as a bug and logged a defect report. You can track the status of the bug from the below link.


Link: https://www.syncfusion.com/feedback/35709/sftabitem-imagesource-is-not-properly-updated-dynamically


We will provide a patch for this issue on June 30, 2022. We appreciate your patience until then.


Note: The provided feedback link is private, and you need to log in to view this feedback.


If you have any more specifications/precise replication procedures or a scenario to be tested, you can add them as a comment in the portal.


Regards,

Ruba Shanmugam


RS Ruba Shanmugam Syncfusion Team July 1, 2022 12:53 PM UTC

Hi Hamdy,


We have fixed the reported issue “SfTabItem ImageSource is not properly updated dynamically” and find the assembly from the attachment.


Note: Please refer to the below link to apply the custom assembly


https://www.syncfusion.com/kb/8279/how-to-apply-the-custom-assemblies-when-configured-the-project-with-syncfusion-nuget


Currently, we have patch support only for the main and service pack release version, not for the weekly NuGet release. So only provided an assembly with the 20.1.0.61 version.


This fix will be included in our weekly NuGet release which will be rolled out on our next weekly release on mid of July 2022. We appreciate your patience until then.


Regards,

Ruba Shanmugam


Attachment: SfTabView_Assembly_2ffeb5a5.zip

Loader.
Up arrow icon