如何在xamarin窗体中建模绑定嵌套视图

Question

我很难理解如何在xamarin和MVVM中建模bind嵌套视图。这个想法是建立一个自定义控件。然后，这将是一个视图。这将出现在一页纸上。

我已经创建了一个基本的项目，一些按钮，试图让它工作。该页面具有动态网格。因此，在后面的代码中，它循环并生成视图。该页面还具有"SelectedView“属性。单击按钮时，我希望能够更新此属性，以便更新页面上的一些信息。

这是我的代码，以帮助我给出一个想法，我正在做什么(我可能认为这是错误的)。

页面

 <ContentPage.Content>
    <Grid x:Name="grid">
    </Grid>
</ContentPage.Content>

代码在中的应用

 LabelPageViewModel VM { get; set; }
        public LabelPage()
        {
            InitializeComponent();
            VM = new LabelPageViewModel();
            VM.InitiliseGridContent();
            BindingContext = VM;

            grid.RowDefinitions = new RowDefinitionCollection();
            for(int i = 0; i < 5; i++)
            {
                grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
            }

            grid.ColumnDefinitions = new ColumnDefinitionCollection();
            for (int i = 0; i < 5; i++)
            {
                grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
            }

            int listValue = 0;

            for(int i = 0;i <4; i++)
            {
                for (int j = 0; j < 4; j++)
                {
                    grid.Children.Add(VM.GridViewList[listValue],j,i);
                    listValue = listValue + 1;
                }
            }
        }

ViewModel

 public ObservableCollection<CustomButtonGridView> GridViewList { get; set; }

public CustomButtonGridView selectedView;
public CustomButtonGridView SelectedView
{
    get { return selectedView; }
    set
    {
        if(selectedView != value)
        {
            selectedView = value;
            OnPropertyChanged();
        }
    }
}

Color backgroundColor;
public Color BackgroundColor
{
    get
    {
        return  backgroundColor; 
    }
    set
    {
        if(backgroundColor!= value)
        {
            backgroundColor = value;
            OnPropertyChanged();
        }
    }
}

public LabelPageViewModel()
{

}

public void InitiliseGridContent()
{
    GridViewList = new ObservableCollection<CustomButtonGridView>();

    //Loop through and create blank items.
    for (int i = 0; i < 16; i++)
    {
        GridViewList.Add(new CustomButtonGridView(this));
    }

    SelectedView = GridViewList[0];
}


public ICommand BtnCmd
{
    get { return new Command<CustomButtonGridView>(async (x) => await ButtonClicked(x)); }
}

async Task ButtonClicked(CustomButtonGridView model)
{
    SelectedView = model;

    foreach(var item in GridViewList)
    {
        if(item != SelectedView)
        {
            BackgroundColor = Color.Red;
        }
        else
        {
            BackgroundColor = Color.Blue;
        }
        
    }
}

视图

<Grid x:Name="grid">
        <buttonView:CustomButtonView x:Name="myButton"
                                     Command="{Binding BtnCmd}"
                                     CommandParameter="{x:Reference myContent}" Text="Button"
                                     BackgroundColor="{Binding BackgroundColor}"></buttonView:CustomButtonView>
    </Grid>

代码在中的应用

  ButtonGridViewModel VM { get; set; }
    
    
            LabelPageViewModel labelVM { get; set; }
    
            public CustomButtonGridView(LabelPageViewModel vm)
            {
                InitializeComponent();
                labelVM = vm;
                BindingContext = labelVM;
    
                grid.RowDefinitions = new RowDefinitionCollection();
                
                grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
            }
    
            public static readonly BindableProperty SelectedCommandProperty =
           BindableProperty.Create(nameof(SelectCmd), typeof(ICommand), typeof(CustomButtonGridView), null);
    
            public ICommand SelectCmd
            {
                get => (ICommand)GetValue(SelectedCommandProperty);
                set
                {
                    SetValue(SelectedCommandProperty, value);
                    labelVM.selectedView = this;
    
                }
            }
    
            public static void Execute(ICommand command)
            {
                if (command == null) return;
                if (command.CanExecute(null))
                {
                    command.Execute(null);
                }
            }
    
            // this is the command that gets bound by the control in the view
            // (ie. a Button, TapRecognizer, or MR.Gestures)
            public Command OnTap => new Command(() => Execute(SelectCmd));

ViewModel

 public ICommand BtnCmd
            {
                get { return new Command(async () => await ButtonClicked()); }
            }
    
            async Task ButtonClicked()
            {
                Application.Current.MainPage.DisplayAlert("Clicked", "Clicked", "OK");
            }
    
            public Color selectedColor;
            public Color SelectedColor
            {
                get { return selectedColor; }
                set
                {
                    if(selectedColor != value)
                    {
                        selectedColor = value;
                        OnPropertyChanged();
                    }
                }
            }

控制

public class CustomButtonView : Button
{
    public static readonly BindableProperty CustomTextProperty = BindableProperty.Create("CustomText", typeof(string), typeof(CustomButtonView), "Default");
    public string CustomText
    {
        get { return (string)base.GetValue(CustomTextProperty); }
        set 
        { 
            base.SetValue(CustomTextProperty, value);
            Text = value;
        }
    }

    public CustomButtonView()
    {
        Text = CustomText;
    }
}

在我的页面上，我有一个视图列表。然后在4X4网格上循环并创建16个条目。我将第一项设置为选定的项。

在我的视图中，我有我的自定义按钮，在那里我可以添加它的属性、绑定等等。

然后，在视图中有一个单击事件，该事件会触发警报。我想改变点击按钮的颜色作为概念的证明。目前所有的按钮都会变红，因为没有一个按钮被标记为"selectedItem“。

我试图实现的按钮点击控件->通知视图->通知页面

这个按钮可以做一个动作。这个视图可能会有一些逻辑。该页面可以根据按下的按钮执行一些逻辑操作。

我不知道如何将多个视图和视图模型粘合在一起，以使它们正确绑定。也许我错过了某种双向绑定？

我可能想错了，也许有更好的方法来实现我想要的。

任何帮助都将不胜感激。

非常感谢

Answer 1

根据您的描述，您可以尝试CollectionView，这是很容易实现这一功能。

CollectionView是使用不同的布局规范表示数据列表的视图。它旨在为ListView提供更灵活、更有表现力的替代方案。

CollectionView应用于显示需要滚动或选择的数据列表。当要显示的数据不需要滚动或选择时，可以使用可绑定布局。

其结果如下：

​

​

有关更多信息，请查看：https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/introduction。