0

我正在使用 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>
4

1 回答 1

0

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

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

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

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

于 2013-08-31T15:32:03.237 回答