ListView displays data only after it is played - xaml

I'm having a hard time with XAML in Xamarin. Forms: The page is called and displayed without loading the data from the ListView (although the ListView is rendered because it changes the background color in its region).
Then, after I give a touch in the area of the ListView the data is presented i.e. initially the ListView shows nothing and after my touch on the screen it displays the data. However I have no event calling any refresh. I have already made sure of the code that the data is being received by it in a correct manner. Does anyone have any suggestions?
The following is the XAML code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Coletas.Layouts.DetalheColeta">
<ContentPage.ToolbarItems>
<ToolbarItem Name="itemVisualizar" Order="Primary" Icon="pesquisar.png" Text="Visualizar" Priority="0" />
</ContentPage.ToolbarItems>
<ListView x:Name="Coleta" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#FFCC80">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Coleta, StringFormat='Coleta {0:000000}'}" FontAttributes="Bold" FontSize="12"/>
<Label Text="{Binding Remetente}" FontAttributes="Bold" FontSize="12"/>
<Label Text="{Binding EnderecoRem}"/>
<Label Text="{Binding BairroRem}"/>
<Label Text="{Binding CidadeRem}"/>
<Label Text="{Binding ReferenciaRem}"/>
<Label Text="{Binding Destinatario}" FontAttributes="Bold" FontSize="12"/>
<Label Text="{Binding CidadeDes}"/>
<StackLayout Orientation="Horizontal" >
<Label Text="{Binding Peso, StringFormat='Peso: {0:0.00}'}"/>
<Label Text=" "/>
<Label Text="{Binding Quantidade, StringFormat='Volume: {0:0.00}'}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
The code that calls the DetalheColeta page is the below. This code is on another separate page:
private void GradeColetas_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as GridList;
if (item != null)
{
var id = item.Coleta;
Navigation.PushAsync(new DetalheColeta(id));
((ListView)sender).SelectedItem = null;
};
}
Any idea?

Discovered! The problem is in the constructor of the DetalheColeta page when using the Task. There is nothing wrong with the XAML and the previous page call. I executed the program in UWP and the message appeared: "The application called an interface that was marshalled for a different thread". I was testing in the Xamarin Live Player and did not give error. When correcting the call came to work.
Before:
public DetalheColeta (int collection)
{
InitializeComponent ()
Coleta_DetalheAsync (Collection)
}
Now:
public DetalheColeta (int collection)
{
InitializeComponent ()
Coleta_DetalheAsync (collection).Wait ();
}
Before:
Private async void Coleta_DetalheAsync (int collection)
{
Code
}
Now:
Private async Task Coleta_DetalheAsync (int collection)
{
Code
}

Related

Workaround for ScrollView not scrolling inside a StackLayout in Maui

