How to make binding in the rows and columns of a grid?

Question

I am creating an emoji box for a text box. The emoticon box contains a CollectionView with a grid and an ImageButton inside. Every time I add an item to the CollectionView list, a new ImageButton is added. The ImageButton has the grid.row and grid.column property with binding but these don't work as they should. How can I solve it? This is how I want it to look:

And this is how it look right now:

Each cell of the grid should contain an emoji.

This is my code:

CKEditor.xaml:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="Aname.Xamarin.UIControls.Controls.CKEditor"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="CKEditorView">

    <!--  NO ESTA LISTO TODAVIA  -->
    <AbsoluteLayout>
        <Frame
            AbsoluteLayout.LayoutBounds="0.01,.85,300,300"
            AbsoluteLayout.LayoutFlags="PositionProportional"
            CornerRadius="20"
            IsVisible="{Binding Source={x:Reference CKEditorView}, Path=BoxVisible}">

            <CollectionView ItemsSource="{Binding Source={x:Reference CKEditorView}, Path=EmojiItemSource}">
                <CollectionView.ItemTemplate>

                    <DataTemplate>

                        <Grid Padding="0">
                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />

                            </Grid.RowDefinitions>
                            <ImageButton
                                Grid.Row="{Binding RowNumber}"
                                Grid.Column="{Binding ColumnNumber}"
                                BackgroundColor="Transparent"
                                Command="{Binding Source={x:Reference CKEditorView}, Path=BindingContext.MethodCommandEmoji}"
                                CommandParameter="{Binding EmojiMethodCommand}"
                                HeightRequest="30"
                                Source="{Binding EmojiSource}"
                                WidthRequest="30" />



                        </Grid>

                    </DataTemplate>
                </CollectionView.ItemTemplate>

            </CollectionView>


        </Frame>


        <StackLayout AbsoluteLayout.LayoutBounds="1,1,AutoSize,AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional">

            <Frame
                Margin="0,0,0,2"
                Padding="0,0,0,0"
                BackgroundColor="#55FFFFFF"
                BorderColor="{Binding Source={x:Reference CKEditorView}, Path=BorderColor}"
                CornerRadius="{Binding Source={x:Reference CKEditorView}, Path=CornerRadius}"
                HasShadow="False"
                VerticalOptions="EndAndExpand">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>


                    <ImageButton
                        Grid.Column="0"
                        Margin="10,0,0,0"
                        BackgroundColor="Transparent"
                        Command="{Binding Source={x:Reference CKEditorView}, Path=BindingContext.EmojiCommand}"
                        HorizontalOptions="Start"
                        Source="{Binding Source={x:Reference CKEditorView}, Path=LeftSideIcon}"
                        WidthRequest="30" />
                    <Entry
                        Margin="45,0,0,0"
                        Placeholder="{Binding Source={x:Reference CKEditorView}, Path=Placeholder}"
                        WidthRequest="320" />

                    <ImageButton
                        Grid.Column="1"
                        Margin="0,0,10,0"
                        BackgroundColor="Transparent"
                        Command="{Binding Source={x:Reference CKEditorView}, Path=SendMsgCommand}"
                        HorizontalOptions="End"
                        Source="{Binding Source={x:Reference CKEditorView}, Path=RightSideIcon}"
                        WidthRequest="30" />

                </Grid>
            </Frame>
        </StackLayout>
    </AbsoluteLayout>



</ContentView>

Page.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="ControlsExample.EntryControlPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">


    <fav:CKEditor
        BorderColor="{Binding BorderColor}"
        BoxVisible="{Binding IsVisible}"
        CornerRadius="{Binding CornerRadius}"
        EmojiItemSource="{Binding EmojiList}"
        LeftSideIcon="{Binding LeftSideIcon}"
        Placeholder="{Binding Placeholder}"
        RightSideIcon="{Binding RightSideIcon}" />


</ContentPage>

Page.xaml.cs:

public partial class Page: ContentPage
{
    public EntryControlPage()
    {
        InitializeComponent();
        BindingContext = new EmojiViewModel();

    }
}

The list is to be able to add new icons from the viewmodel through itemssource. — user14405711
What I want to do is that when I press the icon on the left, a menu with emoticons will open and when I press them, they will be added to the entry. The menu that opens, I am doing it with a frame and inside a grid to be able to align the emoticons but it does not work for me. Any way I can do it? — user14405711

Lucas Zhang - MSFT Lucas Zhang - MSFT · Accepted Answer · 2020-10-21T12:15:46

In your case it would be better to use CollectionView instead of Grid

<CollectionView ItemsSource="{Binding xxx}" >

            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="4"/>
            </CollectionView.ItemsLayout>

            <CollectionView.ItemTemplate>

                <DataTemplate>

                    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

                        <ImageButton  Command="{Binding xxxCommand}" CommandParameter="{Binding iconSource}"  />  // iconSource here is the property of icon in list

                    </StackLayout>

                </DataTemplate>

            </CollectionView.ItemTemplate>

        </CollectionView>

In xxxCommand you will get the icon as parameter and so that you can do something like set text of Entry .

How to make binding in the rows and columns of a grid?

1 Answers