Xamarin 表单从 View 模型绑定(bind)命令到 ListView 数据模板中的按钮

Question

我正在使用 Xamarin.Forms 2.4 构建社交帖子共享应用程序，它与我的 API 对话。

我有 PostsPage，它使用 PostDataViewModel 将 ObservableCollection 加载到 PostsPage 中定义的 ListView。 ListView 的数据模板指向 View 文件。但是，在 Post View Template 中，我可以绑定(bind)到 My Post Model 的各个属性，但绑定(bind)到 ViewModel 上存在的命令不起作用。我试过 x:Reference 没有运气。

我的模型:

using System;
using System.Collections.Generic;

namespace SOD_APP_V2.Model
{
public class PostDataModel
{
    public string ID { get; set; }
    public string Title { get; set; }
    public string Message { get; set; }
    public string Image { get; set; }
    public string SocialMedia { get; set; }
    public string AvailableTime { get; set; }
    public string Audiences { get; set; }
    public string Topics { get; set; }
    public List<PostVersion> Versions { get; set; }

    public PostDataModel PostDetails
    {
        get
        {
            return this;
        }
    }
}
public class PostVersion
{
    public string SocialMediaID { get; set; }
    public string IconPath { get; set; }
    public int CharacterCount { get; set; }
    public string Message { get; set; }
}
}

我的 View 模型:

namespace SOD_APP_V2.ViewModel
{
public class PostDataViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    //Bindable properties
    public ObservableCollection<PostDataModel> PostDataCollection { get; set; }
    public ICommand LoadMorePostsCommand { get; private set; }
    public ICommand RejectPostCommand { get; private set; }

    public static JObject SocialmediaSites { get; set; }
    public object SelectedItem { get; set; }

    bool isLoadMoreEnabled;
    public bool IsLoadMoreEnabled
    {
        get
        {
            return isLoadMoreEnabled;
        }
        set
        {
            if (isLoadMoreEnabled != value)
            {
                isLoadMoreEnabled = value;
                OnPropertyChanged((nameof(IsLoadMoreEnabled)));
            }
        }
    }

    string pageTitle;
    public string PageTitle
    {
        get
        {
            return pageTitle;
        }
        set
        {
            if (pageTitle != value)
            {
                pageTitle = value;
                OnPropertyChanged(nameof(PageTitle));
            }
        }
    }

    int currentPage = 1;
    public int CurrentPage
    {
        get
        {
            return currentPage; 
        }
        set
        {
            if(currentPage != value)
            {
                currentPage = value;
                OnPropertyChanged(nameof(CurrentPage));
            }
        }
    }

    public PostDataViewModel()
    {
        PostDataCollection = new ObservableCollection<PostDataModel>();
        SocialmediaSites = default(JObject);

        IsLoadMoreEnabled = true;
        LoadMorePostsCommand =
            new Command(async () => await GetPosts(), () => IsLoadMoreEnabled);

        RejectPostCommand = new Command<PostDataModel>((post) =>
        {
            System.Diagnostics.Debug.WriteLine("Reject command executed");
            System.Diagnostics.Debug.WriteLine("Post ID: " + post.ID);
        });

        string deployment = ConfigController.GetDeploymentName(ApiController.DeploymentDomain);

        MessagingCenter.Subscribe<PostsPage, JArray>(this, "translations", (sender, arg) => {
            PageTitle = (arg[0].ToString() != "") ? arg[0].ToString() : "Posts from " + deployment;
        });
        if (deployment != null)
        {
            //TODO: lang packs
            PageTitle = "Posts from " + deployment;
        }
    }

    public async Task<bool> GetPosts()
    {
        ...
    }

    protected virtual void OnPropertyChanged(String propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(nameof(propertyName)));
        }
    }
}

}