I have a page that presents a list of items in a CollectionView within a ScrollView. I want the user to be able to add a new item to this list by hitting an "add" button or tapping an image at the top of the page. I first tried this using the hierarchy of views shown below. The code below is an abbreviated version of the real thing. I discovered that putting a ScrollView within a VerticalStackLayout breaks the scrolling in Maui! Here is the reported bug.
I tried deleting the VerticalStackLayout that precedes the ScrollView and the scrolling still doesn't work.
<ContentPage.Content>
<VerticalStackLayout>
<VerticalStackLayout HorizontalOptions="Center">
<Image Source="add.png">
<ImageGestureRecongnizers>
<TapGestureRecognizer... Code to add new item to MyCollection...]/>
</ImageGestureRecognizers>
</Image>
</VerticalStackLayout>
<ScrollView>
<CollectionView ItemsSource="{Binding MyCollection}">
<CollectionView.ItemTemplate>
<DataTemplate>
[Layout for displaying items in MyCollection...]
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
<VerticalStackLayout
</ContentPage.Content>
I'd greatly appreciate suggestions on a workaround to allow the viewing of the scrollable list and adding an item to the list by tapping an object (button or image) that's always visible on the page regardless of how the list is scrolled.
Actually for the Xaml, this will work...
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppTest01.MainPage">
<Grid RowDefinitions="30,*">
<CollectionView ItemsSource="{Binding MyCollection}"
Grid.Row="1">
<CollectionView.ItemTemplate>
<DataTemplate>
<VerticalStackLayout >
<Label Text="{Binding Name}" FontSize="Large" />
</VerticalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Image Source="dotnet_bot.png" HeightRequest="100" WidthRequest="100"
Margin="0,0,50,20">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
</Grid>
Adjust your RowDefinition(30) for the image!
Sorry if my code is not neat, as I'm on mobile.
I ended up creating a "fancy" floating button on the bottom right of the page by:
Creating a one-row Grid
Putting both the CollectionView and Image in the one row
Defining the Image after the CollectionView so that the Image sits on top of the CollectionView
I also got rid of the ScrollView per Jason's suggestion.
<ContentPage.Content>
<Grid
<CollectionView ItemsSource="{Binding MyCollection}">
<CollectionView.ItemTemplate>
<DataTemplate>
[Layout for displaying items in MyCollection...]
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Image Source="add.png" HeightRequest="40" HorizontalOptions="End"
VerticalOptions="End" Margin="0,0,50,20">
<ImageGestureRecongnizers>
<TapGestureRecognizer... Code to add new item to MyCollection...]/>
</ImageGestureRecognizers>
</Image>
</Grid>
</ContentPage.Content>
If you want to allow the viewing of the scrollable list and add items to the list by tapping an image, you can just wrap them with a Grid.
Here's the code snippet below for your reference:
XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppTest01.MainPage">
<Grid>
<CollectionView ItemsSource="{Binding MyCollection}">
<CollectionView.ItemTemplate>
<DataTemplate>
<VerticalStackLayout >
<Label Text="{Binding Name}" FontSize="Large" />
</VerticalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Image Source="dotnet_bot.png" HeightRequest="100" WidthRequest="100" HorizontalOptions="End" VerticalOptions="End" Margin="0,0,50,20">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</ContentPage>
Code-behind:
public partial class MainPage : ContentPage
{
public ObservableCollection<MyModel> MyCollection { get; set; }
public MainPage()
    {
            InitializeComponent();
MyCollection = new ObservableCollection<MyModel>
{
new MyModel{ Name="1"},
new MyModel{ Name="2"},
};
BindingContext = this;
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
for (int i = 0; i < 10; i++) {
MyCollection.Add(new MyModel { Name = i+"" });
}
}
}
Model:
public class MyModel
{
public string Name { get; set; }
}

Is there a way to limit the boundaries of a drag event to the size of the screen?

I'm making a weather application and on one of the pages, users can save cities to quickly look up the weather for that city. I also want them to be able to delete a city in the list by pressing and holding and then dragging it to the delete button on the bottom of the screen.
The problem is that the label for the city name is the width of the entire screen and when you press and hold a city, you automatically grab the center of this label. Because of this, when you press the city name to much to the left of the label, the name disappears outside of the screen.
I can think of 2 possible solutions; make the screen have some kind of boundaries so nothing can disappear or make the label the width of the text within. But I can't find any of these solutions online. Does someone know how to do this or maybe has another solution?
This is the code for the xaml file.
<StackLayout>
<CollectionView x:Name="CitiesListView"
ItemsSource="{Binding Cities}"
SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10" x:DataType="model:City">
<Label Text="{Binding name}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListCityTextStyle}"
FontSize="16" />
<StackLayout.GestureRecognizers>
<DragGestureRecognizer DragStartingCommand="{Binding Path=DragStartingCommand, Source={RelativeSource AncestorType={x:Type local:CitiesViewModel}}}" DragStartingCommandParameter="{Binding .}"/>
<TapGestureRecognizer
NumberOfTapsRequired="1"
Command="{Binding Source={RelativeSource AncestorType={x:Type local:CitiesViewModel}}, Path=CityTapped}"
CommandParameter="{Binding .}">
</TapGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<StackLayout HorizontalOptions="Center" VerticalOptions="FillAndExpand" Padding="5,10,5,10">
<StackLayout.GestureRecognizers>
<DropGestureRecognizer DropCommand="{Binding DropOverCommand}"/>
</StackLayout.GestureRecognizers>
<Image HeightRequest="40"
WidthRequest="40"
Source="trash_icon.png"
HorizontalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
And this is the code for the drag and drop commands
public Command DragStartingCommand => new Command<City>((param) =>
{
var dur = TimeSpan.FromSeconds(0.1);
Vibration.Vibrate(dur);
_dragCity = param;
});
public Command DropOverCommand => new Command(() =>
{
if (Cities.Contains(_dragCity))
{
Cities.Remove(_dragCity);
removeCity(_dragCity);
}
});
public async void removeCity(City city)
{
await DataStore.DeleteCityAsync(city.id);
}
private City _dragCity;
Here is also a link to a video maybe better understand what I am talking about. Video
You could try to set the DragGestureRecognizer for the Label instead of StackLayout. A simple example for your reference. The text of Label would on the point which you pressed.
Xaml:
private async void OnDropGestureRecognizerDragOver(object sender, DragEventArgs e)
{
e.AcceptedOperation = DataPackageOperation.Copy;
}
private async void OnDropGestureRecognizerDrop(object sender, DropEventArgs e)
{
await DisplayAlert("Correct", "Congratulations!", "OK");
//await DisplayAlert("Incorrect", "Better luck next time.", "OK");
}
Code behind:
<StackLayout Margin="20">
<Label Text="Answer the following question by dragging your answer to the Entry." />
<Label Text="What's 2+2?" />
<Grid ColumnDefinitions="0.5*, 0.5*"
Margin="0,20,0,0">
<Label Text="3"
HorizontalOptions="Center">
<Label.GestureRecognizers>
<DragGestureRecognizer />
</Label.GestureRecognizers>
</Label>
<Label Grid.Column="1"
Text="4"
HorizontalOptions="Center">
<Label.GestureRecognizers>
<DragGestureRecognizer />
</Label.GestureRecognizers>
</Label>
</Grid>
<Entry Margin="0,20,0,0"
Placeholder="Drag your answer here">
<Entry.GestureRecognizers>
<DropGestureRecognizer DragOver="OnDropGestureRecognizerDragOver"
Drop="OnDropGestureRecognizerDrop" />
</Entry.GestureRecognizers>
</Entry>
</StackLayout>

