Develop Reference

Xamarin Forms having trouble centering a collectionview

I have a collection view like so:
<CollectionView ItemsSource="{Binding subCategories}" ItemsLayout="HorizontalGrid, 3" IsVisible="{Binding isCollection}" HeightRequest="250" SelectionMode="Single" SelectionChanged="CollectionView_SelectionChanged" HorizontalOptions="FillAndExpand">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Spacing="8" HorizontalOptions="FillAndExpand">
<Frame BorderColor="LightGray" HasShadow="True" HeightRequest="20" Margin="20" Padding="20">
<Label Text="{Binding name}" TextColor="#02cc9d" FontAttributes="Bold"></Label>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
And this is the result:
There are 2 things I am trying to do here, the first is center this collection view, I have tried all the HorizontalOptions on the StackLayout and on the CollectionView. The other thing that I bothering me is when an item is selected, the grey box that appears to indicate an item is selected is also not centered, how do I fix this collection view to make it look nicer?

A HorizontalGrid layout is one that grows horizontally as needed. It may be difficult to center horizontally, because it is prepared to grow horizontally if you add more items.
Try ItemsLayout="VerticalGrid, 3".
If necessary, test with different layout options.
(OP says in comment that this fixed both problems.)

Xamarin Forms Using multiple lists in ViewModel

I have a problem. I created a CollectionView with a ViewModel, in that ViewModel I have 2 different Lists. Now I know how to show data from 1 list, but now I want in the datatemplate a picker with the data of the second list. Here is the xaml code:
<CollectionView ItemsSource="{Binding imageList}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Picker Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Title="Formaat" ItemsSource="{Binding secondList}" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="0" Grid.Column="4" VerticalTextAlignment="Center" VerticalOptions="Center"
HorizontalOptions="Center" Text="{Binding Price, StringFormat='€ {0:F2}'}" TextColor="Black"
FontSize="18" />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
So the Price does get shown from the imageList, but the Picker is empty. In the Picker I want the element Name from the secondList
How can I fix this?

The problem is that your BindingContext in the DataTemplate of your CollectionView element is an item from your imageList. Therefore the binding will not work, as I assume your secondList is not a part of the element's model that you're using in the imageList but rather a part of the entire view model used for the page.
I would suggest using the RelativeBinding. I don't know the names of your models but your Picker binding could look like this:
<Picker ItemsSource="{Binding Source={RelativeSource AncestorType={x:Type local:YourViewModelTypeName}}, Path=secondList}" />

How can I display ListView Items in a Grid

I would like to recreate something similar to this gallery in Xamarin Forms. I want a ListView with grouping and it's items displayed in a grid.
I know how to group items in a ListView, but I don't know how to display the items in a grid. The grid layout looks similar to a Flex Layout but as far as I can see a Flex Layout doesn't have a way to group items. How can I create this in Xamarin?

You should use the new CollectionView for this:
Eg code:
<CollectionView
x:Name="collectionView"
Margin="5"
ItemSizingStrategy="MeasureAllItems"
ItemsSource="{Binding Results}"
SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate>
<Image
HorizontalOptions="CenterAndExpand"
Source="{Binding ImageSource}"
VerticalOptions="CenterAndExpand" />
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.ItemsLayout>
<GridItemsLayout
HorizontalItemSpacing="10"
Orientation="Vertical"
Span="2"
VerticalItemSpacing="10" />
</CollectionView.ItemsLayout>
<CollectionView.EmptyView>
<StackLayout>
<Label
FontSize="Title"
HorizontalOptions="CenterAndExpand"
Text="{locale:Translate Global_No_Data_Found}"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</CollectionView.EmptyView>
</CollectionView>
Here ItemsLayout is what defines how your Items will look options are Grid and Linear.
To add the date part as per the Image use Group header templates just like ListView.
Note that CollectionViewDataTemplates take Views and not ViewCells.
Using ViewCell will throw an exception of the unspecified cast.
More about CollectionView can be found here: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid
Feel free to get back in case of queries.

XAML Element Alignment issue

I have a list view that will contain notes that I input. I am having trouble figuring out how to have the list view item look how I want it to.
Below is how it should look:
And this is what it currently looks like:
How do I write the list view item in XAML so that the Date and time appear to the very top-right of each list view item, with the text of the note to the left?
<ListView x:Name="list" ItemsSource="{Binding Note}" BorderBrush="{x:Null}" BorderThickness="0">
<DataTemplate>
<ListViewItem>
<StackPanel Orientation="Horizontal">
</StackPanel>
</ListViewItem>
</DataTemplate>
</ListView>
Any help at all is much appreciated!

You are missing a number of elements required in order to get your screen to look the way you want.
You need to define the ItemTemplate for the ListView. You're on the right track here, it is a DataTemplate declared in XAML, you just have to apply it to the ListView.ItemTemplate property.
You need to set the HorizontalContentAlignment of the ListView to Stretch (the default is Left, which means your items will not fill the entire content area).
You need to use a DockPanel (or other similar panel) inside your DataTemplate to place your date content on the right, and the remainder of your content on the left.
You need to disable Horizontal Scrolling (ScrollViewer.HorizontalScrollBarVisbility) on the ListView in order to make your content wrap (otherwise it will just happily draw it all on one line).
I've included a sample ListView that should get you started.
<ListView
ItemsSource="{Binding Items}"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock
TextWrapping="Wrap"
Text="{Binding Date}"
Background="Magenta"
DockPanel.Dock="Right" />
<TextBlock Text="{Binding Content}" Background="Lime" />
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

ScrollViewer in a listbox

I´m filling a listbox with a specific data, the code works fine, but I need to add a scrollviewer to the listbox because there are many elements inside, I tried to use a ScrolViewer and put inside the listbox, but doesn't work, here is the code
<StackPanel x:Name="Sites" Grid.Row="1" Orientation="Vertical">
<ListBox x:Name="ListSites" >
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="460" Height="120" Click="click" Name="btn">
<Button.Content>
<StackPanel Orientation="Vertical" Height="100" Width="460">
<TextBlock Width="460" Name="txtname" FontSize="22" Text="{Binding name}" Height="40" Foreground="CadetBlue" />
<TextBlock Width="460" Name="txtUrl" FontSize="22" Text="{Binding Url}" Height="60"/>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>

I fixed it, simply adding the Height property in the ListBox control

If the ListBox is not given infinite space for height then it should automatically scroll when items overflow its boundaries. For instance, if the second Grid row outside your stackpanel has explicit or 'star' height set, the scrollbar in the listbox will show up automatically.
See also: Silverlight: Difficulty with ScrollViewer

You shouldn't need to add a ScrollViewer to your ListBox. It will start scrolling when it runs out of room.
However, because you've put the ListBox inside a StackPanel it won't ever think it's run out of room because the StackPanel grows infinitely in the direction of it's orientation to accommodate its contents.
You'll need to use a different container for your ListBox.

<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>