WPF Merge ContextMenues in XAML - wpf

is it possible to merge two ContextMenues in XAML?
I created two ContextMenues as resources. I use them in a couple of DataTemplates and it works fine. However, for some DataTemplates, I would like to merge the two ContextMenues. Unfortunately, this does not seem to work.
Here's a bit of the code from one of these ContextMenues, the other ones are defined the same:
<ContextMenu x:Key="CtxIEditableViewModel" DataContext="{Binding PlacementTarget,RelativeSource={RelativeSource Self}}">
<MenuItem Header="Edit" Command="{Binding Path=DataContext.EditCommand}" CommandParameter="{Binding }">
<MenuItem.Icon>
<Image Source="{StaticResource IcoEdit}" Width="16" Height="16"></Image>
</MenuItem.Icon>
</MenuItem>
...
Using one of those ContextMenues works fine:
<StackPanel Orientation="Horizontal" ContextMenu="{StaticResource CtxIEditableViewModel}">
But how to merge two? This does not work
<StackPanel Orientation="Horizontal">
<ContextMenu>
<ContextMenu.ItemsSource>
<CompositeCollection>
<StaticResource ResourceKey="CtxIEditableViewModel" />
<StaticResource ResourceKey="CtxRootViewModel" />
</CompositeCollection>
</ContextMenu.ItemsSource>
And this does not work either:
<StackPanel Orientation="Horizontal">
<ContextMenu>
<StaticResource ResourceKey="CtxIEditableViewModel" />
<StaticResource ResourceKey="CtxRootViewModel" />
</ContextMenu>
When I run the programm an exception is thrown saying that the context menu may not contain a logical or visual parent. Since it works fine if I only use one ContextMenu, I do not understand the exception message.
How can I merge those two ContextMenues in XAML (or is it not possible at all)?

here one way to do it using CompositeCollection
<Window.Resources>
<x:Array Type="{x:Type sys:Object}" x:Key="CtxIEditableViewModel">
<MenuItem Header="Edit1"/>
<MenuItem Header="Edit2"/>
</x:Array>
<x:Array Type="{x:Type sys:Object}" x:Key="CtxRootViewModel">
<MenuItem Header="Root1" />
<MenuItem Header="Root2"/>
</x:Array>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="LightBlue">
<Border.ContextMenu>
<ContextMenu>
<ContextMenu.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{StaticResource CtxIEditableViewModel}" />
</CompositeCollection>
</ContextMenu.ItemsSource>
</ContextMenu>
</Border.ContextMenu>
</Border>
<Border Grid.Row="1" Background="LightGreen">
<Border.ContextMenu>
<ContextMenu>
<ContextMenu.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{StaticResource CtxRootViewModel}" />
</CompositeCollection>
</ContextMenu.ItemsSource>
</ContextMenu>
</Border.ContextMenu>
</Border>
<Border Grid.Row="2" Background="Khaki">
<Border.ContextMenu>
<ContextMenu>
<ContextMenu.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{StaticResource CtxIEditableViewModel}" />
<CollectionContainer Collection="{StaticResource CtxRootViewModel}" />
</CompositeCollection>
</ContextMenu.ItemsSource>
</ContextMenu>
</Border.ContextMenu>
</Border>
</Grid>

Related

How to stretch the content of a templated MenuItem using WPF

