Question

我正在使用LongListMultiSelector和Grouping显示城市列表。我的ViewModel有DataList属性，它绑定到LongListMultiSelector。

在按钮单击事件上，我想从LongListMultiSelector中删除一个项目，并且还想同时更新UI。我不明白我应该从哪里删除一个项目，以便因为MVVM，UI会自动更新。

以下是我的CS代码。

public class City
    {
        public string Name { get; set; }
        public string Country { get; set; }
        public string Language { get; set; }
    }


 public class Group<T> : List<T>
    {
        public Group(string name, IEnumerable<T> items)
            : base(items)
        {
            this.Title = name;
        }

        public string Title
        {
            get;
            set;
        }
    }




public class myVM : INotifyPropertyChanged
{
    static List<City> cityList;
    public List<Group<City>> _datalist;
    public List<Group<City>> DataList
    {
        get
        {
            _datalist = GetCityGroups();
            return _datalist;
        }
        set
        {
            _datalist = value;
            OnPropertyChanged("DataList");
        }
    }

    private static IEnumerable<City> GetCityList()
    {
        cityList = new List<City>();
        cityList.Add(new City() { Name = "Milan", Country = "IT", Language = "Italian" });
        cityList.Add(new City() { Name = "Roma", Country = "IT", Language = "Italian" });
        cityList.Add(new City() { Name = "Madrid", Country = "ES", Language = "Spanish" });
        return cityList;
    }

    private List<Group<City>> GetCityGroups()
    {
        IEnumerable<City> cityList = GetCityList();
        return GetItemGroups(cityList, c => c.Country);
    }

    private static List<Group<T>> GetItemGroups<T>(IEnumerable<T> itemList, Func<T, string> getKeyFunc)
    {
        IEnumerable<Group<T>> groupList = from item in itemList
                                          group item by getKeyFunc(item) into g
                                          orderby g.Key
                                          select new Group<T>(g.Key, g);

        return groupList.ToList();
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

以下是我的XAML代码

<Button Content="bind" Width="150" Height="150" VerticalAlignment="Bottom" Click="Button_Click"></Button>

    <toolkit:LongListMultiSelector x:Name="AddrBook" 
                                                   ItemsSource="{Binding DataList}"
                                               EnforceIsSelectionEnabled="True"
                                               JumpListStyle="{StaticResource AddrBookJumpListStyle}"
                                               IsSelectionEnabled="True"
                                               Background="Transparent"
                                               GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
                                               ItemTemplate="{StaticResource AddrBookItemTemplate}"
                                               LayoutMode="List"
                                               IsGroupingEnabled="true"
                                               HideEmptyGroups ="true"/>

在手机：PhoneApplicationPage.Resources我有xaml

<phone:PhoneApplicationPage.Resources>

        <DataTemplate x:Key="AddrBookItemTemplate">
            <StackPanel VerticalAlignment="Top">
                <TextBlock Text="{Binding Name, Mode=TwoWay}" />
                <TextBlock Text="{Binding Language, Mode=TwoWay}" />
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="AddrBookGroupHeaderTemplate">
            <Border Background="Transparent" Margin="12,8,0,8">
                <Border Background="{StaticResource PhoneAccentBrush}"  
                                        Padding="8,0,0,0" Width="62" Height="62"                 
                                        HorizontalAlignment="Left">
                    <TextBlock Text="{Binding Title, Mode=TwoWay}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6" 
            FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                </Border>
            </Border>
        </DataTemplate>


        <phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
        <phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
        <Style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector">
            <Setter Property="GridCellSize"  Value="113,113"/>
            <Setter Property="LayoutMode" Value="Grid" />
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="Auto" Height="Auto" Margin="6" >
                            <TextBlock Text="{Binding Title, Mode=TwoWay}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6" 
                                       Margin="8,0,0,0" Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Bottom"/>
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    </phone:PhoneApplicationPage.Resources>

Answer 1

您只需从VM中的DataList中删除该项。棘手的部分是处理MultiSelector的SelectedItems，因为它不可绑定。

对我来说最简单的解决方案是将命令连接到SelectionChanged事件并将SelectedItems作为参数传递给它（我使用了MvvmLight Toolkit中的Command类）。在命令内部，我检查更新的列表与VM中的旧列表之间的任何更改。

此外，您不应该使用按钮上的Click事件，在MVVM中，如果需要，Command Property与CommandParameter一起使用。对于没有内置命令属性的其他控件，您可以使用类似工具包（或其他MVVM框架）中的上述类。

其他需要注意的事项：如果希望UI在更改集合后自动更新，则需要使用ObservableCollection而不是List。此外，您实际上无法从DataList中删除任何内容，因为您总是重新读取您的硬编码项目。

LongListMultiSelector：如何在MVVM中使用它

1 个答案: