Question

我在Listview中有一个Listview，你可以在我的代码中看到。当我打开另一个类别时，我正试图折叠其他类别。那可能吗？我尝试了很多东西，但我不知道如何访问其他行中的元素......

<ListView x:Name="MainListView"
              ItemsSource="{x:Bind menu}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment"
                        Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:MainCategories">
                <Grid Background="blue">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <TextBlock x:Name="test"
                               Text="{x:Bind CategoryName}"
                               Tapped="Category_TextBlock_Tapped"
                               FontSize="25" />
                    <Grid Grid.Row="1"
                          Name="tittleGrid"
                          Background="Gray">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="Name"
                                   HorizontalAlignment="Center" />
                        <Border BorderBrush="Black"
                                BorderThickness="1,0,1,0"
                                Grid.Column="1">
                            <TextBlock HorizontalAlignment="Center"
                                       Text="Price" />
                        </Border>
                        <TextBlock Text="QUantity"
                                   Grid.Column="2"
                                   HorizontalAlignment="Center" />
                    </Grid>
                    <ListView x:Name="SubListView"
                              Grid.Row="2"
                              Background="YellowGreen"
                              ItemsSource="{x:Bind SubMenuItems}">
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="HorizontalContentAlignment"
                                        Value="Stretch" />
                                <Setter Property="Padding"
                                        Value="0" />
                                <Setter Property="VerticalContentAlignment"
                                        Value="Stretch" />
                            </Style>
                        </ListView.ItemContainerStyle>
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="data:Dishes">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="1*" />
                                        <ColumnDefinition Width="1*" />
                                        <ColumnDefinition Width="1*" />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock VerticalAlignment="Center"
                                               Text="{x:Bind dishName}"
                                               HorizontalAlignment="Center" />
                                    <Border BorderBrush="Black"
                                            BorderThickness="1,0,1,0"
                                            Grid.Column="1">
                                        <TextBlock VerticalAlignment="Center"
                                                   Grid.Column="1"
                                                   HorizontalAlignment="Center"
                                                   Text="{x:Bind dishPrice}" />
                                    </Border>
                                    <TextBlock Grid.Column="2"
                                               VerticalAlignment="Center"
                                               HorizontalAlignment="Center"
                                               Text="{x:Bind dishPrice}" />
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

这是我已经制作的切换可见性方法，并且对于我点击的那个工作正常但我想在展开我点击的那个时折叠所有其他...我的代码中可能有很多错误但是我是UWP的新手

private void Category_TextBlock_Tapped(Object sender, TappedRoutedEventArgs e)
    {           
        CloseAllOthers();
        TextBlock categoryName = sender as TextBlock;
        Grid grid = (categoryName.Parent as Grid);
        ToggleVisibility(grid);

    }

    private void ToggleVisibility(Grid grid)
    {

        foreach (var gr in grid.Children)
        {
            if (gr.GetType() == grid.GetType() || gr.GetType() == MainListView.GetType())
            {
                if (gr.Visibility == Visibility.Visible)
                {
                    gr.Visibility = Visibility.Collapsed;
                }
                else
                    gr.Visibility = Visibility.Visible;
            }
        }
    }

My result so far and the collapsed version

Answer 1

以下是您想要做的简化示例：

<ListView x:Name="menu" ItemsSource="{x:Bind MenuItems}" IsItemClickEnabled="True" ItemClick="onItemClick">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- Disable virtualization -->
            <StackPanel/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.Resources>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="MinHeight" Value="0"/>
        </Style>
    </ListView.Resources>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:MenuItem">
            <StackPanel>
                <TextBlock Text="{x:Bind Text}" FontWeight="Bold" Margin="10,10,0,10"/>
                <ListView x:Name="subMenu" ItemsSource="{x:Bind SubItems}" Visibility="Collapsed">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="local:MenuItem">
                            <TextBlock Margin="20,5,0,5" Text="{x:Bind Text}"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

public class MenuItem
{
    public string Text { get; set; }
    public List<MenuItem> SubItems { get; set; }
}

public sealed partial class MainPage : Page
{
    public List<MenuItem> MenuItems { get; }

    public MainPage()
    {
        InitializeComponent();

        MenuItems = Enumerable.Range(1, 3).Select(i => new MenuItem()
        {
            Text = $"Menu item {i}",
            SubItems = Enumerable.Range(1, 3).Select(j => new MenuItem()
            {
                Text = $"Sub item {i}.{j}",
            }).ToList(),
        }).ToList();
    }

    private void onItemClick(object sender, ItemClickEventArgs e)
    {
        foreach (var item in menu.Items)
        {
            var container = (ListViewItem)menu.ContainerFromItem(item);
            if (container != null)
            {
                var subMenu = (container.ContentTemplateRoot as FrameworkElement)?.FindName("subMenu") as FrameworkElement;
                if (subMenu != null)
                {
                    subMenu.Visibility = e.ClickedItem == item ? Visibility.Visible : Visibility.Collapsed;
                }
            }
        }
    }
}

我不一定会推荐这种方法;我更喜欢使用带有绑定的数据驱动方法来控制子菜单在选择父列表项时的可见性，而不是直接访问视图，但这对于简单的场景来说很好。

访问Listview中的项目

1 个答案: