Overflowing text onto the next line in a Grid - xaml

I have a Grid where I have defined the Height as 50, and then displaying a bunch of labels bound to a List. How can I overflow the Labels from row to row instead of what's happening now which is squeezing the Labels vertically?
public List LabelList { get; set; } = new List
{
"Cat",
"Dog",
"Fox",
"Leopard",
"Bear",
"Monkey",
"Lion",
"Bison",
"Alpaca",
"Sheep",
"Ant",
"Fox",
"Tiger",
"Elephant",
"Mouse",
"Eagle",
"Coyote"
};
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="50" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Aquamarine" />
<StackLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Orientation="Horizontal">
<Label
Padding="2"
BackgroundColor="Blue"
FontSize="Large"
Text="{Binding}" />
</StackLayout>
<StackLayout Grid.Row="2" BackgroundColor="Aquamarine" />
What is happening now:
What I want to achieve (this is photoshopped):

I had to use FlexLayout instead of StackLayout
<FlexLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Wrap="Wrap">
<Label
Padding="2"
BackgroundColor="Blue"
FontSize="Large"
HorizontalOptions="StartAndExpand"
Text="{Binding}" />
</FlexLayout>

Have you tried something like?:
<StackLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Orientation="Horizontal">
<Label
Padding="2"
BackgroundColor="Blue"
FontSize="Large"
HorizontalOptions="StartAndExpand"
Text="{Binding}" />
</StackLayout>
From what I gather, you haven't set your LayoutOptions for the labels you are trying to stack.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout

If you want to display UI like the screenshot, you can take a look the following code:
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="50" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" BackgroundColor="Aquamarine" />
<StackLayout
Grid.Row="1"
BackgroundColor="Beige"
BindableLayout.ItemsSource="{Binding LabelList}"
Orientation="Horizontal">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="{Binding}" />
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<StackLayout Grid.Row="2" BackgroundColor="Aquamarine" />

Related

Collapse Labels and ListViews in Xamarin Forms

I've got a relatively simple view which looks something like this:
{Label1}
{Label2}
{ListView1}
{Label3}
{ListView2}
The Label2 and ListView1's IsVisible properties are binded to a bool property. When false, they don't appear however, they take up space on the UI meaning there's a considerable gap between Label1 and Label3 like this:
{Label1}
{Label3}
{ListView2}
How can I make them appear like this instead:
{Label1}
{Label3}
{ListView2}
My XAML code looks like this:
<AbsoluteLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label
Text="Title"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="White"
FontSize="Large"
FontAttributes="Bold"
Margin="5"
BindingContext="{x:Reference DashboardPageView}"
IsVisible="{Binding DisplayFloatingTitle}"
Grid.Row="0" />
<Label
Text="Notifications"
HorizontalOptions="Start"
VerticalOptions="Center"
TextColor="White"
FontSize="Medium"
FontAttributes="Bold"
Margin="3"
IsVisible="{Binding HasNotifications}"
Grid.Row="1" />
<ListView Grid.Row="2"
ItemsSource="{Binding Notifications}"
HasUnevenRows="True"
VerticalOptions="Start"
IsVisible="{Binding HasNotifications}"
SeparatorVisibility="None" Margin="1,0"
x:Name="NotificationsList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
........
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label
Text="Activities"
HorizontalOptions="Start"
VerticalOptions="Start"
TextColor="White"
FontSize="Medium"
FontAttributes="Bold"
Margin="3"
IsVisible="{Binding HasActivities}"
Grid.Row="3" />
<ListView Grid.Row="4"
ItemsSource="{Binding Activities}"
HasUnevenRows="True"
VerticalOptions="Start"
SeparatorVisibility="None" Margin="4,0"
x:Name="ActivitiesList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
....
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</AbsoluteLayout>
The problem is this line in your XAML:
<RowDefinition Height="*" />
It's set to *, which means it will take up all remaining space that it can get. If you want the content of this row to size automatically to it's content's size, you should use Auto:
<RowDefinition Height="Auto" />

How can I overlay a Card View or a Framed layout on top of another layout in Xamarin Forms?

