question

VasanthakumarM-3635 avatar image
0 Votes"
VasanthakumarM-3635 asked VasanthakumarM-3635 commented

How to design an Homepage in Xamarin Forms using Listview

Hi Xperts,

             I have a requirement to design the home page. Here I added the sample Copy of it. 

Note : MainImage will be within the allocated width and height of it .



dotnet-xamarin
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

How to design an Homepage in Xamarin Forms using Listview

Hi, VasanthakumarM. To create the effect as the above image, you could just a Grid to wraps the controls (label, image,button..). Could you please post more details about the homepage?How do you want to use the listView?

0 Votes 0 ·

@JarvanZhang-MSFT Any idea ?

0 Votes 0 ·
JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered VasanthakumarM-3635 commented

Hello,​

Welcome to our Microsoft Q&A platform!

@VasanthakumarM-3635 To display the views like the posted picture, try using the following code.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <StackLayout Orientation="Horizontal" Grid.Row="0" Grid.Column="0">
        <Image Source="{Binding img1}" HeightRequest="25"/>
        <Label Text="the name"/>
    </StackLayout>

    <Label Grid.Row="1" Grid.Column="0" Text="the description"/>
    <Image Source="{Binding img2}" HeightRequest="300" Aspect="AspectFill" Grid.Row="2" Grid.ColumnSpan="3"/>
    <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Grid.Row="3" Grid.Column="0">
        <!--the icon-->
        <Button Text="Like"/>
    </StackLayout>

    <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Grid.Row="3" Grid.Column="2">
        <!--the icon-->
        <Button Text="Share"/>
    </StackLayout>
</Grid>


Best Regards,

Jarvan Zhang



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 38
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

This code is only one time will display if I want to display multiple time ? @JarvanZhang-MSFT

0 Votes 0 ·

@VasanthakumarM-3635 You could just put the above layout in the item template of the listView and set data binding.

<ListView ...>
    <ListView.ItemTemplate >
        <DataTemplate>
            <ViewCell>
                <<!--put the above layout code here and set data binding-->
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
0 Votes 0 ·

Sounds good. Actually here u mentioned this code ?. In this code, Data is binding in listview at the same im passing the main image I highlighted in the bold .but here I want to bind an video as well as image too .

How I can implement this ? is that possible @JarvanZhang-MSFT

0 Votes 0 ·

Try using Xamarin.Community.Toolkit.MediaElement to display the video and set binding for the Source property.

<MediaElement Source="{Binding videoUrl" ShowsPlaybackControls="True" />

Check the doc: https://docs.microsoft.com/en-us/xamarin/community-toolkit/views/mediaelement

0 Votes 0 ·

I used this one . In that list how I can bind the image in image tag and video in mediaelement tag ? how I can execute this ?
@JarvanZhang-MSFT

0 Votes 0 ·
Show more comments
VasanthakumarM-3635 avatar image
0 Votes"
VasanthakumarM-3635 answered JarvanZhang-MSFT commented

@JarvanZhang-MSFT This is my code. This page looks like Facebook, Instagram . How I can do FB, Insta Homepage? Any possibility ?

