我正在为文本框创建表情符号框。表情框包含一个带有网格的 CollectionView 和一个内部的 ImageButton。每次我向 CollectionView 列表添加一个项目时,都会添加一个新的 ImageButton。 ImageButton 具有带绑定(bind)的 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>
页面.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();
}
}
最佳答案
在您的情况下,最好使用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 文本之类的操作。
关于c# - 如何在网格的行和列中进行绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64459679/