in my WPF application I have a Menu defined as follows:
<Menu
Grid.Column="1"
MinWidth="50"
MinHeight="50"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
Visibility="{Binding Path=ShowSynergies, Converter={StaticResource BoolToVisConverter}}">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<MenuItem
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Stretch"
BorderBrush="Black"
BorderThickness="1"
ItemsSource="{Binding Path=CurrentlyAvailableSynergies, Source={StaticResource ResourceKey=VM}}">
<MenuItem.Header>
<TextBlock
Margin="5"
FontSize="18"
Text="{Binding Path=ActiveSynergy.Synergy, Source={StaticResource ResourceKey=VM}}"
TextAlignment="Center" />
</MenuItem.Header>
<MenuItem.ToolTip>
<TextBlock Text="{Binding Path=ActiveSynergy.Synergy, Source={StaticResource ResourceKey=VM}}" />
</MenuItem.ToolTip>
<MenuItem.Resources>
<HierarchicalDataTemplate DataType="{x:Type ent:VisualSynergy}" ItemsSource="{Binding Path=AvailableDiameters}">
<TextBlock Text="{Binding SynergyText}"/>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type ent:VisualDiameter}">
<TextBlock
VerticalAlignment="Stretch"
Background="Purple"
Text="{Binding Path=VisualValue}">
<intr:Interaction.Triggers>
<intr:EventTrigger EventName="PreviewMouseLeftButtonDown">
<intr:InvokeCommandAction Command="{Binding Path=SelectSynergyCommand}">
<intr:InvokeCommandAction.CommandParameter>
<MultiBinding Converter="{StaticResource ResourceKey=StdMultiConverter}">
<Binding Path="." />
<Binding Path="." Source="{StaticResource ResourceKey=VM}" />
</MultiBinding>
</intr:InvokeCommandAction.CommandParameter>
</intr:InvokeCommandAction>
</intr:EventTrigger>
</intr:Interaction.Triggers>
</TextBlock>
</DataTemplate>
</MenuItem.Resources>
</MenuItem>
</Menu>
Everything is working as intended, all data is bound properly and updated when it should be updated.
My larges issue is that the final TextBlock (the one related to my VisualDiameter type) doe snot stretch to fill the whole MenuItem available space (see screenshot). I've tried also to redefine styles, but since I am inside the MenuItem resources definitions there is something missing and no stretching happens.
Looking ot other questions my issue seems related to the bizzarre definition of TreeView and MenuItem by Microsoft, but I am not confidend enough to start tinkering with basic templates.
You should define an ItemContainerStyle and bind the Command property of the MenuItem container rather than trying to stretch the TextBlock in the DataTemplate:
<MenuItem
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
VerticalContentAlignment="Stretch"
BorderBrush="Black"
BorderThickness="1"
ItemsSource="{Binding Path=CurrentlyAvailableSynergies}">
<MenuItem.ItemContainerStyle>
<Style TargetType="MenuItem">
<Setter Property="Command" Value="{Binding SelectSynergyCommand}" />
</Style>
</MenuItem.ItemContainerStyle>
<MenuItem.Header>
...

How to modify Avalon 2.0 startup layout WPF

