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

Question

我正在为文本框创建一个表情符号框。表情框包含一个 CollectionView，里面有一个网格和一个 ImageButton。每次我向 CollectionView 列表中添加一个项目时，都会添加一个新的 ImageButton。 ImageButton 具有带有绑定的 grid.row 和 grid.column 属性，但它们不能正常工作。我该如何解决？这就是我想要的样子：

这就是它现在的样子：

网格的每个单元格都应包含一个表情符号。

这是我的代码：

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

在您的情况下，最好使用 CollectionView 而不是 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>

在 xxxCommand 中，您将获得图标作为参数，这样您就可以执行诸如设置 Entry 文本之类的操作。