更改菜单项上的Conent Control模板？

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 :)

Answer 1

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();

Answer 2

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