I have downloaded the avalon 2.0 and on load the tool panel starts on the right and the files panel starts on the left.
I am trying to get the tool panel to dock on the left on load even when I have deleted everything that is related to FileViewModel which loads on the left a blank panel stays on the left.
This image below shows how the window currently loads:
I want to have the tool panel loads on the left like this:(I achieved this by dragging the tool pane on run time.
In my WPF I can only see one LayoutAnchorablePane so I can't see why the screen is split into two?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Grid.Row="0">
<MenuItem Header="File">
<MenuItem Header="New" Command="{Binding NewCommand}"/>
<MenuItem Header="Open" Command="{Binding OpenCommand}"/>
<Separator/>
<MenuItem Header="Save" Command="{Binding ActiveDocument.SaveCommand}"/>
<MenuItem Header="Save As..." Command="{Binding ActiveDocument.SaveAsCommand}"/>
<Separator/>
<MenuItem Header="Close" Command="{Binding ActiveDocument.CloseCommand}"/>
</MenuItem>
<MenuItem Header="Tools">
<MenuItem Header="{Binding FileStats.Title, Mode=TwoWay}" IsChecked="{Binding FileStats.IsVisible, Mode=TwoWay}" IsCheckable="True"/>
<MenuItem Header="{Binding Exported.Title, Mode=TwoWay}" IsChecked="{Binding Exported.IsVisible, Mode=TwoWay}" IsCheckable="True"/>
<MenuItem Header="{Binding ExportedResult.Title, Mode=TwoWay}" IsChecked="{Binding ExportedResult.IsVisible, Mode=TwoWay}" IsCheckable="True"/>
<MenuItem Header="{Binding Manifest.Title, Mode=TwoWay}" IsChecked="{Binding Manifest.IsVisible, Mode=TwoWay}" IsCheckable="True"/>
</MenuItem>
<MenuItem Header="Layout">
<MenuItem Header="Load" Command="{Binding LoadLayoutCommand, ElementName=mainWindow}"/>
<MenuItem Header="Save" Command="{Binding SaveLayoutCommand, ElementName=mainWindow}"/>
<MenuItem Header="Dump to Console" Click="OnDumpToConsole"/>
</MenuItem>
</Menu><!--AnchorablesSource="{Binding Tools}" DocumentsSource="{Binding Files}"-->
<avalonDock:DockingManager x:Name="dockManager"
AnchorablesSource="{Binding Tools}"
DocumentsSource="{Binding Files}"
ActiveContent="{Binding ActiveDocument, Mode=TwoWay, Converter={StaticResource ActiveDocumentConverter}}"
Grid.Row="1" >
<avalonDock:DockingManager.LayoutItemTemplateSelector>
<local:PanesTemplateSelector>
<local:PanesTemplateSelector.FileStatsViewTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding FileSize}"/>
<TextBlock Text="{Binding LastModified}"/>
<TextBox Text="test"/>
</StackPanel>
</DataTemplate>
</local:PanesTemplateSelector.FileStatsViewTemplate>
</local:PanesTemplateSelector>
</avalonDock:DockingManager.LayoutItemTemplateSelector>
<avalonDock:DockingManager.LayoutItemContainerStyleSelector>
<local:PanesStyleSelector>
<local:PanesStyleSelector.ToolStyle>
<Style TargetType="{x:Type avalonDock:LayoutAnchorableItem}">
<Setter Property="Title" Value="{Binding Model.Title}"/>
<Setter Property="IconSource" Value="{Binding Model.IconSource}"/>
<Setter Property="Visibility" Value="{Binding Model.IsVisible, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter={x:Static Visibility.Hidden}}"/>
<Setter Property="ContentId" Value="{Binding Model.ContentId}"/>
<Setter Property="IsSelected" Value="{Binding Model.IsSelected, Mode=TwoWay}"/>
<Setter Property="IsActive" Value="{Binding Model.IsActive, Mode=TwoWay}"/>
</Style>
</local:PanesStyleSelector.ToolStyle>
</local:PanesStyleSelector>
</avalonDock:DockingManager.LayoutItemContainerStyleSelector>
<avalonDock:DockingManager.LayoutUpdateStrategy>
<local:LayoutInitializer/>
</avalonDock:DockingManager.LayoutUpdateStrategy>
<avalonDock:LayoutRoot>
<avalonDock:LayoutPanel Orientation="Horizontal" >
<avalonDock:LayoutAnchorablePane Name="ToolsPane" DockHeight="150" >
</avalonDock:LayoutAnchorablePane>
<avalonDock:LayoutDocumentPane />
</avalonDock:LayoutPanel>
</avalonDock:LayoutRoot>
</avalonDock:DockingManager>
</Grid>
this seems to work, but take care that the sample is saving the state
<avalonDock:LayoutRoot>
<avalonDock:LayoutPanel Orientation="Horizontal">
<avalonDock:LayoutAnchorablePane Name="ToolsPane" DockWidth="100">
<avalonDock:LayoutAnchorable>
<TextBlock>tototo</TextBlock>
</avalonDock:LayoutAnchorable>
</avalonDock:LayoutAnchorablePane>
<avalonDock:LayoutDocumentPane/>
</avalonDock:LayoutPanel>
</avalonDock:LayoutRoot>
</avalonDock:DockingManager>

Bind to parent control from within context menu within data template

I'm wanting to bind to a parent control from a context menu within a datatemplate.
Unfortunately I'm restricted to .net 3.5 and can't use the x:reference extension introduced in .net 4.
Below is an example of what I'm trying to do
<Window x:Class="WpfApplication17.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication17"
Name="window">
<Window.Resources>
<DataTemplate DataType="{x:Type local:Car}">
<Rectangle Width="100" Height="100" Fill="Red">
<Rectangle.ContextMenu>
<ContextMenu>
<MenuItem Header="{Binding Colour}"/>
<MenuItem Header="{Binding ElementName=window, Path=ActualWidth}"/>
</ContextMenu>
</Rectangle.ContextMenu>
</Rectangle>
</DataTemplate>
</Window.Resources>
</Window>
But I get "Cannot find source for binding with reference 'ElementName=window'" error due to the context menu not being part of the visual tree.
Edit :
That works great! .. however, it doesn't seem to work when I use a composite collection such as the following
<Window.Resources>
<DataTemplate DataType="{x:Type local:Car}">
<Rectangle Width="100" Height="100" Fill="Red"
Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}">
<Rectangle.ContextMenu>
<ContextMenu>
<ContextMenu.ItemsSource>
<CompositeCollection>
<MenuItem Header="{Binding Colour}"/>
<MenuItem Header="{Binding Path=PlacementTarget.Tag.ActualWidth, RelativeSource={RelativeSource AncestorType=ContextMenu}}"/>
</CompositeCollection>
</ContextMenu.ItemsSource>
</ContextMenu>
<!--<ContextMenu>
<MenuItem Header="{Binding Colour}"/>
<MenuItem Header="{Binding Path=PlacementTarget.Tag.ActualWidth, RelativeSource={RelativeSource AncestorType=ContextMenu}}"/>
</ContextMenu>-->
</Rectangle.ContextMenu>
</Rectangle>
</DataTemplate>
</Window.Resources>
Please try this:
<DataTemplate DataType="{x:Type local:Car}">
<Rectangle Width="100" Height="100" Fill="Red"
Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}">
<Rectangle.ContextMenu>
<ContextMenu>
<MenuItem Header="{Binding Colour}"/>
<MenuItem Header="{Binding Path=PlacementTarget.Tag.ActualWidth, RelativeSource={RelativeSource AncestorType=ContextMenu}}"/>
</ContextMenu>
</Rectangle.ContextMenu>
</Rectangle>
</DataTemplate>
See my answer here too.