Scrolling when there are two CollectionViews in ContentPage

I have two CollectionViews in my ContentPage inside a StackLayout, one above the other. Each binds to a separate ItemsSource. Above each one I have a Label. At this point each one take up 50% of the screen and scrolls separately.
I would like everything to scroll as though it were one long list.
So I surrounded everything with a ScrollView. But then, depending on where you put your finger, the scroll may scroll the entire page (which is what I want) or just the current CollectionView.
It seems like there is no way to cancel the scroll capability of the CollectionView. Is that true? and if not, How should I set up my ContentPage ?
In the below example both CollectionViews have the same model and binding but in reality they will be different.
Here is the xaml:
<RefreshView
x:DataType="local:AllRestaurantsViewModel"
Command="{Binding LoadItemsCommand}"
IsRefreshing="{Binding IsBusy, Mode=TwoWay}">
<ScrollView>
<StackLayout>
<Label
FontSize="Large"
HorizontalOptions="Center"
Text="Suggested Restaurants" />
<CollectionView
x:Name="ItemsListView"
ItemsSource="{Binding SuggestedRestsComments}"
SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10" x:DataType="model:SuggestedRestsComment">
<Label
FontSize="16"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
Text="{Binding restaurantName}" />
<Label
FontSize="13"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
Text="{Binding CityName}" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}"
CommandParameter="{Binding .}"
NumberOfTapsRequired="1" />
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Label
FontSize="Large"
HorizontalOptions="Center"
Text="Existing Restaurants" />
<CollectionView
x:Name="ItemsListView2"
ItemsSource="{Binding SuggestedRestsComments}"
SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10" x:DataType="model:SuggestedRestsComment">
<Label
FontSize="16"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
Text="{Binding restaurantName}" />
<Label
FontSize="13"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
Text="{Binding CityName}" />
<StackLayout.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding Source={RelativeSource AncestorType={x:Type local:ItemsViewModel}}, Path=ItemTapped}"
CommandParameter="{Binding .}"
NumberOfTapsRequired="1" />
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ScrollView>
</RefreshView>
You could have a try with Custom CollectionViewRenderer to achieve that in each platform.
For example, send a mesage in Forms:
void OnButtonClicked(object sender, EventArgs e)
{
MessagingCenter.Send<object>(this, "StopScrollinng");
}
Then in iOS CustomCollectionViewRenderer class stop scrolling:
public class CustomCollectionViewRenderer: CollectionViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<GroupableItemsView> e)
{
base.OnElementChanged(e);
MessagingCenter.Subscribe<object>(this, "StopScrollinng", (sender) =>
{
// Do something whenever the "StopScrollinng" message is received
if (Control != null)
{
NSArray s = Control.ValueForKey(new NSString("_subviewCache")) as NSMutableArray;
UICollectionView c = s.GetItem<UICollectionView>(0);
c.SetContentOffset(c.ContentOffset, true);
}
});
}
}
And in Android CustomCollectionViewRenderer class stop scrolling:
public class CustomCollectionViewRenderer: CollectionViewRenderer
{
public CustomCollectionViewRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<ItemsView> elementChangedEvent)
{
base.OnElementChanged(elementChangedEvent);
MessagingCenter.Subscribe<object>(this, "StopScrollinng", (sender) =>
{
// Do something whenever the "StopScrollinng" message is received
this.DispatchTouchEvent(MotionEvent.Obtain(SystemClock.UptimeMillis(), SystemClock.UptimeMillis(), MotionEventActions.Cancel, 0, 0, 0));
});
}
}
How about this?
In your scrollview set InputTransparent="True" this allows the input to go through to the layer underneath.
<ScrollView InputTransparent="True">
Then leave some white space (background) on the right side of the collection views.
Now when someone swipes in the white space, the entire page scrolls. And when someone swipes inside the collection view, the collection view scrolls.
taken from https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/populate-data
the idea is to not use two separate collectionviews and merge them into one by choosing a datatemplate at runtime
xmlns:controls="clr-namespace:<your namespace>.Controls"
<ContentPage.Resources>
<DataTemplate x:Key="DataTemplate1">
...
</DataTemplate>
<DataTemplate x:Key="DataTemplate2">
...
</DataTemplate>
<controls:DataTemplateSelector1 x:Key="DataTemplateSelector1"
Template1="{StaticResource DataTemplate1}"
Template2="{StaticResource DataTemplate2}" />
</ContentPage.Resources>
namespace <your namespace>.Controls
{
public class DataTemplateSelector1: DataTemplateSelector
{
public DataTemplate Template1 { get; set; }
public DataTemplate Template2 { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
//here you return which template you want to use based on the properties of "item" . e.g you can do item is SomeClass ? Template1 : Template2
}
}
}
<ScrollView>
<CollectionView x:Name="collection" ItemTemplate="{StaticResource DataTemplateSelector1}"></CollectionView>
</ScrollView>