我的帖子页面 XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SOD_APP_V2"
xmlns:view="clr-namespace:SOD_APP_V2.View;assembly=SOD_APP_V2"
xmlns:viewModel="clr-namespace:SOD_APP_V2.ViewModel;assembly=SOD_APP_V2"
xmlns:controls="clr-namespace:SOD_APP_V2.Controls;assembly=SOD_APP_V2"
x:Class="SOD_APP_V2.PostsPage" x:Name="PostsPage"
>
<ContentPage.BindingContext>
    <viewModel:PostDataViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
    <StackLayout>
        <StackLayout Orientation="Vertical" Padding="10, 5, 10, 5">
            <Label x:Name="titleLabel" Text="{Binding PageTitle}"
                     VerticalOptions="Start"
                     HorizontalTextAlignment="Center"
                     VerticalTextAlignment="Center"
                     BackgroundColor="Transparent"
                     HorizontalOptions="CenterAndExpand" />
            <controls:InfiniteListView x:Name="listView"
                        SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
                        IsLoadMoreItemsPossible="{Binding IsLoadMoreEnabled}"
                        LoadMoreInfiniteScrollCommand="{Binding LoadMorePostsCommand}"
                        IsEnabled="true"
                        IsBusy="{Binding IsBusy}"
                        HasUnevenRows="true"
                        ItemsSource="{Binding PostDataCollection}"
                        SeparatorVisibility="None">
                <controls:InfiniteListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <view:PostViewTemplate/>
                        </ViewCell>
                    </DataTemplate>
                </controls:InfiniteListView.ItemTemplate>
            </controls:InfiniteListView>
        </StackLayout>
        <StackLayout HorizontalOptions="FillAndExpand"
            VerticalOptions="End">
            <Label x:Name="infoLabel" Text="test"
                    Opacity="0"
                    TextColor="White"
                    BackgroundColor="#337ab7"
                    HorizontalTextAlignment="Center">
                </Label>
        </StackLayout>
    </StackLayout>
</ContentPage.Content>

最后是我描述每个帖子的帖 subview 模板:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:model="clr-namespace:SOD_APP_V2.Model;assembly=SOD_APP_V2"
xmlns:controls="clr-namespace:SOD_APP_V2.Controls;assembly=SOD_APP_V2"
x:Class="SOD_APP_V2.View.PostViewTemplate">
<ContentView.Resources>
    <ResourceDictionary>
        <Style TargetType="controls:AwesomeButton">
            <Setter Property="BorderWidth" Value="1"/>
            <Setter Property="TextColor" Value="White"/>
            <Setter Property="BorderRadius" Value="7"/>
            <Setter Property="FontFamily" Value="FontAwesome"/>
        </Style>
    </ResourceDictionary>
