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

Question

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

kak*_*598 1 data-binding mvvm xamarin xamarin.forms xamarin.forms.listview

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

我有PostsPage，它使用PostDataViewModel将ObservableCollection加载到PostsPage中定义的ListView中。列表视图的数据模板指向视图文件。但是，在Post View模板中，我可以绑定到“我的帖子模型”的各个属性，但是无法绑定到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; }
}
}

Run Code Online (Sandbox Code Playgroud)

我的视图模型：

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

Run Code Online (Sandbox Code Playgroud)

}

我的帖子页面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>

Run Code Online (Sandbox Code Playgroud)

最后，我的帖子视图模板描述了每个帖子：

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

Run Code Online (Sandbox Code Playgroud)

如您在“后视图模板”中所看到的，我试图在ViewModel中绑定RejectPostCommand，但是它没有绑定。我尝试了x：References to PostsPage，但它引发了我异常，因为它无法从我的视图模板中找到该Page。我需要能够以某种方式访问命令。会有任何想法吗？

Answer 1

Dav*_*isk 5

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

现在，您可以直接从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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年前
查看次数：	3722 次
最近记录：	8 年前