This document describes how to use the TableView control. I notice that every example in this doc displays items in one column. Because TableView is a table, I guess it can display items in multiple columns. However I can't find the way to do it. Does anyone know how to do it?
There is an example in that document itself that uses a default ViewCell and creates two columns with Grid: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/tableview#view-cell
<TableView Intent="Settings">
<TableRoot>
<TableSection Title="Silent">
<ViewCell>
<Grid RowDefinitions="Auto,Auto"
ColumnDefinitions="0.5*,0.5*">
<Label Text="Vibrate"
Margin="10,10,0,0"/>
<Switch Grid.Column="1"
HorizontalOptions="End" />
<Slider Grid.Row="1"
Grid.ColumnSpan="2"
Margin="10"
Minimum="0"
Maximum="10"
Value="3" />
</Grid>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
Good luck
Related
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
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>
The application that I am working on has labels and on the right side a switch. Here's a sample of the XAML that is used to achieve this:
<ViewCell x:Name="ss">
<StackLayout VerticalOptions="CenterAndExpand" Padding="20,0,20,0">
<StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="Center">
<local:LabelBodyRendererClass Text="Show Subcategory" YAlign="Center" XAlign="Center" />
</StackLayout>
<StackLayout HorizontalOptions="EndAndExpand" Orientation="Horizontal">
<Switch x:Name="ssSwitch" Toggled="SsSwitch" VerticalOptions="Center" />
</StackLayout>
</StackLayout>
</StackLayout>
</ViewCell>
What I would like to find out is if there is a more optimal way to achieve this. The settings page has many switch settings and it seems like there are a large number of elements.
Does anyone have simpler way to achieve the same functionality or should I just stick with the many stacklayout elements?
You can use the built-in SwitchCell but if you want/need to do a custom cell for your layout you can use a Grid instead of the StackLayout. It's more efficient and it's easier to define layouts.
<ViewCell x:Name="ss">
<Grid VerticalOptions="CenterAndExpand" Padding="20, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<local:LabelBodyRendererClass HorizontalOptions="StartAndExpand" Text="Show Subcategory" YAlign="Center" XAlign="Center" />
<Switch x:Name="ssSwitch" Grid.Column="1" Toggled="SsSwitch" VerticalOptions="Center" HorizontalOptions="End" />
</Grid>
</ViewCell>
Using your example: you will have a 2-columns 1-row Grid. First column will be your custom control LabelBodyRendererClass and second column will be your switch.
Note that you can apply the Horizontal and Vertical option right in the UI Control.
More about Grid
Udpate
Sure, you can use the SwitchCell from XAML just as you use any other cell.
<SwitchCell x:Name="SS" Text="{Binding Setting1Text}" On="{Binding Setting1}" />
<SwitchCell Text="{Binding Setting2Text}" On="{Binding Setting2}" />
<SwitchCell Text="{Binding Setting3Text}" On="{Binding Setting3}" />
<SwitchCell Text="{Binding Setting4Text}" On="{Binding Setting4}" />
These samples are using binding but as your CustomCell you can use the name to get and set the value from code behind, although I suggest you to use binding.
Hope this helps.-
I guess is that what you are looking for:
Take a look here.
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