</ContentView.Resources>
<ContentView.Content>
    <Frame HasShadow="false" CornerRadius="5" IsClippedToBounds="true" OutlineColor="#09478e" Padding="0" Margin="10">
    <Grid 
        Padding="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1" />
            <ColumnDefinition Width="1" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="1" />
            <ColumnDefinition Width="1" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="1"></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="1"></RowDefinition>
            <RowDefinition Height="40"></RowDefinition>
            <RowDefinition Height="40"></RowDefinition>
            <RowDefinition Height="1"></RowDefinition>
        </Grid.RowDefinitions>
        <StackLayout Orientation="Horizontal" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" BackgroundColor="#B0C4DB" Padding="5">
            <Label x:Name="postTitle" Text="{Binding Title}" TextColor="#09478e" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
            <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand" HorizontalOptions="End">
            <controls:AwesomeButton Clicked="OnAvailableTimePopupClicked" CommandParameter="{Binding AvailableTime}" Text="&#xf017;" TextColor="#09478e" BorderWidth="0" Margin="-5" BackgroundColor="Transparent" WidthRequest="36" FontSize="24"></controls:AwesomeButton>
            <controls:AwesomeButton Clicked="OnAudiencesPopupClicked" CommandParameter="{Binding Audiences}" Text="&#xf0c0;" TextColor="#09478e" BorderWidth="0" Margin="-5" BackgroundColor="Transparent" WidthRequest="36" FontSize="24"></controls:AwesomeButton>
            <controls:AwesomeButton Clicked="OnTopicsPopupClicked" CommandParameter="{Binding Topics}" Text="&#xf02c;" TextColor="#09478e" BorderWidth="0" Margin="-5" BackgroundColor="Transparent" WidthRequest="36" FontSize="24"></controls:AwesomeButton>
            </StackLayout>
        </StackLayout>
        <controls:RepeaterView  Grid.Row="1" Grid.Column="2"
                              ItemsSource="{Binding Versions}"
                              NoOfColumns="3"
                              >
            <controls:RepeaterView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Spacing="0" >
                        <Label Text="{Binding Message}" IsVisible="false"/>
                        <Image Source="{Binding IconPath}">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer
                                        Tapped="OnMessageVersionClicked"
                                        NumberOfTapsRequired="1" />
                            </Image.GestureRecognizers>
                        </Image>
                    </StackLayout>
                </DataTemplate>
            </controls:RepeaterView.ItemTemplate>
        </controls:RepeaterView>

        <Image BackgroundColor="White" Grid.Row="3" Grid.Column="2" Source="{Binding Image}" VerticalOptions="FillAndExpand"/>
        <Label x:Name="postMessage" BackgroundColor="White" Grid.Row="3" Grid.Column="3" Text="{Binding Message}" TextColor="#09478e" VerticalOptions="FillAndExpand" />

        <controls:AwesomeButton Clicked="OnSharePostClicked" CommandParameter="{Binding ID}" BackgroundColor="#5cb85c" Grid.Row="5" Grid.Column="2" Text="&#xf1e0; Share" BorderColor="#5cb85c"></controls:AwesomeButton>
        <controls:AwesomeButton Clicked="OnSchedulePostClicked" CommandParameter="{Binding ID}" BackgroundColor="#5bc0de" Grid.Row="5" Grid.Column="3" Text="&#xf073; Schedule" BorderColor="#5bc0de"></controls:AwesomeButton>

        <controls:AwesomeButton Clicked="OnEditPostClicked" CommandParameter="{Binding PostDetails}" TextColor="#09478e" BackgroundColor="White" Grid.Row="6" Grid.Column="2" Text="&#xf040; Edit" BorderColor="#09478e"></controls:AwesomeButton>
        <controls:AwesomeButton  Command="{Binding Path=DataContext.RejectPostCommand}" CommandParameter="{Binding}" BackgroundColor="#d9534f" Grid.Row="6" Grid.Column="3" Text="&#xf00d; Reject" BorderColor="#d9534f"></controls:AwesomeButton>
        <!-- Inner Border -->
        <BoxView Grid.Row="2" Grid.RowSpan="3" Grid.Column="1" BackgroundColor="#09478e"></BoxView>
        <BoxView Grid.Row="2" Grid.RowSpan="3" Grid.Column="4" BackgroundColor="#09478e"></BoxView>
        <BoxView Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="2" BackgroundColor="#09478e"></BoxView>
        <BoxView Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="4" BackgroundColor="#09478e"></BoxView>
    </Grid>
    </Frame>
</ContentView.Content>

正如您在 Post View Template 中看到的，我试图在 ViewModel 中绑定(bind) RejectPostCommand，但它没有绑定(bind)。我尝试了 x:Reference to PostsPage，但它抛出了异常，因为它无法从我的 View 模板中找到该页面。我需要能够以某种方式访问​​命令。有人会有什么想法吗？

Answer 1

将 PostViewTemplate XAML 移动到 PostsPage 可能有效，但现在您没有可重用的模板。

您可以通过对原始代码进行以下 3 个小改动来创建可重用的解决方案。

将可绑定(bind)属性添加到 PostViewTemplate 代码隐藏，如下所示:

    public static BindableProperty ParentBindingContextProperty = 
        BindableProperty.Create(nameof(ParentBindingContext), typeof(object), 
        typeof(PostViewTemplate), null);

    public object ParentBindingContext
    {
        get { return GetValue(ParentBindingContextProperty); }
        set { SetValue(ParentBindingContextProperty, value); }
    }

将该属性绑定(bind)到 PostsPage XAML 中的 ViewModel，如下所示:

<view:PostViewTemplate ParentBindingContext="{Binding Source={x:Reference Home}, Path=BindingContext}"/>

现在您可以直接从 PostViewTemplate 中的绑定(bind)访问您的“父” View 模型，如下所示( 注意 您需要将 x:Name 添加到 ContentView 以用作绑定(bind)源):

<ContentView ... x:Name="PostView" ...>

<controls:AwesomeButton BindingContext="{Binding Source={x:Reference PostView}, Path=ParentBindingContext}" Command="{Binding OnTopicsPopupClicked}" CommandParameter="{Binding Topics}" Text="&#xf02c;" TextColor="#09478e" BorderWidth="0" Margin="-5" BackgroundColor="Transparent" WidthRequest="36" FontSize="24"></controls:AwesomeButton>