How to show all columns in CollectionView - xaml

I have List with decent amount of columns (13 to be exact)
When I populate my collection view I have problem because only 3-4 columns are visible, and I can't scroll collection view horizontally. I tried to improvise something using scroll view but it just made each row scrollable separatly like its not bound to header and other data in view, How to achive this kind of horizontall scroll?
C1
C2
C3
C4
...
C_N
****
****
****
****
****
****
****
****
****
My CollectionVeiw code sample
<CollectionView WidthRequest="1000" HorizontalOptions="FillAndExpand" Grid.Row="1" Grid.Column="0" VerticalScrollBarVisibility="Always" HorizontalScrollBarVisibility="Always" BackgroundColor="White" ItemsSource="{Binding output}" SelectionMode="Single" SelectionChangedCommand="{Binding ItemSelectedCommand}" SelectedItem="{Binding SelectedItem}" EmptyView="No data">
<CollectionView.Header>
<Grid BackgroundColor="#F5F9FF" Grid.Row="2" RowDefinitions="*" ColumnDefinitions="50,90,100,30,35,70,100,100,100,100,100,100,100" RowSpacing="10" ColumnSpacing="2">
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="0" Text="C1"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="1" Text="C2"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="2" Text="C3 организације"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="3" Text="C4"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="4" Text="C5"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="5" Text="C6"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="6" Text="C7"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="7" Text="C8"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="8" Text="C9"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="9" Text="C10"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="10" Text="C11"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="11" Text="C12"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="12" Text="C13"/>
</Grid>
</CollectionView.Header>
<CollectionView.ItemTemplate >
<DataTemplate x:DataType="model:AmanetProveraDocument_Select_Output" >
<Grid RowDefinitions="40" ColumnDefinitions="50,100,100,100,100,100,100,100,100,100,100,100,100" RowSpacing="10" ColumnSpacing="2">
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="0" Text="{Binding D1, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="1" Text="{Binding D2, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="2" Text="{Binding D3, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="3" Text="{Binding D4, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="4" Text="{Binding D5, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="5" Text="{Binding D6, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="6" Text="{Binding D7, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="7" Text="{Binding D8, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="8" Text="{Binding D9, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="9" Text="{Binding D10, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="10" Text="{Binding D11, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="White" Grid.Column="11" Text="{Binding D12, Converter = {StaticResource NullToStringConverter}}"/>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="12" Text="{Binding D13, Converter = {StaticResource NullToStringConverter}}"/>
</Grid>
<!--</StackLayout>-->
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

Related

StackLayout Tableview cuts off half screen, but only on release mode

I am having some weird issues with my Tableview.
It cuts off half screen, but when I go on Debug mode it works fine.
I am using AbsoluteLayout but I am filling in the entire screen, at least what I think I am.
Only on this page though, all other pages look fine. This is the only page I am using a Tableview not sure if this is related. Only happen on iOS, and it affects when I download it from visual studio directly and also when I distribute it through App center so in this case I don't think it is the simulator or Visual studio. Any thoughts?
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Example123.MoreContentPage"
xmlns:local="clr-namespace:Example123.MarkupExtensions"
Title="More Settings">
<ContentPage.Content>
<AbsoluteLayout>
<StackLayout Padding="5" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<TableView x:Name="MoreTable"
HasUnevenRows="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal"
BackgroundColor="#f7f7fb">
<Label Text="Preferences"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenFontSizing">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="settings.png"
Margin="10,10,0,10"
WidthRequest="23"/>
<Label Text="App Settings - Adjust text Size"
VerticalTextAlignment="Center"
Margin="15,5,10,5"
Padding="2"
x:Name="label1"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Terms of Use"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenTermsandConditions">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="accept.png" WidthRequest="23" Margin="10,10,0,10"/>
<Label Text="Terms of Use"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
FontSize="{Binding H2Font}"
TextColor="#5e5e5e"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="DownloadRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="download.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Download our App!"
VerticalOptions="CenterAndExpand"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
LineBreakMode="WordWrap"
x:Name="label2"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Contact Specialty"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SendEmail">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="envelope.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Feedback or Questions"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label3"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="News"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="TWRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="twitterFinal.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="Product News"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label4"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Share Market®"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SeasonalRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="search_share.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="In Season Now! List"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label5"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SMRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="add.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Sign up for Share Market® HIghlights Newsletter"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label6"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Social Networks"
VerticalOptions="Center"
Margin="15,5,10,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="FBRedirect" >
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="facebook.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Facebook"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label7"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="IGRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="instagram.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Instagram"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label8"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</StackLayout>
</AbsoluteLayout>

I ended up removing the StackLayout and adding the Layout Flags and Bounds to the TableView.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Example123.MoreContentPage"
xmlns:local="clr-namespace:Example123.MarkupExtensions"
Title="More Settings">
<ContentPage.Content>
<AbsoluteLayout>
<TableView x:Name="MoreTable"
HasUnevenRows="True"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal"
BackgroundColor="#f7f7fb">
<Label Text="Preferences"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenFontSizing">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="settings.png"
Margin="10,10,0,10"
WidthRequest="23"/>
<Label Text="App Settings - Adjust text Size"
VerticalTextAlignment="Center"
Margin="15,5,10,5"
Padding="2"
x:Name="label1"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Terms of Use"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="OpenTermsandConditions">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="accept.png" WidthRequest="23" Margin="10,10,0,10"/>
<Label Text="Terms of Use"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
FontSize="{Binding H2Font}"
TextColor="#5e5e5e"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="DownloadRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="download.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Download our App!"
VerticalOptions="CenterAndExpand"
Margin="15,5,10,5"
Padding="2"
VerticalTextAlignment="Center"
LineBreakMode="WordWrap"
x:Name="label2"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Contact Specialty"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SendEmail">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="envelope.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Feedback or Questions"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label3"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="News"
VerticalOptions="Center"
Margin="15,0,5,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="TWRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="twitterFinal.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="Product News"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label4"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Share Market®"
VerticalOptions="Center"
Margin="15,0,5,5"
FontSize="17"
Padding="10"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SeasonalRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="search_share.png" Margin="10,10,0,10"
WidthRequest="23" />
<Label Text="In Season Now! List"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label5"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="SMRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="add.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Sign up for Share Market® HIghlights Newsletter"
VerticalOptions="Center"
Margin="15,5,10,5"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label6"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Social Networks"
VerticalOptions="Center"
Margin="15,5,10,5"
Padding="10"
FontSize="17"
TextColor="#000"
FontAttributes="Bold"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="FBRedirect" >
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="facebook.png" Margin="10,10,0,10" WidthRequest="23" />
<Label Text="Facebook"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label7"/>
</StackLayout>
</ViewCell>
<ViewCell Tapped="IGRedirect">
<StackLayout Orientation="Horizontal" Margin="10">
<Image Source="instagram.png" Margin="10,10,0,10" WidthRequest="23"/>
<Label Text="Instagram"
VerticalOptions="Center"
Margin="15,0,5,0"
VerticalTextAlignment="Center"
Padding="2"
x:Name="label8"/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</AbsoluteLayout>

How would it be a good way to keep the title of the notification and the date separate? In both orientations of the device

Title: app_nome -> TWW / SALDO - HOSPITAL... (Example)
Time: dt_cadastro_hora -> 08:56 (Example)
NotificationsPage.xaml
<RefreshView x:DataType="local:NotificacoesViewModel"
Command="{Binding LoadItemsCommand}"
IsRefreshing="{Binding IsBusy, Mode=TwoWay}"
Padding="0,15,0,0">
<CollectionView x:Name="ItemsListView"
ItemsSource="{Binding Notificacoes}"
SelectionMode="None"
ItemsUpdatingScrollMode="KeepItemsInView"
VerticalScrollBarVisibility="Never"
HorizontalScrollBarVisibility="Never"
IsGrouped="True">
<CollectionView.GroupHeaderTemplate>
<DataTemplate x:DataType="model:NotificacaoGrupoData">
<Label Text="{Binding Data_agrupada}"
FontSize="20"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
Padding="0,15,0,15"
Style="{StaticResource LabelDataAgrupadaStyle}"/>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout x:DataType="model:Notificacao">
<StackLayout Orientation="Horizontal">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"
Command="{Binding Source={RelativeSource AncestorType={x:Type local:NotificacoesViewModel}},
Path=NotificacaoSelecionada}"
CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
<Image Source="logo"
HeightRequest="40"
Margin="0,0,5,0"
VerticalOptions="CenterAndExpand"/>
<StackLayout VerticalOptions="CenterAndExpand"
Margin="0,0,10,0">
<FlexLayout JustifyContent="SpaceBetween"
AlignItems="Center">
<Label Text="{Binding app_nome}"
Style="{StaticResource LabelStyle}"
FontSize="20"
WidthRequest="230"
LineBreakMode="TailTruncation"
FontAttributes="Bold"/>
<Label Text="{Binding dt_cadastro_hora}"
Style="{StaticResource LabelStyle}"
FontSize="13"
LineBreakMode="NoWrap"
MinimumWidthRequest="50"
FontAttributes="Bold"/>
</FlexLayout>
<Label Text="{Binding mensagem}"
TextType="Html"
LineBreakMode="TailTruncation"
Style="{StaticResource LabelStyle}"/>
</StackLayout>
<Label Text=""
FontFamily="FontAwesomeBold"
TextColor="#ACACAC"
FontSize="24"
HorizontalOptions="EndAndExpand"
VerticalOptions="CenterAndExpand"
Style="{StaticResource LabelStyle}">
</Label>
</StackLayout>
<BoxView HeightRequest="1"
BackgroundColor="#DDDDDD"
Margin="0,5,0,5"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</RefreshView>

You can try replace
<FlexLayout JustifyContent="SpaceBetween"
AlignItems="Center">
<Label Text="{Binding app_nome}"
Style="{StaticResource LabelStyle}"
FontSize="20"
WidthRequest="230"
LineBreakMode="TailTruncation"
FontAttributes="Bold"/>
<Label Text="{Binding dt_cadastro_hora}"
Style="{StaticResource LabelStyle}"
FontSize="13"
LineBreakMode="NoWrap"
MinimumWidthRequest="50"
FontAttributes="Bold"/>
</FlexLayout>
By (notice the HorizontalOptions)
<StackLayout Orientation="Horizontal">
<Label Text="{Binding app_nome}"
Style="{StaticResource LabelStyle}"
HorizontalOptions="StartAndExpand"
FontSize="20"
WidthRequest="230"
LineBreakMode="TailTruncation"
FontAttributes="Bold"/>
<Label Text="{Binding dt_cadastro_hora}"
Style="{StaticResource LabelStyle}"
HorizontalOptions="End"
FontSize="13"
LineBreakMode="NoWrap"
MinimumWidthRequest="50"
FontAttributes="Bold"/>
</StackLayout>

Expander in a CollectionView not properly updating the screen in xamarin

I have an Expander in a CollectionView.
I try to select a radio button in every row but everytime I scroll multiple rows displaying the same radio button as selected even though the row is not selected. I am using xamarin forms 5.0.0.1874
here is my code
<CollectionView ItemsSource="{Binding sI_Refill_s}">
<CollectionView.ItemTemplate>
<DataTemplate>
<yummy:PancakeView CornerRadius="10" BackgroundColor="{StaticResource GreenColor}" Padding="10">
<xct:Expander IsExpanded="{Binding IsEnable}">
<xct:Expander.Header>
<Grid RowDefinitions="Auto,Auto" ColumnDefinitions="*,*,*" RowSpacing="10" Padding="05">
<!--ROW1-->
<Label Grid.Row="0" Grid.Column="0" Text="Last" Style="{StaticResource headerStyle}"/>
<Label Grid.Row="0" Grid.Column="1" Text="DOB" Style="{StaticResource headerStyle}"/>
<Label Grid.Row="0" Grid.Column="2" Text="Reason" Style="{StaticResource headerStyle}"/>
<!--ROW2-->
<Label Grid.Row="1" Grid.Column="0" Text="{Binding Last}" Style="{StaticResource ValStyle}"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding DOB}" Style="{StaticResource ValStyle}"/>
<Entry Grid.Row="1" Grid.Column="2" Text="{Binding Reason, Mode=TwoWay}" HorizontalOptions="Fill" Style="{StaticResource ValStyle}"/>
</Grid>
</xct:Expander.Header>
<xct:Expander.ContentTemplate>
<DataTemplate>
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" ColumnDefinitions="*,*,*,*,*" RowSpacing="10">
<!--ROW3-->
<Label Grid.Row="0" Grid.Column="0" Text="First" Style="{StaticResource headerStyle}"/>
<Label Grid.Row="0" Grid.Column="1" Text="L_DISP_DT" Style="{StaticResource headerStyle}"/>
<Label Grid.Row="0" Grid.Column="2" Text="REM_INJS" Style="{StaticResource headerStyle}"/>
<Label Grid.Row="0" Grid.Column="3" Text="STATUS" Style="{StaticResource headerStyle}"/>
<Label Grid.Row="0" Grid.Column="4" Text="Refill#" Style="{StaticResource headerStyle}"/>
<!--ROW4-->
<Label Grid.Row="1" Grid.Column="0" Text="{Binding First}" Style="{StaticResource ValStyle}"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding L_Disp_Dt}" Style="{StaticResource ValStyle}"/>
<Label Grid.Row="1" Grid.Column="2" Text="{Binding Rem_injs}" Style="{StaticResource ValStyle}"/>
<Label Grid.Row="1" Grid.Column="3" Text="{Binding Status}" Style="{StaticResource ValStyle}"/>
<Label Grid.Row="1" Grid.Column="4" Text="{Binding RefillNo}" Style="{StaticResource ValStyle}"/>
<!--ROW5-->
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" Text="Decision" Style="{StaticResource headerStyle}"/>
<!--ROW6-->
<StackLayout Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="5"
RadioButtonGroup.GroupName="{Binding groupName}"
RadioButtonGroup.SelectedValue="{Binding SelectedItem}" Orientation="Horizontal" HorizontalOptions="Center">
<RadioButton Content="Approved"
Value="Approved" FontSize="Micro"/>
<RadioButton Content="Hold"
Value="Hold" FontSize="Micro"/>
<RadioButton Content="Reject"
Value="Reject" FontSize="Micro"/>
</StackLayout>
</Grid>
</DataTemplate>
</xct:Expander.ContentTemplate>
</xct:Expander>
</yummy:PancakeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

If you are targeting iOS then it is likely to be XamarinCommunityToolkit bug you can follow it status/progress in:
Expander within CollectionView does not work properly on iOS #608
Expander is not expanding and collapsing properly when load in CollectionView #572

Build a frame with pointer

I want to to build a frame like the below one with a pointer, in this case the triangle on the right:
How can this be done?

Create two stacked BoxViews using a Grid, and rotate the top one by 45 degrees:
<StackLayout>
<Grid HorizontalOptions="Center" VerticalOptions="CenterAndExpand" WidthRequest="100" HeightRequest="100">
<BoxView HorizontalOptions="Center" VerticalOptions="CenterAndExpand" WidthRequest="100" HeightRequest="80" BackgroundColor="Red"/>
<BoxView HorizontalOptions="End" VerticalOptions="CenterAndExpand"
WidthRequest="50" HeightRequest="50" BackgroundColor="Red" Rotation="45"/>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="0">
<Label HorizontalTextAlignment="Center" CharacterSpacing="2" FontSize="13" TextColor="White" Text="DECEMBER"/>
<Label HorizontalTextAlignment="Center" FontAttributes="Bold" FontSize="22" TextColor="White" Text="25"/>
<Label HorizontalTextAlignment="Center" CharacterSpacing="2" FontSize="13" TextColor="White" Text="WEDNESDAY"/>
</StackLayout>
</Grid>
</StackLayout>

Xamarin Center StackLayout within ScrollView

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>