This image shows what I want to achieve, but without putting a hard width on the list of items (in code it's on the pancakeview). I want the popup to be displayed in the center of the screen, sized to it's content (providing that the screen is wide enough) I've tried multiple things: stacklayout, collectionlayout ... and arrived at the flexlayout with a fixed width and custom selection logic. There is the option to calculate the max label width and calculate it in codebehind, but that seems overkill for a scenario like this.
<Grid FlowDirection="{Binding MyFlowDirection}">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="1" Grid.Column="1" x:Name="InputGrid" >
<yummy:PancakeView CornerRadius="30" BackgroundGradientAngle="20" BorderThickness="5" BorderColor="{StaticResource LightColor}" BackgroundColor="{StaticResource DarkColor}" Padding="0,20,0,40" Margin="0,0,0,50" WidthRequest="400">
<ScrollView Orientation="Vertical" x:Name="SettingsScrollView" VerticalScrollBarVisibility="Always" Margin="5">
<FlexLayout BindableLayout.ItemsSource="{Binding Languages}" Direction="Column" Wrap="NoWrap" JustifyContent="SpaceBetween" HorizontalOptions="Center">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid x:DataType="viewModels:LanguageSelectionBookLanguageChoiceViewModel" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand}"></TapGestureRecognizer>
</Grid.GestureRecognizers>
<Grid Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="Orange" IsVisible="{Binding Selected}"></Grid>
<Image Grid.Column="0" HeightRequest="64" WidthRequest="64" Source="{Binding FlagImage}" HorizontalOptions="Center" Margin="10,0"/>
<Label Grid.Column="1" Text="{Binding Name}" FlowDirection="{Binding FlowDirection}" FontAttributes="Bold" FontSize="Medium" VerticalOptions="CenterAndExpand" VerticalTextAlignment="Center" LineBreakMode="NoWrap" IsVisible="{Binding Selected,Converter={converters:InverseBoolConverter}}" Margin="0,0,10,0"></Label>
<Label Grid.Column="1" Text="{Binding Name}" FlowDirection="{Binding FlowDirection}" FontAttributes="Bold" FontSize="Medium" VerticalOptions="CenterAndExpand" VerticalTextAlignment="Center" LineBreakMode="NoWrap" TextColor="{StaticResource DarkColor}" IsVisible="{Binding Selected}" Margin="0,0,10,0"></Label>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>
</yummy:PancakeView>
<Image Margin="0,0,0,10" Source="checkmark_greenblue.png" HorizontalOptions="Center" VerticalOptions="End" HeightRequest="80" WidthRequest="80">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CloseCommand}"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
</Grid>
</Grid>
if I remove the hard width it stretches to full width:
