Good day fellow code ninjas!!!
Using a '< TabbedPage/ >' in Xamarin forms I can easily create a tab bar at the top of my page. I would however like to have two tab bars instead of one. For example, 3 tab buttons in the first tab bar row and another 3 in the second row and the user being able to navigate between all 6 pages.
Does anyone perhaps know if this is possible in Xamarin forms and/or if there is any documentation that might assist.
You could use the TabView from the Xamarin Community Toolkit in addition to your TabbedPage 😉. Here's how it works:
<Grid>
<xct:TabView>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
If you put a TabView in each of your TabBar contents you will be able to get the result you want.
In your case, it would be something like this:
<ContentPage Title="Tab 1">
<xct:TabView>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</ContentPage>
<ContentPage Title="Tab 2">
<xct:TabView>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</ContentPage>
If you want to see more about TabViews, there is a great article posted by Gerald Versluis, that explains it perfectly: https://devblogs.microsoft.com/xamarin/xamarin-community-toolkit-tabview/
Give it a try with James Montemagno youtube channel
EDIT
here is the official github link for the library used by that video
https://github.com/roubachof/Sharpnado.Tabs
Related
I have a business requirement to build a flyout menu with multiple columns. The menu will have all the basic flyout behaviors bit it has to have a narrow static column on the left side with 3 buttons in it and then have the regular scrollable flyout menu next to it. Is it possible at this time to do a completely custom layout within xamarin forms shell for the flyout?
You could use the FlyoutContentTemplate to do that.
<Shell.FlyoutContentTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<StackLayout BackgroundColor="Purple">
<Button Text="home" />
<Button Text="dash" />
<Button Text="chat" />
</StackLayout>
<CollectionView
BindingContext="{x:Reference shell}"
IsGrouped="True"
ItemsSource="{Binding FlyoutItems}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label
FontSize="Large"
Text="{Binding Title}"
TextColor="Black" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</DataTemplate>
</Shell.FlyoutContentTemplate>
In Xamarin.Android it has a class named ViewPager to support "Gestural navigation allows the user to swipe left and right to step through pages of data." (https://learn.microsoft.com/en-us/xamarin/android/user-interface/controls/view-pager/)
But my task is write cross-platform codes for both Android & iOS (without rewrite new code for this gesture). With Xamarin.Form does any library support this ? I have read about Xamarin.Form carousel, but it seem used for slideshow, not appropriate for news list.
I think TabbedPage is more suitable for you. tabbedPage support the Gestural navigation allows the user to swipe left and right to step through pages of data, just set the different pages of data in different tabs.
Here is running GIF.
You can add this Tabbedpage like following code.
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TabbedPageDemo;assembly=TabbedPageDemo"
x:Class="TabbedPageDemo.TabbedPageDemoPage">
<TabbedPage.Resources>
<ResourceDictionary>
<local:NonNullToBooleanConverter x:Key="booleanConverter" />
</ResourceDictionary>
</TabbedPage.Resources>
<TabbedPage.ItemTemplate>
<DataTemplate>
<ContentPage Title="{Binding Name}" Icon="monkeyicon.png">
<StackLayout Padding="5, 25">
<Label Text="{Binding Name}"
Font="Bold,Large"
HorizontalOptions="Center" />
<Image Source="{Binding PhotoUrl}"
WidthRequest="200"
HeightRequest="200" />
<StackLayout Padding="50, 10">
<StackLayout Orientation="Horizontal">
<Label Text="Family:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Family}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Subfamily,
Converter={StaticResource booleanConverter}}">
<Label Text="Subfamily:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Subfamily}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Tribe,
Converter={StaticResource booleanConverter}}">
<Label Text="Tribe:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Tribe}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Genus:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Genus}"
Font="Bold,Medium" />
</StackLayout>
</StackLayout>
</StackLayout>
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>
You can add different ItemTemplate in the Tabbedpage.
Here is a related link.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page
Update: you can add the listview in the tabbpage like following GIF.
Any idea how to create this. I am using ProgressRingBar but it has some limitations. I want to show progress in percentage also inside the ring. Which is not possible with this
Any other way to achieve this for both Android and iOS platforms
Got this working:
<control:ProgressRing Margin = "165,0,-20,40" Grid.Row="0" Grid.Column="1" HeightRequest= "40" RingProgressColor="#ebf5e4" RingBaseColor="LightGray" RingThickness="25" AnimatedProgress="{Binding Progress}" AnimationEasing="2" />
<Label x:Name="LabelProgress" Margin = "200,0,-20,40" Grid.Row="0" Grid.Column="1" FontSize="Micro" Text="{Binding ProgressPercentage}" WidthRequest="50" HeightRequest="20" VerticalOptions="Center" HorizontalOptions="Center" />
I use a label with a ProgressRing to show the percentage of progress. This works for me.
I'm having a cell view with nested StackLayouts, there's one label that will be wrapped if the text is long, which is the desired behaviour. However, the wrap breaks the LayoutOptions set to (basically) all parent views resulting in a gray gap on the right hand side.
<StackLayout Orientation="Horizontal" BackgroundColor="Gray" Margin="0,30,0,0">
<BoxView
HorizontalOptions="Start"
BackgroundColor="#EEBB00"
WidthRequest="100"
/>
<StackLayout
BackgroundColor="#CC4400"
HorizontalOptions="FillAndExpand"
>
<BoxView
BackgroundColor="Green"
HeightRequest="10"
HorizontalOptions="FillAndExpand"
/>
<Label
FontSize="16"
HorizontalOptions="FillAndExpand"
Text="Name that is toolongandwillbewrapped"
/>
<StackLayout
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BackgroundColor="Blue"
>
<Label
FontSize="13"
Text="Left"
TextColor="White"
HorizontalOptions="StartAndExpand"
VerticalTextAlignment="End"
/>
<Label
FontSize="13"
Text="Right"
TextColor="White"
HorizontalOptions="EndAndExpand"
VerticalTextAlignment="End"
/>
</StackLayout>
</StackLayout>
</StackLayout>
The resulting views are:
So I can tell why this is happening, but well, of course I don't like it. The expected behaviour is for the right-hand-side stacklayout to expand all the way to the right. I've tried various ways to circumvent this and would not be here if I had succeeded. Does anybody have an idea?
Unfortunately, it's a bug in Xamarin.Forms (probably, iOS-only).
Bugzilla #28650
Bugzilla #31128
Bugzilla #33841
The workaround in that case is using Grid instead of StackLayout : http://forums.xamarin.com/discussion/comment/152969/#Comment_152969
I have the following tableview set up in XAML for Xamarin Forms:
<TableView Intent="Menu">
<TableRoot>
<TableSection Title="Categories">
<ViewCell>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Padding="20,0,20,0">
<Label Text="Category" XAlign="Center"/>
<Label Text=">" HorizontalOptions="EndAndExpand" XAlign="Center"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
Can anyone let me know how to implement the clicking of the row to open another content page xamarin forms? Or do I have to separately implement in the iOS side?
Have a look at the Xamarin Documentation about the TapGestureRecognizer.
You can apply that method here as well.
I'm not completely sure if you can apply it directly to the ViewCell but you should be able to do it on the StackLayout.
So it would be something like:
<TableView Intent="Menu">
<TableRoot>
<TableSection Title="Categories">
<ViewCell>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Padding="20,0,20,0">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnTapGestureRecognizerTapped"
NumberOfTapsRequired="1" />
</StackLayout.GestureRecognizers>
<Label Text="Category" XAlign="Center"/>
<Label Text=">" HorizontalOptions="EndAndExpand" XAlign="Center"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
And then of course implement the event method.
You could also add the Tapped method to the ViewCell itself.
Like this:
<ViewCell Tapped="Handle_Cell_Tapped">
</View>
Then write your Handle_Cell_Tapped event handler in the code behind.
You can use the ItemTappedEventArgsConverter from Xamarin.Comunity.Toolkit to do this. It's pretty simple and straight forward. Here is a link to the documentation and there are also some samples.
Xamarin Community Toolkit - ItemTappedEventArgsConverter