WPF Control to emulate Outlook Attachment-View

I'm trying to get the ListView to look like the MS Outlook Attachment-Control. I've already got the horizontal scrolling, but it still displays only one item in a row.
How can I get it to look like this?
What I've achieved so far:
<Grid x:Name="grdAttachments"
Grid.Row="4"
Grid.Column="1"
Grid.ColumnSpan="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="45" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Margin="3,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Cursor="Hand"
Text="Angefügt:" />
<ScrollViewer Grid.Row="0" Grid.Column="2">
<ListBox x:Name="libAttachments"
Background="Transparent"
ItemsSource="{Binding Attachments}"
MouseDoubleClick="lvAttachments_MouseDoubleClick">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
<StackPanel.ContextMenu>
<ContextMenu>
<ContextMenu.Items>
<MenuItem Click="btnOpenAttachment_Click" Header="Öffnen">
<MenuItem.Icon>
<Image Source="/Images/magnifier.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Click="btnSaveAttachment_Click" Header="Speichern unter">
<MenuItem.Icon>
<Image Source="/Images/disk-black.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu.Items>
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
It sounds like what you want is an ListBox with a custom ItemsPanel.
<ListBox>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
The snippet above configures a ListBox to use a WrapPanel as the layout provider or "ItemsPanel" for the items it is to present. From there it may make sense to implement a custom Item Container style, and/or custom Data Templates. You could easily apply a DataTemplate as you did above if you are using an MVVM pattern and data binding to a collection (preferably observable)
<DataTemplate>
<StackPanel Margin="0,0,10,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
</StackPanel>
</DataTemplate>
To complete this picture, a scroll viewer can be used so long as it's height is constrained by either a parent layout control (Grid.Row = 1 where RowDefinition Height="constant") or my an explicit height being set on the ScrollViewer.
My final solution based on yours looks like this:
<ScrollViewer HorizontalScrollBarVisibility="Disabled">
<ListBox
ItemsSource="{Binding Attachments}"
MouseDoubleClick="lvAttachments_MouseDoubleClick"
SelectionMode="Single">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
<StackPanel.ContextMenu>
<ContextMenu>
<ContextMenu.Items>
<MenuItem Click="btnOpenAttachment_Click" Header="Öffnen">
<MenuItem.Icon>
<Image Source="/Images/magnifier.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Click="btnSaveAttachment_Click" Header="Speichern unter">
<MenuItem.Icon>
<Image Source="/Images/disk-black.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu.Items>
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
A few things to note: When possible, consider using Commands instead of events, they can lead to looser coupling. Introducing a Behavior might even make sense if the behavior it's self is something that you might have other places in your project or re-usability is ideal.
Ok so where it seems you got snagged up was with your ListBox still pushing things in single column fashion and the lack of ability to give you something to fire off say a click event. So what I had in mind was something more like this;
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="300" HorizontalContentAlignment="Stretch">
<ItemsControl ItemsSource="{Binding Collection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="5,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<HyperlinkButton Margin="5,0,0,0" Text="{Binding File.Name}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
I wasn't to sure what you were trying to do with your magnifier and disk though I see your Clicks for them, but you can add those to this layout however you like, just a note though, I just free-handed this between meetings so never built it but should work fine. If not we'll plug at it again. Main differences are changing to a hyperlinkbutton to give you click and some other subtle differences from Firoso's but his is still technically sound, or should be anyway :)

How to remove or add an item from a WrapPanel?

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.
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.
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.
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.

Resources