UWP中的多选Listview功能答案

【问题标题】：Multiple Selection Listview Function in UWPUWP中的多选Listview功能
【发布时间】：2019-08-10 16:09:11
【问题描述】：

我有一个带有多项选择的“updateList”列表视图。我希望如果用户单击（选择/选中）列表视图中的项目，它将转到“selectedUpdateList”列表视图。如果用户单击（未选中）列表视图上的相同项目，则该项目将从“selectedUpdateList”列表视图中删除。 XAML：

<ListView x:Name="updateList" Grid.Row="1" Margin="20,10,20,20"
                          AutomationProperties.AutomationId="ItemsListView"
                          AutomationProperties.Name="Items"
                          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                          ScrollViewer.VerticalScrollBarVisibility="Visible"
                          IsSwipeEnabled="False" SelectionMode="Multiple"
                          IsItemClickEnabled="True" IsMultiSelectCheckBoxEnabled="True" ItemClick="UpdateList_ItemClick">

                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="0,20,0,0" HorizontalAlignment="Stretch" Background="{x:Null}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <!--<CheckBox Grid.Column="0" />-->
                                <Image Grid.Column="1" Height="110" Width="168" Source="images/folder2.png" />

                                <TextBlock Margin="0,0,10,0" Text="{Binding ID}" Grid.Row="0" Foreground="Black" FontSize="17" VerticalAlignment="Top" HorizontalAlignment="Left" Height="auto" FontFamily="Segoe UI Black" TextWrapping="Wrap" TextAlignment="Justify" FontWeight="SemiBold" Visibility="Collapsed"/>
                                <ScrollViewer Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Height="95" Background="{x:Null}" Margin="10,5,0,0" VerticalScrollBarVisibility="Auto">
                                    <TextBlock Margin="0,0,10,0" Text="{Binding Judul}" Grid.Row="0" Foreground="Black" FontSize="17" VerticalAlignment="Top" HorizontalAlignment="Left" Height="auto" FontFamily="Segoe UI Black" TextWrapping="Wrap" TextAlignment="Justify" FontWeight="SemiBold"/>
                                </ScrollViewer>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>

                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>

                <ListView x:Name="selectedUpdateList" Grid.Row="1" Margin="20,10,20,20"
                          AutomationProperties.AutomationId="ItemsListView"
                          AutomationProperties.Name="Items" Visibility="Collapsed"
                          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                          ScrollViewer.VerticalScrollBarVisibility="Visible"
                          IsSwipeEnabled="False"
                          IsItemClickEnabled="False" IsTapEnabled="False">

                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="0,20,0,0" HorizontalAlignment="Stretch" Background="{x:Null}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>

                                <Image Grid.Column="0" Height="110" Width="168" Source="images/folder2.png" />

                                <TextBlock Margin="0,0,10,0" Text="{Binding ID}" Grid.Row="0" Foreground="Black" FontSize="17" VerticalAlignment="Top" HorizontalAlignment="Left" Height="auto" FontFamily="Segoe UI Black" TextWrapping="Wrap" TextAlignment="Justify" FontWeight="SemiBold" Visibility="Collapsed"/>
                                <Grid Grid.Column="1" Margin="10,5,0,0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto"/>
                                    </Grid.RowDefinitions>

                                    <ScrollViewer Grid.Row="0" Margin="0,0,5,5" VerticalAlignment="Top" HorizontalAlignment="Left" Height="45" Background="{x:Null}" VerticalScrollBarVisibility="Auto">
                                        <TextBlock Margin="0,0,10,10" Text="{Binding Judul}" Grid.Row="0" Foreground="Black" FontSize="17" VerticalAlignment="Top" HorizontalAlignment="Left" Height="auto" FontFamily="Segoe UI Black" TextWrapping="Wrap" TextAlignment="Justify" FontWeight="SemiBold"/>
                                    </ScrollViewer>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>

                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>

代码：

try
{
    string urlPath = "http:/..../index.php/fetchupdate";
    var httpClient = new HttpClient(new HttpClientHandler());
    var values = new List<KeyValuePair<string, string>>
    {

    };

    string jsonText = await response.Content.ReadAsStringAsync();
    JsonArray jsonArray = JsonArray.Parse(jsonText);
    foreach (JsonValue groupValue in jsonArray)
    {
        JsonObject groupObject = groupValue.GetObject();
        string idfile = groupObject["idfile"].GetString();
        string judul = groupObject["judul"].GetString();

        UpdateData update = new UpdateData();
        update.ID = idfile;
        update.Judul = judul;
        DataUpate.Add(update);
    }
    updateList.ItemsSource = DataUpate;
}
catch (HttpRequestException ex)
{
    requestErrorStack.Visibility = Visibility.Visible;
}
private void UpdateList_ItemClick(object sender, ItemClickEventArgs e)
{
    if (e.ClickedItem is UpdateData selectedItem)
    {
        selectedItem.IsSelected = !selectedItem.IsSelected;
        if (selectedItem.IsSelected == true)
        {
            UpdateData selected = new UpdateData();
            selected.Judul = selectedItem.Judul;
            selected.ID = selectedItem.ID;
            selectedData.Add(selected);
        }
        else
        {
            UpdateData selected = new UpdateData();
            selected.Judul = selectedItem.Judul;
            selected.ID = selectedItem.ID;
            selectedUpdateList.Items.Remove(selected);
        }
    }
    selectedUpdateList.ItemsSource = selectedData;
}

