I have a problem with showing binded data in same row.
I want to show it like this:
2018-01-01 - 2018-01-07
<Label Text="{Binding ChartDate, StringFormat='{0:d}'}"></Label>
<Label Text="-"></Label>
<Label Text="{Binding ChartDateTo, StringFormat='{0:d}'}" ></Label>
How's that done? I tried to move the second binding to first label but then nothing shows
Try this:
<StackLayout Orientation="Horizontal">
<StackLayout.Children>
<Label Text="{Binding ChartDate, StringFormat='{0:d}'}"></Label>
<Label Text="-"></Label>
<Label Text="{Binding ChartDateTo, StringFormat='{0:d}'}" ></Label>
</StackLayout.Children>
</StackLayout>
Related
Within a grid I want to display 2 labels next to each other. A static label of "Reason:" and a bound label that displays the reason description, like so;
<StackLayout
Grid.Row="4" Grid.Column="3"
Spacing="0" Orientation="Horizontal" HorizontalOptions="StartAndExpand">
<Label
Text="{i18n:Translate reason}" HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Style="{StaticResource ListSubItemStyle}" Margin="0,0,10,0" />
<Label
Text="{Binding ReasonCodeDescription}" HorizontalOptions="StartAndExpand"
HorizontalTextAlignment="Start" LineBreakMode="TailTruncation"
Style="{StaticResource ListSubItemStyle}" Margin="0,0,0,0" />
</StackLayout>
When the ReasonCodeDescription is longer than the space left on the line it causes the "reason" label to wrap to a new line;
I have tried altering the "spacing", "margin", "padding", "horizontal*" attributes and different "linebreakmode"s to no avail.
I want it to look like the first line albeit with the extra wording truncated;
You have "StartAndExpand" on the wrong label. You have told second label to be "greedy" when there is a conflict. Move that to first label:
<Label Text="{i18n:Translate reason}" HorizontalOptions="StartAndExpand"
<Label Text=... HorizontOptions="Start"
If that doesn't fix, use nested Grid:
<Grid Grid.Row="4" Grid.Column="3" ColumnDefinitions="Auto,*" />
<Label Grid.Column="0" Text="{i18n:Translate reason}" .. />
<Label Grid.Column="1" Text.. />
</Grid>
Using a ListView in Xamarin, Most of the time, it works well, but for some items, I get a rendering issue, items in the StackLayout are overlapping (stacking on Z axis instead of Y axis!), I am wondering what could cause that:
It seems to happen when cells are recycled to a different height that they initially had.
The xaml is quite simple, a binding for the ListView (grouped) and itemtemplate:
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10,5" BackgroundColor="{Binding BackgroundColor}">
<!-- The following IsVisible property is probably what cause
the change of height of cells, and when recycled,
the cells do not resize well -->
<Label Text="{Binding Date}" TextColor="Black" LineBreakMode="NoWrap"
IsVisible="{Binding Date,Converter={StaticResource INNTBC}}" Style="{DynamicResource ListItemTextStyle}" FontSize="12" />
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Participant.FirstName}" TextColor="Black" LineBreakMode="NoWrap" Style="{DynamicResource ListItemTextStyle}" FontSize="16" />
<Label Text="{Binding Participant.LastName}" TextColor="Black" ineBreakMode="NoWrap" Margin="5,0,0,0" Style="{DynamicResource ListItemTextStyle}" FontSize="16" />
<Label Text="{Binding Participant.BirthDate}" TextColor="Black" LineBreakMode="NoWrap" Margin="5,0,0,0" Style="{DynamicResource ListItemTextStyle}" FontSize="12" />
</StackLayout>
<StackLayout HeightRequest="1" BackgroundColor="LightGray" Margin="20,1,20,1" HorizontalOptions="CenterAndExpand"></StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
Any clue?
The issue comes from CachingStrategy="RecycleElement" applied to the ListView. The height is not well recalculated when recycled.
This is not optimal but at the end I solved it by setting a RowHeight to the ListView.
I have implemented a listview and in each item I want to have two labels, in each end horizontally. But in reality it just put the two labels next to eachother left aligned.
I read that maybe this is not possible with a stacklayout, as it doesn't take up more space than needed. (Even tried fill and fillandExpand which didn't help.)
Instead I should use a grid. But I have options on my listview, as grouping, refresh, caching, tapped, which I guess I don't have on a grid?
I would like to succeed with a listview if that is possible. Anyone have some insights to this layout issue?
Here is my xaml code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Page.ItemsTest">
<ListView x:Name="ItemView"
ItemsSource="{Binding ItemGroup}"
CachingStrategy="RecycleElement"
IsGroupingEnabled="true"
HasUnevenRows="True"
ItemTapped="Handle_ItemTapped">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="#FFA500" Orientation="Vertical" Padding="10">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Heading}" TextColor="White" FontAttributes="Bold" />
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="10" HorizontalOptions="FillAndExpand">
<Label Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
<Label Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
Central part is this:
<StackLayout Orientation="Horizontal" Padding="10" HorizontalOptions="FillAndExpand">
<Label Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
<Label Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
</StackLayout>
Update:
As requested I have a colored the background of the two labels and the stacklayout. It's the same output if I use HorizontalOptions="End" and HorizontalTextAlignment="End" at the same time or each one alone. Also if I remove the HorizontalOptions="FillAndExpand" on the stacklayout, it's still the exact same graphical output. (The orange color was already present)
Maybe you could use a Grid instead of the StackLayout and place each Label in a different Column:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding Name}" FontAttributes="Bold" HorizontalTextAlignment="Start"/>
<Label Grid.Column="1" Text="{Binding Start, StringFormat='{0:HH:mm}'}" FontAttributes="Bold" HorizontalTextAlignment="End"/>
</Grid>
You could also use nested StackLayout
<StackLayout>
<Label />
<Label Text="Gender:" FontAttributes="Bold"/>
<StackLayout Orientation="Horizontal">
<Label HorizontalOptions="Start" Text="First Name: " FontAttributes="Bold"/>
<Entry HorizontalOptions="EndAndExpand" Placeholder="First Name" MaxLength="256" Text="{Binding FirstName}"></Entry>
</StackLayout>
</StackLayout>
I'm trying to horizontally center a StackLayout within a ScrollView. However, the StackLayout isn't horizontally centered (it's left aligned). I tried centering the ScrollView but then the whole view is not scrollable - only the center section is.
<ScrollView BackgroundColor="Teal">
<StackLayout Spacing="5"
Padding="30"
WidthRequest="400"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
BackgroundColor="Transparent">
<Label Text="Test"/>
<Label Text="Test"/>
<Label Text="Test"/>
<Label Text="Test"/>
</StackLayout>
</ScrollView>
The centering works with 2 nested StackLayout elements, but it doesn't with the ScrollView. Any ideas?
You have a couple of options, and each Label in the example below should show up centered.
The key thing is that the StackLayout bases its layout on its contents. You'd think that you could center the whole StackLayout the way you did, but at least as the content of a ScrollView, it doesn't work that way. But centering the children of that StackLayout will center within the ScrollView:
<ScrollView BackgroundColor="Teal">
<StackLayout Spacing="5"
Padding="30"
WidthRequest="400"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
BackgroundColor="Transparent">
<Label Text="Test" HorizontalOptions="Center"/>
<StackLayout HorizontalOptions="Center">
<Label Text="Test"/>
</StackLayout>
</StackLayout>
</ScrollView>
The HorizontalOptions on the outer StackLayout does not seem to have any impact in this situation, but I would use FillAndExpand as a way to document the intent to fill the entire horizontal space of the ScrollView.
The way that StackLayout works is that it Fills in one axis while splitting the space available in the other axis for all child elements. It does not autosize on the "filled" axis (horizontal in this case), and therefore centering the element on that axis will not produce any results.
However you can achieve the desired layout using a Grid and possibly using other layout models as well.
Using a Grid:
<ScrollView BackgroundColor="Teal">
<Grid HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="1" Grid.Row="0" Text="Test"/>
<Label Grid.Column="1" Grid.Row="1" Text="Test"/>
<Label Grid.Column="1" Grid.Row="2" Text="Test"/>
<Label Grid.Column="1" Grid.Row="3" Text="Test"/>
<Label Grid.Column="1" Grid.Row="4" Text="Test"/>
<Label Grid.Column="1" Grid.Row="5" Text="Test"/>
<Label Grid.Column="1" Grid.Row="6" Text="Test"/>
<Label Grid.Column="1" Grid.Row="7" Text="Test"/>
<Label Grid.Column="1" Grid.Row="8" Text="Test"/>
<Label Grid.Column="1" Grid.Row="9" Text="Test"/>
<Label Grid.Column="1" Grid.Row="10" Text="Test"/>
<Label Grid.Column="1" Grid.Row="11" Text="Test"/>
<Label Grid.Column="1" Grid.Row="12" Text="Test"/>
<Label Grid.Column="1" Grid.Row="13" Text="Test"/>
<Label Grid.Column="1" Grid.Row="14" Text="Test"/>
<Label Grid.Column="1" Grid.Row="15" Text="Test"/>
<Label Grid.Column="1" Grid.Row="16" Text="Test"/>
<Label Grid.Column="1" Grid.Row="17" Text="Test"/>
<Label Grid.Column="1" Grid.Row="18" Text="Test"/>
<Label Grid.Column="1" Grid.Row="19" Text="Test"/>
<Label Grid.Column="1" Grid.Row="20" Text="Test"/>
<Label Grid.Column="1" Grid.Row="21" Text="Test"/>
<Label Grid.Column="1" Grid.Row="22" Text="Test"/>
<Label Grid.Column="1" Grid.Row="23" Text="Test"/>
<Label Grid.Column="1" Grid.Row="24" Text="Test"/>
<Label Grid.Column="1" Grid.Row="25" Text="Test"/>
<Label Grid.Column="1" Grid.Row="26" Text="Test"/>
<Label Grid.Column="1" Grid.Row="27" Text="Test"/>
<Label Grid.Column="1" Grid.Row="28" Text="Test"/>
<Label Grid.Column="1" Grid.Row="29" Text="Test"/>
<Label Grid.Column="1" Grid.Row="30" Text="Test"/>
<Label Grid.Column="1" Grid.Row="31" Text="Test"/>
<Label Grid.Column="1" Grid.Row="32" Text="Test"/>
<Label Grid.Column="1" Grid.Row="33" Text="Test"/>
<Label Grid.Column="1" Grid.Row="34" Text="Test"/>
<Label Grid.Column="1" Grid.Row="35" Text="Test"/>
<Label Grid.Column="1" Grid.Row="36" Text="Test"/>
<Label Grid.Column="1" Grid.Row="37" Text="Test"/>
<Label Grid.Column="1" Grid.Row="38" Text="Test"/>
<Label Grid.Column="1" Grid.Row="39" Text="Test"/>
</Grid>
</ScrollView>
<ListView
ItemsSource="{Binding Messages}"
Grid.ColumnSpan="2"
HeightRequest="100">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<Label
Text="{Binding When}"
XAlign="Center"/>
<StackLayout
BackgroundColor="Gray"
Orientation="Vertical"
VerticalOptions="Center">
<Label
Text="{Binding Message}"
XAlign="Start"/>
<Label
Text="{Binding Sender}"
XAlign="Start"
TextColor="Red"/>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I am rendering a custom ListView in Xamarin.Forms application. The StackLayout which contains two Labels (to which "Message" and "Sender" has been bound), currently displays only one child. With the code above, it displays only "Message". If I change code to be
<StackLayout
BackgroundColor="Gray"
Orientation="Vertical"
VerticalOptions="Center">
<Label
Text="{Binding Sender}"
XAlign="Start"
TextColor="Red"/>
<Label
Text="{Binding Message}"
XAlign="Start"/>
</StackLayout>
it displays only sender. In short it is displaying only first child. What have I done wrong here ?
Issue was similar to what #Grisha had pointed out. RowHeight was proving to be lesser, and the second StackLayout was getting clipped.
The solution was to set HasUnevenRows property of the ListView to be TRUE. Thus, RowHeight was calculated automatically.