<ListView BackgroundColor="White" ItemSelected="ListView_OnItemSelected" Grid.Row="1" x:Name="eventLists" Grid.ColumnSpan="3" Margin="0,-10" HeightRequest="700"
ItemsSource="{Binding CCCC}" HasUnevenRows="True" IsPullToRefreshEnabled="True"
IsRefreshing="{Binding CCC}" RefreshCommand="{Binding RefreshData}"

           HorizontalOptions="Center"
           VerticalOptions="Center">
                 <ListView.ItemTemplate >
                     <DataTemplate>
                         <ViewCell>
                             <RelativeLayout>
                                 <Grid>
                                     <Grid.RowDefinitions>
                                         <RowDefinition Height="Auto" />
                                         <RowDefinition Height="300"/>
                                         <RowDefinition Height="30"/>
                                         <RowDefinition Height="2"/>
                                     </Grid.RowDefinitions>
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="Auto"/>
                                 <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="*"/>
                                     </Grid.ColumnDefinitions>

                             <StackLayout Grid.Row="0" Grid.ColumnSpan="3">
                                         <custom:CircleImage  HorizontalOptions="Start" VerticalOptions="Center" Source="{Binding profile_imagePath}"
                                BorderColor="#f15a5e" BorderThickness="2" Margin="-7,3,0,0" 
                               HeightRequest="40"
                                                     WidthRequest="60"/>

                                         <Label Grid.Column="0" Text="{Binding profile_name}" Margin="50,-40,0,0" HorizontalOptions="Start" VerticalOptions="Start" TextColor="Black" FontSize="15"
                                HorizontalTextAlignment="Start"
                                FontAttributes="Italic"/>
                                            
                                     </StackLayout>
                               
                                 <Grid Grid.Row="1">
                                     <Grid.RowDefinitions>
                                         <RowDefinition Height="50"/>
                                         <RowDefinition Height="300"/>
                                         <RowDefinition Height="50"/>
                                         <RowDefinition Height="50"/>
                                     </Grid.RowDefinitions>
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="Auto"/>
                                         <ColumnDefinition Width="*"/>
                                         <ColumnDefinition Width="*"/>
                                     </Grid.ColumnDefinitions>
                                     <Image Grid.Row="1" Grid.ColumnSpan="3"  Source="{Binding file_name}"  
                                Aspect="AspectFill"  Margin="0,0" WidthRequest="350"
                                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Constant=300}"
                                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Constant=300}"
                                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=300}"
                                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=300}"/>



                                     <Label Grid.Row="0"  FontSize="Medium" FontAttributes="Italic" TextColor="Black" Margin="49,-10,0,0" 
                                        Text="{Binding title}" 
                                        BackgroundColor="Transparent" Opacity="0.75"/>

                                     <ImageButton Grid.Row="2" Grid.Column="2" Source="share.png" WidthRequest="40" Clicked="ShareButton_Clicked" CommandParameter="{Binding dataid}"
                                                HeightRequest="25"  HorizontalOptions="Start" VerticalOptions="Start"  BackgroundColor="Transparent" />

                                     <Button Grid.Row="2" ImageSource="CCC.png" IsVisible="{Binding likeCCss}" WidthRequest="6"  Margin="0,-10,0,0" BackgroundColor="Transparent" CommandParameter="{Binding upload_id}" Clicked="Button_Clicked"/>
                                     <Button Grid.Row="2" ImageSource="CC.png" IsVisible="{Binding CC}" WidthRequest="6"  Margin="0,-10,0,0" BackgroundColor="Transparent" />

                                 </Grid>
                                  
                             

                                        
                                     <!--<ImageButton Source="CC.png" Clicked="CCCLICKED" BindingContext="0,1" WidthRequest="190" Grid.Row="2" Margin="-50,0,0,0" HorizontalOptions="Start" VerticalOptions="Start" 
                                              HeightRequest="90"
                                         RelativeLayout.XConstraint="25"  RelativeLayout.YConstraint="0"   BackgroundColor="Transparent" />-->

                                     <Label Margin="0,-3,0,0" Grid.Row="4" Grid.ColumnSpan="3" BackgroundColor="LightGray" HorizontalOptions="FillAndExpand" HeightRequest="5"/>
                                        
                                 </Grid>
                             </RelativeLayout>
                         </ViewCell>
                     </DataTemplate>
                 </ListView.ItemTemplate>
             </ListView>
· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

This page looks like Facebook, Instagram . How I can do FB, Insta Homepage? Any possibility

@VasanthakumarM-3635 I tested the above code on my side, some controls cannot be displayed as excepted. For example, the two buttons place in the same position in the grid. Could you please post a picture to describe the effect you want? So that I can provide a suggested code.

0 Votes 0 ·


@JarvanZhang-MSFT I want a page like this, Two-button will come in the same row but in different columns. Same as Facebook but some options I don't want like comment section, More, etc. What you are seeing in the image same as that I'm looking for that design,


How I can achieve this.




90282-whatsapp-image-2021-04-22-at-12122-pm.jpeg


0 Votes 0 ·

@JarvanZhang-MSFT How to display video in same content . instead of binding an image ?


Its possible , When we scroll down automatically video will play right like Facebook and Instagram too ?

0 Votes 0 ·

To display a video in Xamarin.Forms, try using Xamarin.Community.Toolkit.MediaElement.

<MediaElement Source="{Binding videoUrl" ShowsPlaybackControls="True" />

Check the doc: https://docs.microsoft.com/en-us/xamarin/community-toolkit/views/mediaelement

0 Votes 0 ·