Changing Conent Control template on Menu Item click?
-
13-07-2021 - |
Question
Can you please tell me how to change content template when, in WPF, when it is clicked on different Menu Item headers. I've defined user control that I can put it as a template.
For example: Menu Items are: Home, Players, Team . when i click on Home I want that specific template in my Content Control to pop up, tehen when I click on Players I want another template (list of players) to pop in Content Control as template.
How to do that with triggers in XAML?
Thank you very much :)
Solution
You can use a ContentControl
to host whatever your content will be, and set the ContentControl.ContentTemplate
based on how you want to draw your content.
As a very basic example,
<ContentControl x:Name="MyContentControl">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding }" Value="Home">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<local:MyHomeUsercontrol />
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding }" Value="Players">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<local:MyPlayersUsercontrol />
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding }" Value="Team">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<local:MyTeamUsercontrol />
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style>
</ContentControl.Style>
</ContentControl>
And on MenuItem.Click
MyContentControl.Content = "Home"; // or "Players" or "Team"
In this example I'm using a string
for the ContentControl.Content
, however if you were to use a class object such as a HomeViewModel
or PlayersViewModel
, your XAML could be simplified to use implicit data templates, which are templates that automatically get used whenever WPF tries to draw a specific class
<Window.Resources>
<DataTemplate DataType="{x:Type HomeViewModel}">
<local:MyHomeUserControl />
</DataTemplate>
<DataTemplate DataType="{x:Type PlayersViewModel}">
<local:MyPlayersUserControl />
</DataTemplate>
<DataTemplate DataType="{x:Type TeamViewmModel}">
<local:MyTeamUserControl />
</DataTemplate>
</Window.Resources>
<ContentControl x:Name="MyContentControl" />
and
MyContentControl.Content = new HomeViewModel();
OTHER TIPS
How about using a tab control with tab placement at the top? it would be much cleaner that way..
Edit; Example:
<TabControl>
<TabItem>
<TabItem.Header>
<TextBlock Text="Football header!"/>
</TabItem.Header>
<TabItem.Content>
<Button Content="Push for football!"/>
</TabItem.Content>
</TabItem>
</TabControl>
this might help also; http://www.switchonthecode.com/tutorials/the-wpf-tab-control-inside-and-out