如何在网格的行和列中进行绑定？

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();

    }
}

Answer 1

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 .