I have a situation where I need to "overlay" a grouped set of information, presented by way of a Card (inplemented as a ContentView) on top of a portion of the page header, which is defined in a Grid inside of a FlexLayout. The output should resemble something like the following where the header is the portion in red:
The code for the header is as follows:
<!-- Header -->
<FlexLayout
HeightRequest="108"
AlignItems="Center"
Direction="Column"
BackgroundColor="#D92732">
<Grid VerticalOptions="Center" Margin="0, 30, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="40*"></ColumnDefinition>
<ColumnDefinition Width="80*"></ColumnDefinition>
<ColumnDefinition Width="300*"></ColumnDefinition>
<ColumnDefinition Width="80*"></ColumnDefinition>
<ColumnDefinition Width="40*"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ImageButton Source="Bell.png" Grid.Column="1" BackgroundColor="Transparent"
WidthRequest="37"
HeightRequest="40"
Aspect="AspectFit">
</ImageButton>
<Label
Grid.Column="3"
Text="Payments"
TextColor="#F9F8FA"
FontSize="20"
HeightRequest="40"
HorizontalOptions="Center"
VerticalOptions="Center" VerticalTextAlignment="End">
</Label>
<ImageButton Source="Bell.png" Grid.Column="5" BackgroundColor="Transparent"
WidthRequest="37"
HeightRequest="40"
Aspect="AspectFit">
</ImageButton>
</Grid>
</FlexLayout>
The method I used to solve the problem of having a visual element overlay a portion of another visual element, in this case a Grid overlay a portion of another Grid, is to set the position of the overlay Grid to a specific row and column of the first Grid and then set the Bottom value of the overlay Grid's Margin to a negative number that represents the desired height of the overlay Grid, as seen in the following code and screenshot. Note that I enclosed the overlaid Grid in a Frame which is where I set the negative Bottom Margin value.
<Frame Grid.Row="2" Grid.ColumnSpan="3" Grid.Column="0"
Margin="16,30,16,-310" WidthRequest="343" HeightRequest="300">
<StackLayout HeightRequest="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="44*" />
<RowDefinition Height="38*" />
<RowDefinition Height="40*" />
<RowDefinition Height="20*" />
<RowDefinition Height="96*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
FontFamily="{StaticResource HNMedium}"
FontSize="{StaticResource Font20}"
HorizontalOptions="Start"
Text="Verify Account"
TextColor="{StaticResource NGIC_DarkGray}"
VerticalOptions="Start" />
<Label Grid.Row="1"
Text="Enter the verification code sent to ******8998"
FontSize="{StaticResource Font16}"
TextColor="{StaticResource NGIC_DarkGrayishBlue}"
FontFamily="{StaticResource HNRegular}"/>
<Entry Grid.Row="2" TextColor="Black" />
<Label Grid.Row="3"
Text="Send a new code"
TextColor="{StaticResource NGIC_Red}"
FontSize="{StaticResource Font14}"
FontFamily="{StaticResource HNMedium}"/>
<StackLayout Grid.Row="4" >
<Button Text="Next"
TextColor="{StaticResource White}"
BackgroundColor="{StaticResource NGIC_Red}"
CornerRadius="15"
WidthRequest="300"
HeightRequest="40"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
FontFamily="{StaticResource HNBold}"
FontSize="{StaticResource Font14}"/>
<Button Text="Cancel"
TextColor="{StaticResource NGIC_Red}"
BackgroundColor="{StaticResource White}"
CornerRadius="15"
WidthRequest="300"
HeightRequest="40"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
FontFamily="{StaticResource HNRegular}"
FontSize="{StaticResource Font14}"
BorderColor="{StaticResource NGIC_Red}"
BorderWidth="1"/>
</StackLayout>
</Grid>
</StackLayout>
</Frame>

Different TapGestureRecognizer for each row

<ContentView>
<Grid InputTransparent="True">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackLayout Spacing="0"
Grid.Row="0"
VerticalOptions="Center">
<Label Text="Algebra"/>
<Label Text="number 1" />
</StackLayout>
<Switch IsToggled="True"
VerticalOptions="Center"
Grid.Row="1"
Grid.Column="1"
/>
<StackLayout Spacing="0"
Grid.Row="1"
VerticalOptions="Center">
<Label Text="Arithmetics" />
<Label Text="number 2" />
</StackLayout>
<Switch IsToggled="True"
VerticalOptions="Center"
Grid.Column="1"
/>
</Grid>
</ContentView>
I have two rows with each having 2 labels and a switch. How can I invoke two different Tap events, for each row. Something like this:
<ROW1?.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped1" />
</ROW?.GestureRecognizers>
<ROW2?.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapped2" />
</ROW?.GestureRecognizers>
I'm new, but it seems Switch toggle doesn't work while in grid, which is strange.
UI image:
Since you can't simply apply a gesture to an entire grid row,
I decided to just use Switch built-in functionality for my UI.
And all I did was add two different methods for each Switch:
<Grid InputTransparent="True">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackLayout Spacing="0"
Grid.Row="0"
VerticalOptions="Center">
<Label Text="Algebra"/>
<Label Text="number 1" />
</StackLayout>
<Switch IsToggled="True"
Toggled="method2"
VerticalOptions="Center"
Grid.Row="1"
Grid.Column="1"
/>
<StackLayout Spacing="0"
Grid.Row="1"
VerticalOptions="Center">
<Label Text="Arithmetics" />
<Label Text="number 2" />
</StackLayout>
<Switch IsToggled="True"
Toggled="method2"
VerticalOptions="Center"
Grid.Column="1"
/>
</Grid>