Why is Unfocused event triggered while typing on an Entry?

In my Xamarin Forms application I would like to perform a validation on an Entry element when the user focus it out. Using Completed event only works when the user taps "enter" on the keyboard. I tried to use Unfocused but this event triggers while the user is typing on the Entry element and I really do not understand why.
How could I perform a piece of code only when an Entry element is unfocused?
I've 10 ViewCell elements like this one:
<ViewCell >
<StackLayout Orientation="Horizontal" Padding="13, 5" >
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" Spacing="1">
<Label Text="Matricola" VerticalOptions="Center" HorizontalOptions="StartAndExpand" ></Label>
<Entry x:Name="matricola" Text="{Binding Paziente.MatricolaPaziente, Mode=TwoWay}" HorizontalOptions="FillAndExpand" Completed="Entry_Completed" Unfocused="Entry_Completed" ></Entry>
<Label Text="{Binding RegistrationValidator.MatricolaError, Mode=OneWay}" HorizontalOptions="FillAndExpand" TextColor="IndianRed"></Label>
</StackLayout>
</StackLayout>
</ViewCell>
Code behind:
private async void Entry_Completed(object sender, EventArgs e){
// Some code here
}
Moreover the event triggers with unexpected random senders (other Entry elements, always with e.IsFocused == false)
The Entry focus issue inside ListView seems to occur (on second row of the ListView and onwards) on Android (8.1 and 9.0) (Xamarin.Forms 4.5.0.356).
See also "Entry focus issue inside ListView".
As a workaround, use CollectionView (without ViewCell in ItemTemplate).
Sample without Entry focus issue:
<CollectionView>
<CollectionView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>First</x:String>
<x:String>Second</x:String>
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemTemplate>
<DataTemplate>
<Entry Text="collectionview" Focused="Entry_Unfocused" Unfocused="Entry_Unfocused" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Sample with Entry focus issue in ListView on Android (8.1 and 9.0):
<ListView>
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>First</x:String>
<x:String>Second</x:String>
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Entry Text="listview" Focused="Entry_Unfocused" Unfocused="Entry_Unfocused" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Codebehind for observing the focus events:
void Entry_Unfocused(object sender, FocusEventArgs e)
{
Debug.WriteLine($"Entry_Unfocused:{e.IsFocused}:");
}
void Entry_Focused(object sender, FocusEventArgs e)
{
Debug.WriteLine($"Entry_Focused:{e.IsFocused}:");
}
I tried with a sample forms like this
<ContentPage.Content>
<StackLayout Spacing="20" Padding="15">
<Label Text="Text" FontSize="Medium" />
<Entry Text="{Binding Item.Text}" d:Text="Item name" FontSize="Small" Unfocused="Entry_Unfocused" Completed="Entry_Completed" />
<Label Text="Description" FontSize="Medium" />
<Editor Text="{Binding Item.Description}" d:Text="Item description" FontSize="Small" Margin="0" />
</StackLayout>
</ContentPage.Content>
And in the code behind:
private void Entry_Unfocused(object sender, FocusEventArgs e)
{
var txt = ((Entry)sender).Text;
DisplayAlert("Info", $"Value of text after entry lost focus : {txt} ", "OK");
}
private void Entry_Completed(object sender, EventArgs e)
{
var txt = ((Entry)sender).Text;
DisplayAlert("Info", $"Value when Enter Key is tapped : {txt} ", "OK");
}
Everything works fine! While looking into your code again, it seems your are in listview. Maybe the problem might come from there.
I believe the Unfocused event gets triggered regardless of focus or unfocus, but the FocusEventArgs on the event should have a bool called IsFocused which should show whether or not the Entry is still focused. Have you tried checking that? It looks like you Unfocused Event Handler just uses a generic EventArgs when it could be using the more specific FocusEventArgs
Unfocused event is raised whenever the Entry loses focus. I make a simple code to test and verify.
Xaml:
<ListView ItemsSource="{Binding list}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Entry Text="{Binding Name}" Unfocused="Entry_Unfocused" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Code:
public partial class EntryPage : ContentPage
{
public ObservableCollection<Person> list { get; set; }
public EntryPage()
{
InitializeComponent();
list = new ObservableCollection<Person>()
{
new Person (){ Name="A"},
new Person (){ Name="B"}
};
this.BindingContext = this;
}
private void Entry_Unfocused(object sender, FocusEventArgs e)
{
}
}
public class Person
{
public string Name { get; set; }
}

