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 .
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 .
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?
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.
This code is only one time will display if I want to display multiple time ? @JarvanZhang-MSFT
@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>
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
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
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
@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>
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.
@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.

@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 ?
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
7 people are following this question.