Question

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

我有PostsPage，它使用PostDataViewModel将ObservableCollection加载到PostsPage中定义的ListView。列表视图的数据模板指向查看文件。但是，在Post View Template中，我可以绑定到My Post Model的各个属性，但是绑定到ViewModel上存在的命令并不起作用。我试过x：参考没有运气。

我的模特：

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; }
}
}

我的视图模型：

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>

最后我的Post View模板描述了每个帖子：

<?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中绑定RejectPostCommand，但它并没有绑定。我试过x：引用PostsPage，但它让我异常，因为它无法从我的视图模板中找到该页面。我需要以某种方式访问命令。有人会有任何想法吗？

Answer 1

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

您可以使用原始代码进行以下3项细微更改来创建可重复使用的解决方案。

将一个可绑定属性添加到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); }
    }

将该属性绑定到PostsPage XAML中的ViewModel，如下所示：

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

现在您可以直接从PostViewTemplate中的绑定访问“父”视图模型，如下所示（注意，您需要在ContentView中添加x：Name作为您的来源）结合）：

<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>

Answer 2

一种解决方案是将ICommand属性添加到模型，然后在viewModel中，在将帖子添加到PostDataCollection之前，将新ICommand属性的值设置为viewmodel的desire命令。类似的东西：

public async Task<bool> GetPosts()
{
    var response = await FetchPostsFromApi(); 
    foreach(var post in response.posts)
    {
        post.NewCommand = RejectPostCommand;
        PostDataCollection.Add(post)
    }
    return response.HasMoreItems;
}

现在在Post View Template中绑定模型的新ICommand属性。

Answer 3

因此问题与ViewModel中的PostViewTemplate中的set绑定有关。我无法引用listView或PostsPage作为绑定源，因为它在另一个文件中，我无法解决它。我通过将PostViewTemplate XAML移动到PostsPage来解决这个问题。所以现在我可以使用

{Binding Path=BindingContext.RejectPostCommand, Source={x:Reference listView}}

它有效！

Answer 4

您可以在PostViewTemplate中创建命令，然后将其绑定到ListView。这是一个例子：

PostViewTemplate.xaml.cs：

public partial class PostViewTemplate : ContentView
{
    public static BindableProperty RejectPostCommandProperty = BindableProperty.Create(
        nameof(RejectPostCommand),
        typeof(ICommand),
        typeof(PostViewTemplate),
        default(ICommand),
        defaultBindingMode: BindingMode.OneWay);

    public ICommand RejectPostCommand
    {
        get { return (ICommand)GetValue(RejectPostCommandProperty); }
        set { SetValue(RejectPostCommandProperty, value); }
    }
}

和PostViewTemplate.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="PostViewTemplate"
    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.Content>
    ....
    <controls:AwesomeButton  Command="{Binding RejectPostCommand, Source={x:Reference PostViewTemplate}}" CommandParameter="{Binding}" BackgroundColor="#d9534f" Grid.Row="6" Grid.Column="3" Text="&#xf00d; Reject" BorderColor="#d9534f"></controls:AwesomeButton>
    ....
</ContentView.Content>
</ContentView>

注意我在PostViewTemplate.xaml中设置了ContentView的名称

现在你只需要在ContentPage中绑定这个新命令就像这样。

<?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>
        ....
        <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 RejectPostCommand="{Binding BindingContext.RejectPostCommand, Source={x:Reference listView}}"/>
                    </ViewCell>
                </DataTemplate>
            </controls:InfiniteListView.ItemTemplate>
        </controls:InfiniteListView>
        ....
    </ContentPage.Content>
</ContentPage>

Xamarin从视图模型到列表视图数据模板中的按钮形成绑定命令

4 个答案: