We Keep Coding

Xamarin Forms Binding String Array to BindableLayout only works after Xaml Hot Reload

I am having issues binding the values of a string[] to the DataTemplate of a BindableLayout. I have recreated the issue in the AboutPage of the Shell Flyout Template.
AboutPage.xaml
<ContentPage.BindingContext>
<vm:AboutViewModel />
</ContentPage.BindingContext>
<StackLayout VerticalOptions="Center"
Padding="20"
BindableLayout.ItemsSource="{Binding Data}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label FontSize="Large"
Text="{Binding .}"
BackgroundColor="PowderBlue"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
AboutViewModel.cs
namespace App2.ViewModels
{
public class AboutViewModel : BaseViewModel
{
private string[] _data;
public string[] Data
{
get
{
return _data;
}
set
{
if (_data != value)
{
_data = value;
OnPropertyChanged();
}
}
}
public AboutViewModel()
{
Title = "About";
Data = new string[] { "One", "Two", "Three" };
}
}
}
When the page first opens, the the correct number of labels are there but without any text.
If I edit the Text="{Binding .}" the binding works after Xaml Hot Reload.
Why on earth are the strings not being displayed in the first place when they're clearly not empty or null?

I have solved this problem in an unexpected way. Simply by moving the DataTemplate into its own file, this problem goes away. Can someone please explain to me why this works? My new code produces two StackLayouts side by side, bound to the same data but only the Stackview on the right, with its DataTemplate defined elsewhere as ListItemView.xaml shows the data when the app is run. The StackView on the left has empty Labels at first, then after I delete the full-stop (.) from Text="{Binding .}" and replace it, Xaml Hot Reload runs and the strings are displayed.
ListItemView.xaml
<DataTemplate xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App2.Views.ListItemView">
<Label FontSize="Large"
Text="{Binding ., Mode=OneWay}"
BackgroundColor="PowderBlue"/>
</DataTemplate>
AboutPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App2.Views.AboutPage"
xmlns:vm="clr-namespace:App2.ViewModels"
xmlns:views="clr-namespace:App2.Views"
Title="{Binding Title}"
x:DataType="vm:AboutViewModel">
<ContentPage.BindingContext>
<vm:AboutViewModel />
</ContentPage.BindingContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<StackLayout VerticalOptions="Center"
Padding="20"
BindableLayout.ItemsSource="{Binding Data}"
Grid.Column="0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label FontSize="Large"
Text="{Binding ., Mode=OneWay}"
BackgroundColor="PowderBlue"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<StackLayout VerticalOptions="Center"
Padding="20"
BindableLayout.ItemsSource="{Binding Data}"
Grid.Column="1">
<BindableLayout.ItemTemplate>
<views:ListItemView />
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</ContentPage>

I solved this in a similar way. I did create a separate DataTemplate, but not in its own file. The addition I made was to add an x:DataType attribute.
<DataTemplate x:Key="myLabel" x:DataType="x:String">
<StackLayout>
<Label Text="{Binding .}" />
</StackLayout>
</DataTemplate>

How come the 3rd label and the button is not showing up in the UI? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm learning Xamarin.Forms and the MVVM pattern, which includes data binding. I don't understand why after the 2nd label, nothing else shows up, but the breakpoint is hit for Str_Winner and the content of that string is as I expect the value to be.
Page_History.xaml is as follows:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local1="clr-namespace:TicTacToe.ViewModel"
x:Class="TicTacToe.View.Page_History">
<ContentPage.Resources>
<ResourceDictionary>
<local1:VM_GameInfo x:Key="VM_GameInfo"/>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout BindingContext="{StaticResource VM_GameInfo}">
<ListView ItemsSource="{Binding GameHistory}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<Label Text="{Binding Str_Title}" />
<Label Text="{Binding SaveDateTime}" />
<Label Text="{Binding Str_Winner}" />
<Button Text="Something"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
My code is here: https://drive.google.com/file/d/1w1TL0am6VeS2dLgsesiQT_S2h0L7Lo1H/view?usp=sharing

