How to control image size in SfTabView?

[Craig Fischberg]

The image that I'm trying to add to the SfTabView in the TabBar is coming out way too small. Is there a way to control the image size?

The image on the left tab (see below) is of a gliding skier and a snowboarder. I tried using a .svg image and then a .png. They both come out the same size no matter what I try. The image background has been trimmed to be no bigger than the image of the skiers.  I use this image elsewhere in my app in multiple Maui Layouts and Views with no issue. It's only an issue in this use case.

[Shivani Ramakrishnan]

Hi Craig,

 

Query: Setting Image Size In SfTabView

 

We have checked your query and prepared the sample using HeaderItemTemplate to set the Image size accordingly based on MVVM. Here is the code snippet:

 

<tabView:SfTabView x:Name="tabView" TabBarHeight="80" ItemsSource="{Binding Models}">
    <tabView:SfTabView.HeaderItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Image Source="{Binding Image}" WidthRequest="50" HeightRequest="50"                        VerticalOptions="Center"/>
                        <Label  Padding="5,10,10,10"  Text="{Binding Title}"/>
                    </StackLayout>
                </DataTemplate>
            </tabView:SfTabView.HeaderItemTemplate>
</tabView:SfTabView>

 

We have attached the sample for further reference and please let us know if you need any other details.

 

Regards,
Shivani

Attachment: TabViewImage_6864666c.zip

[Craig Fischberg]

I am immensely grateful for your quick response. Thank you! This worked…mostly.

• The tabs are now not centered on the screen. I decided to use a <Grid> layout instead of <StackLayout> to define the tab items. I am only able to control the horizontal tab positions by setting the Grid.ColumDefinitions or the WidthRequest for the Label or Image to an absolute value. I would like to automatically have the tabs evenly spaced horizontally.
• Secondly, I see the fancy zoom-like effect that occurred when a tab was selected when using SfTabView.TabItems is now gone. I don’t think I want to restore that effect but, if I do, how do I get that effect back? Are there other effects to try?

What you showed me adds much more powerful capability to the TabView. It would be great if this capability was documented. I didn’t find any information about it in your documentation. If I missed something, I apologize.



Here is the code that creates two tabs with each occupying half of the screen. You’ll see I set the Grid ColumnDefinitions=195. Is there a way to get this done in an automated way so that I can be confident the tabs will be evenly space horizontally for all devices?

                    <Grid Padding="0,5" ColumnDefinitions="195">

                        <Image Source="{Binding Image}" HeightRequest="30" HorizontalOptions="Center" VerticalOptions="Start">

                            <Image.Behaviors>

                                <mct:IconTintColorBehavior TintColor="White"/>

                            </Image.Behaviors>

                        </Image>

                        <Label Text="{Binding Title}" HorizontalOptions="Center" VerticalOptions="End"

                               FontSize="18" TextColor="White"/>

                    </Grid>

                </DataTemplate>

            </tabView:SfTabView.HeaderItemTemplate>

Thanks again!

[Shivani Ramakrishnan]

Hi Craig, 

 

Currently, we are validating the reported query and we will let you know the details on February 10th, 2023. We appreciate your patience until then.

 

Regards,
Shivani

[Shivani Ramakrishnan]

Hi Craig,

 

Query 1: TabItems have Not Centered Automatically In HeaderItemTemplate 

 

We have identified an issue with the HeaderItemTemplate where the width is not automatically set. To resolve this, we kindly request that you specify the width of the item manually within the HeaderItemTemplate. Additionally, if you require centering and padding, these can also be set within the HeaderItemTemplate. Please note that these modifications cannot be achieved through any customization properties on the header.

 

Query 2: Effects View For Each TabItems

 

We have added the SfEffectsView for the DataTemplate. So when we click, the effects view is shown. Here is the code snippet:

 

<tabView:SfTabView.HeaderItemTemplate>
<DataTemplate>
<effectsView:SfEffectsView TouchDownEffects="Ripple">
<Grid Padding="0,5" ColumnDefinitions="195" BackgroundColor="LightBlue">
<Image Source="{Binding Image}" HeightRequest="30" HorizontalOptions="Center" VerticalOptions="Start">
<Image.Behaviors>
<mct:IconTintColorBehavior TintColor="White"/>
</Image.Behaviors>
</Image>
<Label Text="{Binding Title}" HorizontalOptions="Center" VerticalOptions="End" FontSize="18" TextColor="White"/>
</Grid>
</effectsView:SfEffectsView>
                </DataTemplate>
</tabView:SfTabView.HeaderItemTemplate>

 

We have attached a sample for your reference. Please let us know if you need any other details.

 

Regards,
Shivani

Attachment: SampleTabView1_461f1840.zip

[Craig Fischberg]

Thank you again for your responsiveness. I resolved the image formatting issue using the HeaderItemTemplate.

I successfully implemented the Ripple effect as well.

[Shivani Ramakrishnan]

Hi Craig,

 

We're pleased to know that the issue is resolved on your side.
Thank you for your valuable feedback and for bringing this to our attention. If you have any further questions or concerns, please don't hesitate to contact us.

 

Regards,
Shivani