locked
how do i make proportional collection view items RRS feed

  • Question

  • User390299 posted

    i have a social media feed im working on and i want each post tile to take about about .66* maybe more of the screen without an white space at the bottom of the tile.i just need it to be the same throughout all displays. at the moment im using height requests but i dont think it will transfer to all displays. i will attach xamal and 2 pictures in the scroll feed . if it is needed i can provide model and view model. also im new if i made any obvious mistakes in my code plz specify

    8" ?> mc:Ignorable="d" x:Class="Kula.SocialFeed" Title="Social Feed Collection View">

    </ContentPage.BindingContext>
    <ContentPage.Content>
    
            <CollectionView ItemsSource="{Binding SocialFeedTiles}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
    
                    <StackLayout Padding="0,0,0,5">
                        <Frame BackgroundColor="#82D5FF" Padding="0" HeightRequest="55" >
                            <Grid Padding="0" ColumnSpacing="5" Margin="0,2,0,2">
    
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width=".15*"/>
                                    <ColumnDefinition Width=".75*"/>
                                </Grid.ColumnDefinitions>
    
                                <Image Grid.Column="0" Source="{Binding ProfilePhotoUrl}  "/>
    
    
    
                                <StackLayout VerticalOptions="Center"  Grid.Column="1">
                                  <Label Text="{Binding Username}" FontSize="10" />
                                  <Label Text="{Binding FullName}" FontSize="15"  />
                                </StackLayout>
                            </Grid>
                        </Frame>
                        <Image Source="{Binding PostUrl}"  />
    
                        <Frame BackgroundColor="#82D5FF" Padding="0" HeightRequest="52.5" >
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width=".12*"/>
                                    <ColumnDefinition Width=".12*"/>
                                    <ColumnDefinition Width=".12*"/>
                                    <ColumnDefinition Width=".64*"/>
                                </Grid.ColumnDefinitions>
    
                                <Grid Grid.Column="0" Padding="0" RowSpacing="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height=".75*"/>
                                        <RowDefinition Height=".25*"/>
                                    </Grid.RowDefinitions>
                                    <ImageButton Grid.Row="0"/>
                                    <Label Text="likes" FontSize="Micro" Grid.Row="1" HorizontalOptions="Center" />
    
                                </Grid>
                                <Grid Grid.Column="1" RowSpacing="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height=".75*"/>
                                        <RowDefinition Height=".25*"/>
                                    </Grid.RowDefinitions>
                                    <ImageButton Grid.Row="0"/>
                                    <Label Text="likes" FontSize="Micro" Grid.Row="1" HorizontalOptions="Center" />
    
    
                                </Grid>
                                <Grid Grid.Column="2" RowSpacing="0" >
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height=".75*"/>
                                        <RowDefinition Height=".25*"/>
                                    </Grid.RowDefinitions>
                                    <ImageButton Grid.Row="0" Padding="0" />
                                    <Label Text="likes" FontSize="Micro" Grid.Row="1" HorizontalOptions="Center"  />
    
    
                                </Grid>
    
                            </Grid>
                        </Frame>
                    </StackLayout>
    
    
                    <!--<Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="*"/>
    
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding ProfilePhotoUrl}" Grid.Column="0"/>
                            <StackLayout Orientation="Vertical" Grid.Column="1">
                                <Label Text="{Binding Username}" FontSize="Title"/>
                                <Label Text="{Binding FullName}" FontSize="Subtitle"/>
                            </StackLayout>
                        </Grid>-->
    
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
    
    
    </ContentPage.Content>
    

    Sunday, November 17, 2019 6:51 AM

All replies

  • User369979 posted

    I'm confused about "proportional collection view items". Do you want to set a fixed height for each of the collection view items depending on the device screen? If so try the code below:

    <StackLayout x:Name="ParentLayout">
        <CollectionView ItemsSource="{Binding SocialFeedTiles}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout HeightRequest="{Binding Height, Source={x:Reference ParentLayout}}">
                        <!--controls-->
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
    

    I set the height of the items equaling to the screen you can make a converter to add some proportation.

    Monday, November 18, 2019 11:19 AM
  • User390299 posted

    @LandLu said: I'm confused about "proportional collection view items". Do you want to set a fixed height for each of the collection view items depending on the device screen? If so try the code below:

    <StackLayout x:Name="ParentLayout">
        <CollectionView ItemsSource="{Binding SocialFeedTiles}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout HeightRequest="{Binding Height, Source={x:Reference ParentLayout}}">
                        <!--controls-->
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
    

    I set the height of the items equaling to the screen you can make a converter to add some proportation.

    what exactly are height request what is one unit. because height request seem to be random on every screen idk though. but I see you used Source={x:Reference ParentLayout} does that make it proportional to the layout?

    Monday, November 18, 2019 8:44 PM
  • User369979 posted

    I used this binding grammar to set the height of the view cell equaling to the screen's. We all know different devices have different screen size so we need to use it to dynamically bind the height of the view cell to the screen. If you want a different percent. Try to create a converter like:

    public class ProportionConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            double height = (double)value;
            return height * 0.66;
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
    

    And then consume it on your page:

    <ContentPage.Resources>
        <local:ProportionConverter x:Key="ProportionConverter"/>
    </ContentPage.Resources>
    
    <!--binding-->
    <StackLayout HeightRequest="{Binding Height, Source={x:Reference ParentLayout}, Converter={StaticResource ProportionConverter}}">
        <!--controls-->
    </StackLayout>
    

    Refer to this documentation: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/binding-path to know more about the binding.

    Tuesday, November 19, 2019 7:16 AM