Xamarin Forms Label & Entry on one line using XAML

I am trying to flatten the area in my ListView so that the Label & Entry appear next to each other. I've tried many approaches unsuccessfully.
Can someone show me the XAML for this?
THE XAML:
Using the following XAML...
<telerikDataControls:RadListView x:Name="listSeals" ItemsSource="{ Binding Seals }" IsVisible="True">
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<Grid BackgroundColor="{Binding rowID, Converter={ StaticResource ListViewRowBackgroundColorConverter }}">
<Grid.RowDefinitions>
<RowDefinition Height="150"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Label Text="{Binding CategoryName}" />
</Grid>
<Grid Grid.Column="1">
<StackLayout>
<Label Text="Off" />
<Entry x:Name="txtOff" Text="{Binding OffItem.SamplePotSealCode}" TextChanged="TxtOff_TextChanged" Style="{StaticResource FormEntryStyle}" HorizontalOptions="FillAndExpand"></Entry>
<Label Text="On" />
<Entry x:Name="txtOn" Text="{Binding OnItem.SamplePotSealCode}" TextChanged="TxtOn_TextChanged" Style="{StaticResource FormEntryStyle}" HorizontalOptions="FillAndExpand"></Entry>
</StackLayout>
</Grid>
</Grid>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
THE CURRENT LAYOUT:
Notice how the OFF & ON labels "stack"...
THE DESIRED LAYOUT:
I want the the OFF & ON labels "lay next to" the Entry...
You can achieve the layout you're trying to with a Grid layout with 3 column definitions and 2 row definitions.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding CategoryName}" />
<Label Grid.Row="0" Grid.Column="1" Text = "Off" />
<Label Grid.Row="1" Grid.Column="1" Text="On" />
<Entry Grid.Row="0" Grid.Column="2" Text="{Binding OffItem.SamplePotSealCode}" />
<Entry Grid.Row="1" Grid.Column="2" Text="{Binding OnItem.SamplePotSealCode}" />
</Grid>
You may need to play with Horizontal- and VerticalOptions to make it display exactly how you want. This should give an idea of how to structure it into a single Grid layout.
You need a nested stack layout with horizontal orientation:
<telerikDataControls:RadListView x:Name="listSeals"
ItemsSource="{ Binding Seals }"
IsVisible="True">
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<telerikListView:ListViewTemplateCell.View>
<!-- Previous Code -->
<Grid Grid.Column="1">
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Off" />
<Entry x:Name="txtOff"
Text="{Binding OffItem.SamplePotSealCode}"
TextChanged="TxtOff_TextChanged"
Style="{StaticResource FormEntryStyle}"
HorizontalOptions="StartAndExpand">
</Entry>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="On" />
<Entry x:Name="txtOn"
Text="{Binding OnItem.SamplePotSealCode}"
TextChanged="TxtOn_TextChanged"
Style="{StaticResource FormEntryStyle}"
HorizontalOptions="StartAndExpand">
</Entry>
</StackLayout>
</StackLayout>
</Grid>
</Grid>
</telerikListView:ListViewTemplateCell.View>
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
You may also need to mess with the Horizontal options to get the correct spacing/layout.

Xamarin Portable Comments Stacklayout height problems Listview

I am having trouble with height problems in Xamarin PCL with Listview. I want to create a comments section in a scrollable page. But i am struggling with the height of the comments. It just wont expand.
Row.Definition = Auto for the Grid:
<StackLayout Grid.Row="4" Padding="0,20,0,0">
<ListView ItemsSource="{Binding CommentsMVVM}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:CommentsRow />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
In the CommentsRow template:
<Grid RowSpacing="0" ColumnSpacing="14" Padding="20" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.RowSpan="3" Source="{ Binding Image }" VerticalOptions="Start" />
<Label Grid.Column="1" Grid.Row="0" Text="{ Binding UserName }" VerticalOptions="EndAndExpand" TextColor="Blue" />
<Label Grid.Column="1" Grid.Row="1" Margin="0,4,0,0" Text="{ Binding CreatedAt }" TextColor="Grey" FontSize="13" />
<StackLayout Grid.Column="1" Grid.Row="2" Spacing="30" x:Name="StackLayoutMap" VerticalOptions="FillAndExpand" />
</Grid>
And at the C#:
public CommentsRow()
{
InitializeComponent();
var html_label = new HtmlFormattedLabel()
{
TextColor = Color.Black,
FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)),
};
html_label.SetBinding(HtmlFormattedLabel.TextProperty, "Memo");
this.StackLayoutMap.Children.Add(html_label);
}
But the StackLayout comments text just wont expand automatically. What am i doing wrong?