How to display 3 images in a row

some1some1 Member ✭✭✭

i want to display saved in database as 3 images in a row like wise , display all images saved in database.
for example just like this

and when i click an image i want to go to another page and need its details in next page. How can i do this?

Answers

  • some1some1 Member ✭✭✭

    @AlessandroCaliaro i tried this out.no output is showing

  • LucasZhangLucasZhang Member, Xamarin Team Xamurai

    in xaml

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:App14"
                 xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
                 x:Class="xxx.MainPage">
    
        <flv:FlowListView FlowColumnCount="3" SeparatorVisibility="None" HasUnevenRows="false"
        FlowItemTappedCommand="{Binding ItemTappedCommand}" RowHeight="150" FlowItemsSource="{Binding Items}" >
    
            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
    
                   // set the layout here ,this is just a demo
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding img}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
    
                        <Label Text="btn1" TextColor="AliceBlue" Grid.Row="1" Grid.Column="0" />
                        <Label Text="btn2" TextColor="AliceBlue" Grid.Row="1" Grid.Column="1" />
                    </Grid>
    
    
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
    
        </flv:FlowListView>
    
    </ContentPage>
    

    in code behind

    public MainPage()
    {
                InitializeComponent();
    
                FlowListView.Init();
    
                BindingContext = new MyViewModel(this); 
    }
    

    in ViewModel

    public class MyViewModel: INotifyPropertyChanged
        {
            public ObservableCollection<Model> Items { get; set; }
    
            private ContentPage currentPage;
            public ContentPage CurrentPage {
                get
                {
                    return currentPage;
                }
    
                set
                {
                    currentPage = value;
                }
    
            }
    
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            public MyViewModel(ContentPage page)
            {
    
                // I use local data ,You can get it from database
                Items = new ObservableCollection<Model>() {
    
                    new Model(){ img="xxx.png",price="$999",ID="000",title="iPhone X"},
                    new Model(){ img="xxx.png",price="$799",ID="001",title="iPhone 8"},
                    new Model(){ img="xxx.png",price="$399",ID="002",title="Sony"},
                    new Model(){ img="xxx.png",price="$999",ID="003",title="iPhone X"},
                    new Model(){ img="xxx.png",price="$799",ID="004",title="iPhone 8"},
                    new Model(){ img="xxx.png",price="$399",ID="005",title="Sony"},
                    //...
                };
    
            }
    
            public ICommand ItemTappedCommand
            {
                get
                {
                    return new Command( (sender) =>
                    {
                        var Item = sender as Model;
    
                        foreach(var model in Items)
                        {
                            if(model.ID==Item.ID)
                            {
                                var newPage = new xxxContentPage(Item);
                                currentPage.Navigation.PushAsync(newPage,true);
                            }
                        }
    
                    });
                }
            }
    
    
        }
    
        public class Model
        {
            public string img { get; set; }
            public string ID { get; set; }
            public string price { get; set; }
            public string title { get; set; }
            // other info of the product..
    
        }
    
  • some1some1 Member ✭✭✭

    @LucasZhang thankyou . i want dynamic image display . if i have 10 images in database it must be displayed , if i have 15 , that must be displayed .

    here u have specified grid row and column. how will it produce dynamic list of images

  • LucasZhangLucasZhang Member, Xamarin Team Xamurai

    What is the mean of dynamic image display?

  • some1some1 Member ✭✭✭
    edited June 17

    @LucasZhang Im using web service to fetch data from sql server. So how will i implement that here

    public MyViewModel(ContentPage page)
    {

            // I use local data ,You can get it from database
            Items = new ObservableCollection<Model>() {
    
                new Model(){ img="xxx.png",price="$999",ID="000",title="iPhone X"},
                new Model(){ img="xxx.png",price="$799",ID="001",title="iPhone 8"},
                new Model(){ img="xxx.png",price="$399",ID="002",title="Sony"},
                new Model(){ img="xxx.png",price="$999",ID="003",title="iPhone X"},
                new Model(){ img="xxx.png",price="$799",ID="004",title="iPhone 8"},
                new Model(){ img="xxx.png",price="$399",ID="005",title="Sony"},
                //...
            };
    
        }
    

    and var newPage = new xxxContentPage(Item); what is this xxxContentPage ??

  • LucasZhangLucasZhang Member, Xamarin Team Xamurai

    xxxContentPage is the next page which you will show details of products.

  • SreeeeSreeee INMember ✭✭✭✭✭

    Created a sample project for flowlistview. This project can select photos from gallery or camera and show it in UI. I have set 3 photos in a row. Also added itemselected event and a delete option to remove the selected picture.

Sign In or Register to comment.