如果您在“updateList”列表视图中单击某个项目（未选中）时使用上述代码，则该项目不会从“selectedUpdateList”列表视图中删除。如何处理？

【问题讨论】：

如果我没有误解你的问题，你需要删除selectedData而不是selectedUpdateList.Items中的项目。
我想在“updateList”列表视图中未选中的项目上从“selectedUpdateList”列表视图中删除该项目
如果selectedData中仍然存在该项目，则无效。因为您指定了selectedUpdateList.ItemsSource = selectedData。
如何解决问题？
正如我所说，您需要从 selectedData 中删除该项目。

标签： c# json listview uwp

【解决方案1】：

我希望如果用户单击（选择/选中）列表视图中的项目，它将转到“selectedUpdateList”列表视图。如果用户单击（未选中）列表视图上的相同项目，则该项目将从“selectedUpdateList”列表视图中删除。

由于您没有提供Minimal, Complete, and Verifiable example。我只是根据你的要求做了一个简单的代码示例来达到同样的效果。

请检查以下代码示例：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <ListView x:Name="updateList" ItemsSource="{Binding updateDatas}" Grid.Column="0" Margin="20,10,20,20"
                      AutomationProperties.AutomationId="ItemsListView"
                      AutomationProperties.Name="Items"
                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                      ScrollViewer.VerticalScrollBarVisibility="Visible"
                      IsSwipeEnabled="False" SelectionMode="Multiple"
                      IsItemClickEnabled="True" IsMultiSelectCheckBoxEnabled="True" SelectionChanged="UpdateList_SelectionChanged">

        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="0,20,0,0" HorizontalAlignment="Stretch" Background="{x:Null}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="1" Height="110" Width="168" Source="images/folder2.png" />
                    <TextBlock Margin="0,0,10,0" Text="{Binding ID}" Grid.Row="0" Foreground="Black" FontSize="17" VerticalAlignment="Top" HorizontalAlignment="Left" Height="auto" FontFamily="Segoe UI Black" TextWrapping="Wrap" TextAlignment="Justify" FontWeight="SemiBold" Visibility="Collapsed"/>
                    <ScrollViewer Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Height="95" Background="{x:Null}" Margin="10,5,0,0" VerticalScrollBarVisibility="Auto">
                        <TextBlock Margin="0,0,10,0" Text="{Binding Judul}" Grid.Row="0" Foreground="Black" FontSize="17" VerticalAlignment="Top" HorizontalAlignment="Left" Height="auto" FontFamily="Segoe UI Black" TextWrapping="Wrap" TextAlignment="Justify" FontWeight="SemiBold"/>
                    </ScrollViewer>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

    <ListView x:Name="selectedUpdateList" ItemsSource="{Binding selectedData}" Grid.Column="1" Margin="20,10,20,20"
                      AutomationProperties.AutomationId="ItemsListView"
                      AutomationProperties.Name="Items"
                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                      ScrollViewer.VerticalScrollBarVisibility="Visible"
                      IsSwipeEnabled="False"
                      IsItemClickEnabled="False" IsTapEnabled="False">

        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="0,20,0,0" HorizontalAlignment="Stretch" Background="{x:Null}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Image Grid.Column="0" Height="110" Width="168" Source="images/folder2.png" />

                    <TextBlock Margin="0,0,10,0" Text="{Binding ID}" Grid.Row="0" Foreground="Black" FontSize="17" VerticalAlignment="Top" HorizontalAlignment="Left" Height="auto" FontFamily="Segoe UI Black" TextWrapping="Wrap" TextAlignment="Justify" FontWeight="SemiBold" Visibility="Collapsed"/>
                    <Grid Grid.Column="1" Margin="10,5,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>
                        <ScrollViewer Grid.Row="0" Margin="0,0,5,5" VerticalAlignment="Top" HorizontalAlignment="Left" Height="45" Background="{x:Null}" VerticalScrollBarVisibility="Auto">
                            <TextBlock Margin="0,0,10,10" Text="{Binding Judul}" Grid.Row="0" Foreground="Black" FontSize="17" VerticalAlignment="Top" HorizontalAlignment="Left" Height="auto" FontFamily="Segoe UI Black" TextWrapping="Wrap" TextAlignment="Justify" FontWeight="SemiBold"/>
                        </ScrollViewer>
                    </Grid>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
</Grid>

public sealed partial class MainPage : Page
{
    public ObservableCollection<UpdateData> updateDatas { get; set; }
    public ObservableCollection<UpdateData> selectedData { get; set; }
    public MainPage()
    {
        this.InitializeComponent();

        updateDatas = new ObservableCollection<UpdateData>();
        selectedData = new ObservableCollection<UpdateData>();
        for (int i=0;i<10;i++)
        {
            updateDatas.Add(new UpdateData() {ID=i,Judul="Judul "+i });
        }
        this.DataContext = this;
    }

    private void UpdateList_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        foreach (var item in e.AddedItems)
        {
            selectedData.Add((UpdateData)item);
        }
        foreach (var item in e.RemovedItems)
        {
            selectedData.Remove((UpdateData)item);
        }
    }
}

public class UpdateData
{
    public int ID { get; set; }
    public string Judul { get; set; }
}

【讨论】：

抱歉延迟回复。以及如何在列表视图中显示它？因为我尝试 selectedUpdateList.ItemSource = selectedData 不能出现在 selectedUpdateList 列表视图中
@Rose 您可以尝试创建一个新的空白 UWP 项目并复制我的代码进行测试。我相信你能理解我在做什么。