Give a RowHeight="150" or set HasUnevenRows="True" to the listView:
<ListView ItemsSource="{Binding GameHistory}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<Label Text="{Binding Str_Title}" />
<Label Text="{Binding SaveDateTime}" />
<Label Text="{Binding Str_Winner}" />
<Button Text="Something"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Xamarin.Forms ListView AutoHeight in XAML

I have ListView with ViewCell and it's ViewCell contains Label with huge text. How can I make an auto-height ViewCell???
Screenshot of issue
My XAML code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Physis.Movements_And_Interactions_Page" xmlns:local="clr-namespace:Physis">
<ContentPage.ToolbarItems>
<ToolbarItem x:Name="settings" Text="{Binding settings_text}" Clicked="Handle_Clicked"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout Margin="20,35,20,20" x:Name="Main_View2" >
<ListView x:Name="Main_Menu" ItemsSource="{Binding Planets}" ItemSelected="Handle_ItemSelected" ItemTapped="Handle_ItemTapped" BackgroundColor="{DynamicResource Key=backgroundColor}" SeparatorColor="{DynamicResource Key=textColor}">
<ListView.ItemTemplate>
<DataTemplate >
<ViewCell >
<StackLayout Orientation="Vertical" >
<Label Text="{Binding Name}" StyleClass="Body"/>
<Label Text="{Binding Description}" StyleClass="Body"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout >
</ContentPage.Content>
Thanks everyone!

Set HasUnevenRows="true" on your ListView. See documentation here https://learn.microsoft.com/en-us/dotnet/api/Xamarin.Forms.ListView.HasUnevenRows?view=xamarin-forms

Xamarin forms: Listview: Itemtemplate: Datatemplate: I dont have TextCell in xaml

I have a problem. In Datatemplate i cant reach TextCell in xaml. Anybody can help me?
<?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="Spirocco.MedicationPage"
Title="Gyógyszerek">
<ContentPage.Content>
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
Update: I reach it but the VS dont show it.
In first answer there is a solution.

<StackLayout>
<ListView x:Name="Medications" ItemsSource="{Binding Medications}">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell ImageSource="{Binding Icon}" Text="{Binding Name}" Detail="{Binding Type}" Tapped="ImageCell_Tapped"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>

How to add buttons underneath a Xamarin.Forms list view

Hello I have an app i'm doing in xamrian forms and I have a card styled list view. I want to be able to add 3 buttons underneath the listview one on the left one in the center and one on the right
here's my xaml:
<?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="App.HomePage">
<ListView x:Name="listView" HasUnevenRows="true" ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="0,0,0,8" BackgroundColor="#d2d5d7">
<Frame.Content>
<Frame Padding="15,15,15,15" OutlineColor="Gray" BackgroundColor="White">
<Frame.Content>
<StackLayout Padding="20,0,0,0" Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Image
HorizontalOptions="StartAndExpand"
Source="{Binding Image}" />
<Label Text="{Binding Name}"
TextColor="#69add1"
FontFamily="OpenSans-Light"
FontSize="24"/>
</StackLayout>
</Frame.Content>
</Frame>
</Frame.Content>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
How would I go about doing this in xaml?
Thank's in advance! :)

Try this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Sandbox_Forms"
x:Class="Sandbox_Forms.MainPage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" BackgroundColor="Aqua">
<!-- Add bindings and data template -->
</ListView>
<StackLayout Orientation="Horizontal" Grid.Row="1">
<Button Text="Button1" HorizontalOptions="FillAndExpand"/>
<Button Text="Button2" HorizontalOptions="FillAndExpand"/>
<Button Text="Button3" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</Grid>
</ContentPage>
This will limit your ListView to only fill the space that your buttons do not occupy. The output should look something like this:

<StackLayout>
<ListView>
...
</ListView>
<StackLayout Orientation="Horizontal">
<Button ... />
<Button ... />
<Button ... />
</StackLayout>
</StackLayout>