Xaml LongListMultiSelector：如何与MVVM一起使用

我正在使用LongListMultiSelector和Grouping显示城市列表。我的ViewModel具有绑定到LongListMultiSelector的

DataList

属性

在按钮单击事件中，我想从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));
        }
    }
}

公共级城市
{
公共字符串名称{get；set；}
公共字符串国家{get；set；}
公共字符串语言{get；set；}
}
公共类组：列表
{
公共组（字符串名称，IEnumerable项）
：基本（项目）
{
this.Title=名称；
}
公共字符串标题
{
得到；
设置
}
}
公共类myVM:INotifyPropertyChanged
{
静态列表城市列表；
公共列表(datalist),；
公共列表数据列表
{
得到
{
_datalist=GetCityGroups（）；
返回数据列表；
}
设置
{
_数据列表=值；
OnPropertyChanged（“数据列表”）；
}
}
私有静态IEnumerable GetCityList（）
{
cityList=新列表（）；
添加（new City（）{Name=“Milan”，Country=“IT”，Language=“意大利语”}）；
cityList.Add（new City（）{Name=“Roma”，Country=“IT”，Language=“意大利语”}）；
cityList.Add（new City（）{Name=“Madrid”，Country=“ES”，Language=“西班牙语”}）；
返回城市列表；
}
私有列表GetCityGroups（）
{
IEnumerable cityList=GetCityList（）；
返回GetItemGroups（cityList，c=>c.Country）；
}
私有静态列表GetItemGroups（IEnumerable itemList，Func getKeyFunc）
{
IEnumerable groupList=来自itemList中的项
按getKeyFunc（项）将项分组为g
orderby g.Key
选择新组（g键，g）；
返回groupList.ToList（）；
}
公共事件属性更改事件处理程序属性更改；
受保护的无效OnPropertyChanged（字符串propertyName）
{
if（PropertyChanged！=null）
{
PropertyChanged（这是新的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"/>

在phone: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>

---

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

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

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

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