How to remove or add an item from a WrapPanel? - wpf

Question

I am trying to create a prototype where the user can show or display items by selecting the menu items. I need the item to be removed/Collapsed because I need the empty space to be taken by other items in WrapPanel. The content in the wrapPanel is generated dynamically with XMLDataProvider. I tried to assign commands for the menu items but was not able to make it work.
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>
I hope someone will be able to help.
The whole solution is available from here:
http://cid-0c29483cf3a6a14d.office.live.com/self.aspx/WPF%5E_Tests/DragDropWrapPanel%5E_3.rar
Please take a look. You will find Menu on top left corner that should be used to hide/show items inside the wrapPanel.
Thank you in advance.

Answer 1

One way to add or remove items from a wrap panel is use a ListBox with the ItemsPanel configured as a WrapPanel
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
Bind the ListBox to an ObservableCollection and then add and remove your view models from the bound collection.

Answer 2

Here is an example of changing the visibility of WrapPanel items from code.
Some sample 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>
and the button event handler:
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;
}
which just toggles the visibility of the child corresponding to the text on the button.

Answer 3

Here is a quick-n-dirty version that is XAML only. It uses the built-in BooleanToVisibilityConverter, and Element binding.
<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>
Of course, in a real-world app, you'd want to use things like Styles and perhaps DataBinding, but this shows that you don't have to be complex to get the results you want. Simpler is usually better.