Xamarin Forms - My ContentPresenter won't show its Content

I'm still getting used to Xamarin Forms, so I have the following control called PopupFrame:
PopupFrame.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class PopupFrame : ContentView
{
public static readonly BindableProperty PopupContentProperty =
BindableProperty.Create(nameof(PopupContent), typeof(View), typeof(PopupFrame));
public View PopupContent
{
get { return (View)GetValue(PopupContentProperty); }
set { SetValue(PopupContentProperty, value); }
}
public PopupFrame()
{
InitializeComponent();
}
}
PopupFrame.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestApp.Core.Controls.PopupFrame">
<Frame>
<StackLayout>
<Label Text="--- TEST TITLE ---" />
<ContentPresenter Content="{TemplateBinding PopupContent}" />
</StackLayout>
</Frame>
</ContentView>
In my view:
<popCtl:PopupFrame HorizontalOptions="Center"
VerticalOptions="Center">
<popCtl:PopupFrame.PopupContent>
<ListView x:Name="ListUsers">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Label Text="{Binding Name}"
HorizontalOptions="CenterAndExpand"
VerticalOptions="Center" />
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</popCtl:PopupFrame.PopupContent>
</popCtl:PopupFrame>
So what's happening is that When the ContentView control shows, only the Label (with the text -- TEST TITLE -- is displayed, but not the ListView).
I've also tried replacing the ContentPreseter with a ContentView, but same result: my ListView doesn't not show. And I made sure that data does in fact exist in the ItemsSource of the ListView (set in code-behind).
Is my ContentView setup wrong??
TemplateBinding can only be used to bind from inside a control-template. In order for your binding to work - you can use ReferenceExtension to refer to parent control.
For ex, update your binding as following:
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestApp.Core.Controls.PopupFrame"
x:Name="_parent">
<Frame>
<StackLayout>
<Label Text="--- TEST TITLE ---" />
<ContentPresenter
Content="{Binding Path=PopupContent, Source={x:Reference _parent}}" />
</StackLayout>
</Frame>
</ContentView>