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.
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
I am immensely grateful for your quick response. Thank you! This worked…mostly.
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!
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
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
Thank you again for your responsiveness. I resolved the image formatting issue using the HeaderItemTemplate.
I successfully implemented the Ripple effect as well.
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