如何从 WrapPanel 中删除或添加项目？

Question

我正在尝试创建一个原型，用户可以通过选择菜单项来显示或显示项目。我需要删除/折叠该项目，因为我需要 WrapPanel 中的其他项目占用空白空间。 wrapPanel 中的内容是使用 XMLDataProvider 动态生成的。我试图为菜单项分配命令，但无法使其工作。

XAML：

<Grid Margin="20">  
    <Menu x:Name="Manage_Menu" HorizontalAlignment="Left" Background="{x:Null}" ScrollViewer.VerticalScrollBarVisibility="Auto" Foreground="#FF2A2A2A" Margin="0,0,0,5" >
        <MenuItem Header="Show/Hide">
                  <MenuItem Header="1" Command="{x:Static local:MainWindow.FirstThumbVisibilityWindowCommand}" IsCheckable="true" IsChecked="True"/>
                  <MenuItem Header="2" Command="{x:Static local:MainWindow.FirstThumbVisibilityWindowCommand}" IsCheckable="true" />
                  <MenuItem Header="3" Command="{x:Static local:MainWindow.FirstThumbVisibilityWindowCommand}" IsCheckable="true" />
                  <MenuItem Header="4" Command="{x:Static local:MainWindow.FirstThumbVisibilityWindowCommand}" IsCheckable="true" />
                  <MenuItem Header="5" Command="{x:Static local:MainWindow.FirstThumbVisibilityWindowCommand}" IsCheckable="true" />
        </MenuItem>
    </Menu>
    <Frame Content="Frame" Source="../tiles.xaml" NavigationUIVisibility="Hidden" />
</Grid> 

我希望有人能够提供帮助。 整个解决方案可从此处获得：

http://cid-0c29483cf3a6a14d.office.live.com/self.aspx/WPF%5E_Tests/DragDropWrapPanel%5E_3.rar

请看一看。您会在左上角找到菜单，该菜单应用于隐藏/显示 wrapPanel 内的项目。 提前谢谢你。

Answer 1

从包装面板中添加或删除项目的一种方法是使用 ListBox 并将 ItemsPanel 配置为 WrapPanel

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel />
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

将 ListBox 绑定到 ObservableCollection，然后从绑定的集合中添加和删除视图模型。

Answer 2

这是一个从代码更改 WrapPanel 项目可见性的示例。

一些示例 XAML：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Orientation="Horizontal">
        <Button Content="0" Click="Button_Click"/>
        <Button Content="1" Click="Button_Click"/>
        <Button Content="2" Click="Button_Click"/>
    </StackPanel>
    <WrapPanel Grid.Row="1" x:Name="wrapPanel">
        <Rectangle Fill="Red" Width="100" Height="100"/>
        <Rectangle Fill="Green" Width="100" Height="100"/>
        <Rectangle Fill="Blue" Width="100" Height="100"/>
    </WrapPanel>
</Grid>

和按钮事件处理程序：

private void Button_Click(object sender, RoutedEventArgs e)
{
    int index = int.Parse((string)((sender as Button).Content));
    var child = this.wrapPanel.Children[index];
    child.Visibility = child.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
}

它只是根据按钮上的文本切换子项的可见性。

Answer 3

这里是一个仅是 XAML 的 quick-n-dirty 版本。它使用内置的 BooleanToVisibilityConverter 和 Element 绑定。

<Window x:Class="WrapPanelHideItems.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WrapPanelHideItems" Height="300" Width="300">

    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="boolToVis" />
    </Window.Resources>

    <StackPanel>
        <Menu>
            <MenuItem Header="Show/Hide">
                <MenuItem x:Name="mnuItemOne"
                          IsCheckable="True"
                          IsChecked="True"
                          Header="Show Item One" />
                <MenuItem x:Name="mnuItemTwo"
                          IsCheckable="True"
                          IsChecked="True"
                          Header="Show Item Two" />
                <MenuItem x:Name="mnuItemThree"
                          IsCheckable="True"
                          IsChecked="True"
                          Header="Show Item Three" />
                <MenuItem x:Name="mnuItemFour"
                          IsCheckable="True"
                          IsChecked="True"
                          Header="Show Item Four" />
                <MenuItem x:Name="mnuItemFive"
                          IsCheckable="True"
                          IsChecked="True"
                          Header="Show Item Five" />
            </MenuItem>
        </Menu>

        <WrapPanel Orientation="Horizontal"
                   HorizontalAlignment="Stretch"
                   VerticalAlignment="Stretch"
                   Background="Gray">
            <TextBlock Text="Item One"
                       Margin="5"
                       FontSize="25"
                       Foreground="Red"
                       Visibility="{Binding ElementName=mnuItemOne, Path=IsChecked,
                                            Converter={StaticResource boolToVis}}"/>
            <TextBlock Text="Item Two"
                       Margin="5"
                       FontSize="25"
                       Foreground="Blue"
                       Visibility="{Binding ElementName=mnuItemTwo, Path=IsChecked,
                                            Converter={StaticResource boolToVis}}"/>
            <TextBlock Text="Item Three"
                       Margin="5"
                       FontSize="25"
                       Foreground="Green"
                       Visibility="{Binding ElementName=mnuItemThree, Path=IsChecked,
                                            Converter={StaticResource boolToVis}}"/>
            <TextBlock Text="Item Four"
                       Margin="5"
                       FontSize="25"
                       Foreground="Yellow"
                       Visibility="{Binding ElementName=mnuItemFour, Path=IsChecked,
                                            Converter={StaticResource boolToVis}}"/>
            <TextBlock Text="Item Five"
                       Margin="5"
                       FontSize="25"
                       Foreground="Violet"
                       Visibility="{Binding ElementName=mnuItemFive, Path=IsChecked,
                                            Converter={StaticResource boolToVis}}"/>
        </WrapPanel>
    </StackPanel>
</Window>

当然，在现实世界的应用程序中，您可能希望使用 Styles 和 DataBinding 之类的东西，但这表明您不必太复杂就能获得想要的结果。越简单通常越好。