how to create the gridview with click event in xamarin.forms

SelvanSelvan USMember ✭✭

how to create the gridview with click event in xamarin.forms

Posts

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Use tapgesture

  • seanydaseanyda GBMember ✭✭✭✭✭
    Grid g = new Grid ();
                TapGestureRecognizer tap = new TapGestureRecognizer ();
                tap.Tapped += (object sender, EventArgs e) =>  {
                    //click action here
                };
                g.GestureRecognizers.Add(tap);
    
  • SelvanSelvan USMember ✭✭

    I tried this. I want to get a particular item details when clicking on particular item.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Try to add tapgesture to every image instead of the grid

  • NMackayNMackay GBInsider, University mod
    edited February 2016

    Something like this in your data template

                                 <DataTemplate>
                                    <Grid BackgroundColor="#d5d4d3">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="60" />
                                            <ColumnDefinition />
                                            <ColumnDefinition Width="1" />
                                        </Grid.ColumnDefinitions>
                                        <local:ImageButton x:Name="ButtonAddToBasket"
                                                           HorizontalOptions="Center"
                                                           VerticalOptions="Center"
                                                           Source="IconAddInd.png">
                                            <Image.GestureRecognizers>
                                                <TapGestureRecognizer Tapped="TapGestureAddToBasket_OnTapped" />
                                            </Image.GestureRecognizers>
                                        </local:ImageButton>
                                    </Grid>
                                </DataTemplate>
    
  • seanydaseanyda GBMember ✭✭✭✭✭

    @Selvan said:
    I tried this. I want to get a particular item details when clicking on particular item.

    Just add the GestureRecognizer to whatever you want to click :P

  • SelvanSelvan USMember ✭✭

    I got it.. Thanks for your reply..

  • DanielLDanielL PLInsider ✭✭✭✭

    If you have a lot of elements (performance reasons) you could try to use this:

    https://github.com/daniel-luberda/DLToolkit.Forms.Controls/tree/master/FlowListView

  • SelvanSelvan USMember ✭✭

    I Used the Code,

    In Content Page:

    public Main()
    {
    bool errored = false;
    cls_global = new clsGlobal();
    AndroidIOSoapClient client = cls_global.GetService();

            absoluteLayout = new AbsoluteLayout()
            {
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };
    
            if (clsGlobal.IsConnectingToInternet())
            {
                client.GetHomeProductAsync();
                client.GetHomeProductCompleted += (object sender, GetHomeProductCompletedEventArgs e) =>
               {
                   Device.BeginInvokeOnMainThread(async () =>
                    {
                        bool errored3_1 = true;
    
                        string error = null;
                        if (e.Error != null)
                        {
                            errored = true;
                            if (clsGlobal.IsConnectingToInternet())
                            {
                                error = e.Error.Message;
                            }
                            else
                            {
                                error = "No Internet Connection";
                            }
                        }
                        else if (e.Cancelled)
                        {
                            errored = true;
                            error = "Cancelled";
                        }
                        if (!string.IsNullOrEmpty(error))
                        {
                            await DisplayAlert("Error", error, "OK", "Cancel");
                        }
    
                        ArrayOfXElement arr = e.Result;
    
                        List<System.Xml.Linq.XElement> list = arr.Nodes;
                        int count = list.Count;
    
                        if (count > 0)
                        {
                            System.Xml.Linq.XElement ele = list[0];
                            string markup = ele.ToString();
                            string[] ProductID = new string[0];
                            string[] ProductName = new string[0];
                            string[] ProductCode = new string[0];
                            string[] ProductImage = new string[0];
                            string[] ProductImageURL = new string[0];
                            string[] ProductImageURL2 = new string[0];
    
                            string[] ProductRPRate = new string[0];
                            string[] ProductSPRate = new string[0];
                            bool[] ProductType = new bool[0];
    
                            if (ele.HasElements)
                            {
    
                                ProductID = GetStringArrayValues(markup, "ProductID");
                                ProductName = GetStringArrayValues(markup, "ProductCode");
    
                                ProductImageURL = GetStringURL1ArrayValues(markup, "ProductID");
    
                                ProductImageURL2 = GetStringURL2ArrayValues(markup, "ProductID");
    
                                ProductRPRate = GetStringArrayValues(markup, "RegularPrice");
    
                                ProductSPRate = GetStringArrayValues(markup, "SpecialPrice");
                                ProductType = GetBoolArrayValues();
    
                                for (int row = 0; row < NUM; row++)
                                {
                                    for (int col = 0; col < NUM; col++)
                                    {
                                        GridImage square = new GridImage("" + col + "," + row, winText[index], index, ProductName[index], ProductSPRate[index], ProductImageURL2[index])
                                        {
                                            Row = row,
                                            Col = col
                                        };
    
                                        TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer
                                        {
                                            Command = new Command(OnSquareTapped),
                                            CommandParameter = square
                                        };
                                        square.GestureRecognizers.Add(tapGestureRecognizer);
    
                                        // Add it to the array and the AbsoluteLayout.
                                        squares[row, col] = square;
                                        absoluteLayout.Children.Add(square);
                                        index++;
                                    }
                                }
    
                            }
                        }
                    });
               };
    
            }
            else
            {
    
            }
            stackLayout = new StackLayout
            {
                Children = {
                    new StackLayout {
                        VerticalOptions = LayoutOptions.FillAndExpand,
                        HorizontalOptions = LayoutOptions.FillAndExpand,
                        Children = {
                        }
                    },
                    absoluteLayout
                }
            };
            stackLayout.SizeChanged += OnStackSizeChanged;
    
            // And set that to the content of the page.
            this.Padding =
                new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
            this.Content = stackLayout;
        }
    
        void OnStackSizeChanged(object sender, EventArgs args)
        {
            double width = stackLayout.Width;
            double height = stackLayout.Height;
    
            if (width <= 0 || height <= 0)
                return;
    
            // Orient StackLayout based on portrait/landscape mode.
            stackLayout.Orientation = (width < height) ? StackOrientation.Vertical :
                                                         StackOrientation.Horizontal;
    
            // Calculate square size and position based on stack size.
            squareSize = Math.Min(width, height) / NUM;
            absoluteLayout.WidthRequest = NUM * squareSize;
            absoluteLayout.HeightRequest = NUM * squareSize;
    
            foreach (View view in absoluteLayout.Children)
            {
                GridImage square = (GridImage)view;
                //square.SetLabelFont(0.4 * squareSize, FontAttributes.Bold);
    
                AbsoluteLayout.SetLayoutBounds(square,
                    new Rectangle(square.Col * squareSize,
                        square.Row * squareSize,
                        squareSize,
                        squareSize));
            }
        }
    

    **
    In ContentView:**

    public GridImage(string normChar, char winChar, int index,string ProductName,string Rate,string URL)
    {
    var webImage = new Image { };
    if (URL.Length != 0)
    {
    webImage.Source = ImageSource.FromUri(new Uri(URL));
    }
    Pic = new Image
    {
    HorizontalOptions = LayoutOptions.CenterAndExpand,
    VerticalOptions = LayoutOptions.CenterAndExpand,
    Source = webImage.Source,
    //Source = "icon.png",
    HeightRequest = 50,
    WidthRequest = 50
    };

            label = new Label
            {
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                TextColor = Color.Black,
                FontSize = 10,
                Text = ProductName
            };
    
            Label tinyLabel = new Label
            {
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                TextColor = Color.Black,
                FontSize = 10,
                Text = Rate
            };
    
            this.Padding = new Thickness(2);
            this.Content = new Frame
            {
                OutlineColor = Color.Transparent,
                Padding = new Thickness(5, 10, 5, 0),
                Content = new StackLayout
                {
                    Spacing = 0,
                    Children = {
                        Pic,
                        label,
                        tinyLabel,
                    }
                }
            };
    
            // Don't let touch pass us by.
            this.BackgroundColor = Color.White;
        }
    
        public int Row { set; get; }
    
        public int Col { set; get; }
    
        public int Index { private set; get; }
    
    }
    

    In this Coding I added absoluteLayout children in completed function So it will called after calling stack layout so it will display as follows the attached file.

    First time it will display as pic1 and if we rotate the mobile to landscape it will display as pic2 and it will corrected.

Sign In or Register to comment.