MVVM with tabview - updating ContentPage title based on Active Tab
UPDATE: I didn't realize that the behaviors classes were NOT built-in, I added the classes from the link above and it works now. Leaving this part of the question up in case anyone else has the same issue.
(1) Follow up to the above, on the first load of the app, how would I get the Tab Name? Currently, the TabViewSelectionChanged command fires only when the user clicks on different tabs. On first load, I want to set the ContentPage Title, so for that how would I get the Tabs Name?
(2) If I have multiple tabs, say 4, by default the first tab is always selected when the app starts or page navigated to. How can I set the starting tab to be #2 (a middle tab)?
(3) How do I set Padding around the tabview icons/name? Is it possible to set the tabheight to say 100, and justify the icons and name to the top, leaving some room in the bottom. The reason for this is because on the newer iPhones, the tabs attach to the bottom of the screen and it is hard to tab through. Leaving some space at the bottom would help.
(4) Is it possible to set the xaml in a different page and reference it inside the tabview? In the XF standard tab page, I can set the contentPage to a different Page like so:
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestXam.Views.MainPage"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:local="clr-namespace:TestXam.Views;assembly=TestXam"
android:TabbedPage.ToolbarPlacement="Bottom" Title="{Binding currentPageName}">
<local:ContentOnePage />
<local:ContentTwoPage />
TabbedPage/>
SIGN IN To post a reply.
11 Replies
For (3) yes I have set the TabHeight, but my question is more so how I can say justify the image and label in the tab to the top and have some room at the bottom. Just setting the TabHeight seems to always justify the content in the center. Eg. The tab icons and label below have padding on the bottom:
For (4) Is it possible to mix Xaml and C# instead of writing all the XAML in the code behind file? Meaning, I have the following XAML already, it would be very tedious to rewrite all the xaml in code behind, I would like to only attach the Content Page for the tabitem.Content Eg. Grid (Bold and underlined)
<tabView:SfTabView TabHeaderPosition="Bottom" TabHeight="100"
TabHeaderBackgroundColor="{Binding TabBackgroundColor}"
DisplayMode="ImageWithText" VisibleHeaderCount="3" SelectedIndex="{Binding TabViewSelectedIndex, Mode=TwoWay}">
<tabView:SfTabView.Behaviors>
<behaviors:EventToCommandBehavior Command="{Binding SelectionChangedCommand}"
EventName="SelectionChanged" />
tabView:SfTabView.Behaviors>
<tabView:SfTabItem Title="Content1" ImageSource="cheeseburger.png" >
<tabView:SfTabItem.Content>
<Grid BackgroundColor="LightSkyBlue" x:Name="AllContactsGrid">
<ListView ItemsSource="{Binding ClarityCollection}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding Description}">Label>
ViewCell>
DataTemplate>
ListView.ItemTemplate>
ListView>
Grid>
tabView:SfTabItem.Content>
tabView:SfTabItem>
<tabView:SfTabItem Title="Content2" ImageSource="cheeseburger.png">
<tabView:SfTabItem.Content>
<Grid BackgroundColor="LightBlue" x:Name="AllContactsGrid2" />
tabView:SfTabItem.Content>
tabView:SfTabItem>
<tabView:SfTabItem Title="Content3" ImageSource="cheeseburger.png">
<tabView:SfTabItem.Content>
<Grid BackgroundColor="LightGreen" x:Name="AllContactsGrid3" />
tabView:SfTabItem.Content>
tabView:SfTabItem>
tabView:SfTabView>
(4) There is some misunderstanding here, what I am asking is if there is a way to add Items via code behind as well as XAML together.
Meaning, let's say I have three tabs. I have bound all the Tab Items Content directly via code behind like in your example. Instead, I would like to just bind Tab1 via code behind, but code Tab2 and Tab3 directly in the XAML - commented out below because I wasn't sure how to achieve this.
(5) How can I simply add a line above the TabItems. I dont want to use a fill color, but just a simple line:
Hi Reza,
Thanks for the update.
Query 4: Is it possible to mix Xaml and C# instead of writing all the XAML and I'd like to mix it up with Items in codebehind and Xaml with nested TabItems as well
We have analyzed your query and we can achieve your requirement as like below code snippet.
XAML:
Thanks for the update.
Query 4: Is it possible to mix Xaml and C# instead of writing all the XAML and I'd like to mix it up with Items in codebehind and Xaml with nested TabItems as well
We have analyzed your query and we can achieve your requirement as like below code snippet.
XAML:
|
<tabView:SfTabView x:Name="tabView" VisibleHeaderCount="-1" TabHeight="65" SelectionChanged="tabView_SelectionChanged" TabHeaderPosition="Bottom">
<tabView:SfTabItem>
<tabView:SfTabItem.Content>
<tabView:SfTabView x:Name="nestedTab" VisibleHeaderCount="-1">
<tabView:SfTabItem Title="SubTab2">
<tabView:SfTabItem.Content>
<local:SecondView/>
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
<tabView:SfTabItem Title="SubTab3">
<tabView:SfTabItem.Content>
<local:THirdView/>
</tabView:SfTabItem.Content>
</tabView:SfTabItem>
</tabView:SfTabView>
</tabView:SfTabItem.Content>
</tabView:SfTabItem> </tabView:SfTabView> |
C#:
|
public MainPage()
{
TabItemPage1 page1 = new TabItemPage1();
InitializeComponent();
nestedTab.Items.Insert(0, (new SfTabItem { Content = page1.Content, Title = "SubTab1" }));
} |
Query 5: How can I simply add a line above the TabItems. I dont want to use a fill color, but just a simple line
We can achieve your requirement by using Custom header as like below code snippet.
|
<tabView:SfTabItem.HeaderContent>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="0.1*" />
<RowDefinition Height="0.1*" />
<RowDefinition Height="0.1*" />
</Grid.RowDefinitions>
<Grid HeightRequest="1" BackgroundColor="LightGray"/>
<Label FontFamily="Icons" Grid.Row="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text=""/>
<Label Text="Tab1" FontSize="12" Grid.Row="2" HorizontalTextAlignment="Center"/>
</Grid>
</tabView:SfTabItem.HeaderContent> |
Screenshot:
Please find the sample from below link,
Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewIcon229375663.zip
Please let us know if you have any other queries.
Regards,
Sakthivel P.
how can I add this line on a TOP tab bar, with the Grey line on the bottom of the tabs using codebehind? This is my current code to add the Subtab/content pages.
ContrastContent Content1 = new ContrastContent(); ClarityContent Content2 = new ClarityContent(); ContrastTabItems = new TabItemCollection() { new SfTabItem() { Title = "Contrast", Content = Content1.Content, TitleFontFamily = "Font-Regular", TitleFontColor = ResourceHelpers.GetColorFromResourceKey("Gray-400"), TitleFontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)), SelectionColor = ResourceHelpers.GetColorFromResourceKey("Gray-600") }, new SfTabItem() { Title = "Clarity", Content = Content2.Content, TitleFontFamily = "Font-Regular", TitleFontColor = ResourceHelpers.GetColorFromResourceKey("Gray-400"), TitleFontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)), SelectionColor = ResourceHelpers.GetColorFromResourceKey("Gray-600") } };
So in this case, the red line below would be the 'grey line'
Also just to add a twist, the content inside Content1 and Content2 is (because of the blue button in the picture) so if I do something like this in code, the AbsoluteLayout get messed up, as you can see from the picture below.
Grid content1 = new Grid() { RowDefinitions = { new RowDefinition {Height = new GridLength(1)}, new RowDefinition {Height = new GridLength(1, GridUnitType.Star)} } }; Grid.SetRow(contrastContent, 1); content1.Children.Add(new BoxView() { BackgroundColor = Color.Red, HeightRequest = 1 }); content1.Children.Add(contrastContent.Content); ContrastTabItems = new TabItemCollection() { new SfTabItem() { Title = "Contrast", Content = content1, TitleFontFamily = "Font-Regular", TitleFontColor = ResourceHelpers.GetColorFromResourceKey("Gray-400"), TitleFontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)), SelectionColor = ResourceHelpers.GetColorFromResourceKey("Gray-600") },
SIGN IN To post a reply.
