INotifyPropertyChanged ListView

时间:2018-11-19 16:31:48

标签: c# listview xamarin.forms cross-platform

我是Xamarin Forms的新手,正在尝试在我的应用程序中实现无限循环功能。我遵循的示例代码运行良好,并且已成功将其成功集成到我的应用程序中。

问题是我无法从代码中找到如何更改列表视图的源。

我打算在列表视图上方设置按钮(如下图所示),并且单击后,列表视图的源应该更改。

Image

这是我的代码的样子

 <ContentPage.BindingContext>
    <local:MainViewModel />
</ContentPage.BindingContext>

<StackLayout>

    <ListView  x:Name="tyres_listview" ItemsSource="{Binding Items}"
                       HasUnevenRows="True" SeparatorVisibility="None"  >

        <ListView.Behaviors>
            <extended:InfiniteScrollBehavior IsLoadingMore="{Binding IsBusy}" />
        </ListView.Behaviors>
        <ListView.ItemTemplate>

            <DataTemplate>
                <ViewCell>

                    <StackLayout>
                        <Grid Margin="10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.25*"></ColumnDefinition>

                                <ColumnDefinition Width="0.75*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>

                            <StackLayout  Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="5,5,5,10">
                                <Image  Source="{Binding image_url}"  >
                                </Image>
                            </StackLayout>
                            <StackLayout Grid.Column="1" Spacing="0" >
                                <Label Text="{Binding name}" FontAttributes="Bold" FontSize="Small" Margin="0,5,5,0" VerticalOptions="Center" ></Label>
                                <Label  Text="{Binding brand}" VerticalOptions="Center" FontSize="Micro"  ></Label>
                                <Label  Text="{Binding item_id}" VerticalOptions="Center" FontSize="Micro"  ></Label>

                                <StackLayout Orientation="Horizontal" x:Name="sl_db" >
                                    <Image Source="fuel.png" ></Image>
                                    <Label Text="{Binding fuel_type}"></Label>
                                    <Image Source="weather.png"></Image>
                                    <Label Text="{Binding wheather_type }"></Label>
                                    <Image Source="volume.png"  ></Image>
                                    <Label Text="{Binding noise}"></Label>
                                    <Label Text="dB"></Label>
                                </StackLayout>


                                <StackLayout Orientation="Horizontal">
                                    <Image></Image>
                                    <Label Text="{Binding rated_count }"></Label>
                                </StackLayout>

                                <StackLayout Orientation="Horizontal">
                                    <Label Text="Price: " VerticalOptions="Center"></Label>
                                    <Label Text="{Binding price }" VerticalOptions="Center" TextColor="Green"></Label>
                                    <Label Text=" EUR" VerticalOptions="Center"></Label>

                                </StackLayout>
                                <StackLayout Orientation="Horizontal">
                                    <StackLayout.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" >

                                        </TapGestureRecognizer>
                                    </StackLayout.GestureRecognizers>
                                    <StackLayout BackgroundColor="Red" Orientation="Horizontal" Margin="5" >
                                        <Image Source="shoppingcart.png" Margin="10,0,0,0"></Image>
                                        <Label Text="Add to Cart" VerticalOptions="Center" HorizontalOptions="EndAndExpand" Margin="0,0,10,0" ></Label>
                                    </StackLayout>
                                    <Image x:Name="button_info"  Source="info.png" >

                                        <Image.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="button_info_Clicked"></TapGestureRecognizer>
                                        </Image.GestureRecognizers>

                                    </Image>
                                </StackLayout>

                            </StackLayout>

                        </Grid>
                    </StackLayout>

                </ViewCell>

            </DataTemplate>

        </ListView.ItemTemplate>

        <ListView.Footer>
            <Grid Padding="6" IsVisible="{Binding IsBusy}">
                <!-- set the footer to have a zero height when invisible -->
                <Grid.Triggers>
                    <Trigger TargetType="Grid" Property="IsVisible" Value="False">
                        <Setter Property="HeightRequest" Value="0" />
                    </Trigger>
                </Grid.Triggers>
                <!-- the loading content -->
                <Label Text="Loading..." TextColor="DeepPink" FontSize="20" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="Center" />
            </Grid>
        </ListView.Footer>
    </ListView>
    <Button Clicked="button_Change_Order_Clicked"></Button>
</StackLayout>

 public class MainViewModel : INotifyPropertyChanged
{
    private bool _isBusy;
    private const int PageSize = 10;
    readonly DataService _dataService = new DataService();

    public InfiniteScrollCollection<Product_Search> Items { get; }

    public bool IsBusy
    {
        get => _isBusy;
        set
        {
            _isBusy = value;
            OnPropertyChanged();
        }
    }
    public MainViewModel()
    {
        Items = new InfiniteScrollCollection<Product_Search>
        {
            OnLoadMore = async () =>
            {
                IsBusy = true;

                // load the next page
                var page = Items.Count / PageSize;
                var items = await _dataService.GetItemsAsync(page, PageSize);

                IsBusy = false;

                // return the items that need to be added
                return items;
            },
            OnCanLoadMore = () =>
            {
                return Items.Count < 44;
            }
        };

        DownloadDataAsync();
    }

    private async Task DownloadDataAsync()
    {
        var items = await _dataService.GetItemsAsync(pageIndex: 0, pageSize: PageSize);
        Items.AddRange(items);
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

}

任何帮助都是至关重要的。

1 个答案:

答案 0 :(得分:1)

您的ListView.Items属性已绑定到您的MainViewModel.Items属性,需要触发PropertyChanged event来发出属性值更改的信号(对应于该属性本身或它的内容(如果InfiniteScrollCollection<>是可观察的集合)。

当您想替换Items源时,可以给它一个新值,表示它已更改并且您的ListView可能会刷新:

private InfiniteScrollCollection<Product_Search> _items;
public InfiniteScrollCollection<Product_Search> Items 
{ 
    get { return _items; }
    set
    {
        _items = value;
        OnPropertyChanged();
    }
}