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
Related
I have a ScrollView in my .net Maui application. It contains a RefreshView with a CollectionView. It worked fine but yesterday it doesn't scroll anymore.
Here a video of the issue: https://de.files.fm/u/3rhsdu786
I tested the ScrollView with some Frames and it worked, so there must be a problem with the RefreshView or with the combination. I also tried to create a new page and inserted the old code but it also didn't work.
Here is my xaml code:
<ScrollView>
<StackLayout>
<!--Der Frame ist Visible, wenn für den Tag eine für den Schüler betreffende Nachricht existiert ansonsten bleibt diese Nachricht unsichtbar-->
<Button Text="Neue Nachrichten unter Aktuelles!" Command="{Binding OnMessage}" IsVisible="{Binding IsVisibleInfo}" CornerRadius="30" Margin="0,15,0,0" HorizontalOptions="Center"/>
<Frame IsVisible="{Binding IsVisibleNoAlert}" HorizontalOptions="Center" BackgroundColor="Transparent">
<StackLayout VerticalOptions="Start" HorizontalOptions="Center">
<Label Text="Keine Vertretung!" FontSize="Title" HorizontalTextAlignment="Center" VerticalOptions="Start" Margin="10"/>
<Label Text="Heute hast du keine Vertretung. Dein Tag findet ganz normal statt." HorizontalTextAlignment="Center"/>
<Label Text="{Binding Status}" HorizontalOptions="Center" Margin="20" TextColor="Gray" VerticalOptions="StartAndExpand" IsVisible="{Binding IsVisibleNoAlert}"/>
</StackLayout>
</Frame>
<RefreshView x:DataType="vm:TodayViewModel" Command="{Binding LoadStandInsCommand}" IsRefreshing="{Binding IsBusy, Mode=TwoWay}" IsEnabled="{Binding RefreshIsEnabled}" Margin="30,10,30,30">
<StackLayout Orientation="Vertical">
<Label Text="{Binding Status}" HorizontalOptions="Center" TextColor="Gray" VerticalOptions="StartAndExpand" IsVisible="{Binding IsVisibleView}"/>
<CollectionView ItemsSource="{Binding StandIns}" SelectionMode="None" IsVisible="{Binding IsVisibleView}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout x:DataType="model:StandIn" Margin="0,10,0,10">
<Frame HeightRequest="110" BackgroundColor="{AppThemeBinding Light={StaticResource WhiteMode2nd}, Dark={StaticResource DarkMode2nd}}" BorderColor="{Binding Color}" CornerRadius="10">
<StackLayout Margin="-20" Orientation="Horizontal">
<Line BackgroundColor="{Binding Color}" HeightRequest="170" WidthRequest="5" HorizontalOptions="Start"/>
<Grid HorizontalOptions="FillAndExpand" Margin="10,5,10,5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.75*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.7*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Stunde}" Style="{StaticResource LableStyleStandIn}" Margin="5,0,0,0"/>
<Label Text="{Binding Fach}" Style="{StaticResource LableStyleStandIn}" Grid.Row="1"/>
<Label Text="{Binding Art}" FontSize="17" Style="{StaticResource LableStyleStandIn}" Grid.Row="2"/>
<Label Text="{Binding Raum}" Style="{StaticResource LableStyleStandIn}" Grid.Column="1" Grid.Row="1"/>
<Label Text="{Binding Lehrer}" FontSize="17" Style="{StaticResource LableStyleStandIn}" Grid.Column="1" Grid.Row="2"/>
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</RefreshView>
</StackLayout>
</ScrollView>
<!--Der Button um in die Refreshview entweder die Vertretung für heute oder morgen zu laden-->
<Frame Style="{StaticResource ButtonStyleSwitchDay}" >
<Grid Margin="-15">
<Button Command="{Binding ChangeSide}" Background="Transparent" BorderColor="Transparent"/>
<Image Source="{Binding ButtonImageDay}"/>
</Grid>
</Frame>
</Grid>
The ViewModel workes fine, so there is no problem with it.
Thanks for helping me.
Credits: ewerspej
RefreshView must be on the outside and ScrollView on the inside like below:
<RefreshView >
<ScrollView>
````
</ScrollView>
</RefreshView>
Ref: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/refreshview?view=net-maui-7.0
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>
Im' working on XAML view and I want to create simple view with left side bar and the content with Grid and inside grid I have some buttons, that I want to achieve is to fill all form
Code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:App.ViewModels"
mc:Ignorable="d"
x:Class="App.Views.UserSelectionPage">
<ContentPage.Content>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" BackgroundColor="#093145" HorizontalOptions="Start" VerticalOptions="FillAndExpand" >
<Label Text="AppName"
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center"
FontSize="Header"
TextColor="White"
Margin="15,0,10,15" />
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="End" BackgroundColor="#093145">
<Image Source="Assets/LargeTitle.scale-100.png"
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="Center"
WidthRequest="90"
HeightRequest="90"
Margin="15,0,10,15"
VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
<Grid BackgroundColor="AliceBlue">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<BoxView Color="#505CA9" Grid.Row="0" Grid.ColumnSpan="3" />-->
<Button Text="Use username instead"
Command="{Binding ToggleNewUserCommand}"
Grid.Row="0"
Grid.Column="2"
VerticalOptions="Center"
HorizontalOptions="End"
BackgroundColor="Transparent"
FontSize="Title"
TextColor="White"
Margin="15,0,10,15"/>
<Button x:Name="userOne"
d:Text="GQ"
Text="{Binding UserSelectionList[0].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userOne}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="0"
BackgroundColor="{Binding UserSelectionList[0].BackgroundColor}"
d:BackgroundColor="#093145"/>
<Button x:Name="userTwo"
d:Text="LR"
Text="{Binding UserSelectionList[1].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userTwo}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="1"
BackgroundColor="{Binding UserSelectionList[1].BackgroundColor}"
d:BackgroundColor="#107896" />
<Button x:Name="userThree"
d:Text="AR"
Text="{Binding UserSelectionList[2].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userThree}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="2"
BackgroundColor="{Binding UserSelectionList[2].BackgroundColor}"
d:BackgroundColor="#829356" />
<Button x:Name="userFour"
d:Text="RR"
Text="{Binding UserSelectionList[3].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userFour}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="0"
BackgroundColor="{Binding UserSelectionList[3].BackgroundColor}"
d:BackgroundColor="#EBC944" />
<Button x:Name="userFive"
d:Text="GQ"
Text="{Binding UserSelectionList[4].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userFive}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="1"
BackgroundColor="{Binding UserSelectionList[4].BackgroundColor}"
d:BackgroundColor="#F26D21" />
<Button x:Name="userSix"
d:Text="GQ"
Text="{Binding UserSelectionList[5].Abbreviation}"
CommandParameter="{x:Reference userSix}"
Command="{Binding ButtonSelectedCommand}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="2"
BackgroundColor="{Binding UserSelectionList[5].BackgroundColor}"
d:BackgroundColor="#C02F1D" />
</Grid>
</StackLayout>
</ContentPage.Content>
Problem is for some reason it has free space inclusive if I use FillAndExpand on main StackLayout
I read about that but people just say that I missing FillAndExpand, I think problem is because I use Orientation="Horizontal" into first StackLayout, but that is the way I found to merge side bar with gridview. How can I achieve this? Regards
Add HorizontalOptions to the Grid itself:
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="AliceBlue">
I am using the following xaml in xamrin forms to create an order details page with the list of orders in a sub list-view however I am having a biit of difficulty in aligning the list view items.
<ContentPage.Content>
<ScrollView>
<StackLayout Spacing="2">
<Label Text="Order Number:"></Label>
<Label Text="{Binding Item.SopOrderNumber}"
LineBreakMode="NoWrap"
FontSize="20" />
<Label Text="Phone Number:" FontSize="20" ></Label>
<Label Text="{Binding Item.TelephoneNumber}"/>
<Button Command="{Binding SubmitCommand}" Text="Click To Call" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" />
<Label Text="{Binding Item.CustomerName}"
LineBreakMode="NoWrap"
FontSize="20" />
<Label Text="Order Status"
HorizontalOptions="StartAndExpand" />
<Picker x:Name="picker" Title="Order Status">
<Picker.ItemsSource >
<x:Array Type="{x:Type x:String}">
<x:String>Delivered</x:String>
<x:String>Damaged</x:String>
<x:String>Missing</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
<Label Text="Order Details" FontSize="Large"></Label>
<ListView x:Name="DeliveryItemsList" HeightRequest="80" HasUnevenRows="True" >
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<StackLayout Orientation="Horizontal" Padding="10" Spacing="15">
<Label Text="{Binding ItemNumber}" FontSize="20" ></Label>
<Label Text="{Binding StockCode}" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding StockDescription}" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding Price}" TextColor="Gray" FontSize="20" ></Label>
<Label Text="{Binding Qty}" TextColor="Gray" FontSize="20" ></Label>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label Text="Notes"
HorizontalOptions="StartAndExpand"
/>
<Editor x:Name="txtNotes"
VerticalOptions="FillAndExpand" HeightRequest="20"></Editor>
<Sig:SignaturePadView x:Name="signaturePad" />
<Image x:Name="PhotoSource" ></Image>
<Button Command="{Binding SubmitCommand}" Text="Take Picture of Delivery" x:Name="btnTakePhto" Clicked="BtnTakePhto_Clicked" TextColor="White"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"
BackgroundColor="#088da5" />
<Button Text="Update Order" BackgroundColor="AliceBlue" Clicked="Update_Order_Clicked"></Button>
<Button Text="Update Order and Goto Next Job" BackgroundColor="AliceBlue" Clicked="Update_Order_Clicked"></Button>
</StackLayout>
</ScrollView>
</ContentPage.Content>
As you can see from the image the items in the Listview are not in line with each other how can i make them so aligned.
Edit 2
Hi Again I AM afraid I tried the below answer but it didn't work in end it looked sound.
<ListView x:Name="DeliveryItemsList" HeightRequest="80" HasUnevenRows="True" >
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
<Label Text="{Binding ItemNumber}" FontSize="20" ></Label>
<Label Text="{Binding StockCode}" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding StockDescription}" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding Price}" TextColor="Gray" FontSize="20" ></Label>
<Label Text="{Binding Qty}" TextColor="Gray" FontSize="20" ></Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
If you want things to align, StackLayout is probably not the way to do it. StackLayout allocates space to each child element based on how much it needs, so if each row in your list has differing width requirements for different elements, like price, you'll get the kind of layout you see.
A better approach would be Grid, which gives you explicit control over how wide each column is:
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
<Label Text="{Binding ItemNumber}" Grid.Column="0" FontSize="20" ></Label>
<Label Text="{Binding StockCode}" Grid.Column="1" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding StockDescription}" Grid.Column="2" FontSize="20" TextColor="Gray"></Label>
<Label Text="{Binding Price}" Grid.Column="3" TextColor="Gray" FontSize="20" ></Label>
<Label Text="{Binding Qty}" Grid.Column="4" TextColor="Gray" FontSize="20" ></Label>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
In this example, each column is defined to have an equal width (dividing the available width evenly), but you can adjust as you see fit.
You could change one of the ColumnDefinitions to Width="1.5*" which would allocate 1.5 times the space to that column as it does to the other columns. Or could you define a column with Width="100" which would give it a fixed size regardless of the width of the screen.
There is also Width="Auto" which lets you set the width of the column based on the amount of space needed by the contents of that column, but since each row in your ListView is a different Grid, you'd end up with the same problem as you are having now with 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>