WPF如何更改ContentControl内容

Question

如何在单击按钮时更改内容控件的内容。 例如，当我点击某个按钮时，我有一个名为“主页”的用户控件的内容控件，我想用另一个用户控件更改内容控件的内容。

<Window ...
    xmlns:ViewModel="clr-namespace:PAL_PlayAndLearn.ViewModels"
    xmlns:Pages="clr-namespace:PAL_PlayAndLearn.Pages"
    ...>
<Window.DataContext>
    <ViewModel:AppViewModel />
</Window.DataContext>
    <Grid>
       <ContentControl Content="{Binding HomePage}"/>
    </Grid>
</Window>

你能帮助我吗，因为我没有多少时间。

Answer 1

您基本上需要一个主视图或父视图模型。 这个视图模型应该有一个BaseViewModel类型的属性，比方说名为ViewModel 。 所有其他页面视图模型都应该扩展此基class 。

<ContentControl Content="{Binding ViewModel}" />

现在，因为您的视图模型都具有BaseViewModel的基本类型，所以它们都可以设置为ViewModel属性的值...因此，要加载新的视图模型，请将其设置为此属性的值：

ViewModel = new HomeView();

但是我们如何显示相关的观点呢？ 让我们使用DataTemplate为我们做这个...为你将在这里使用的每个视图模型添加这个和类似的条目：

<DataTemplate DataType="{x:Type ViewModels:HomeViewModel}">
    <Views:HomeView />
</DataTemplate>

现在，只要我们将相关视图模型设置为ViewModel属性的值，WPF就会呈现我们的视图。 最后， Button ？ 那么我们需要主视图模型中的ICommand连接到主视图中的Button ，我建议使用RelayCommand 。 请注意，您需要更改主视图：

<Grid>
    <!-- Add your Buttons or Menu here, above where the views will be -->
    <ContentControl Content="{Binding HomePage}"/>
</Grid>

因此，在主视图中单击Button时，只需更改ViewModel属性的值， DataTemplate将确保在UI中呈现相关视图。 这是我自己的自定义ICommand实现之一，如RelayCommand ，如果尚未加载，它将加载视图模型：

public ICommand DisplayHomeView
{
    get { return new ActionCommand(action => ViewModel = new HomeViewModel(), 
        canExecute => !IsViewModelOfType<HomeViewModel>()); }
}

Answer 2

Sheridan的答案非常好，但我提供了一个完整的解决方案，因为我花了一些时间把所有东西放在一起。 希望它可以帮助某人:-) ....

请注意比本地：UserControlSpecialSignalTtrModel继承自SignalProviderSpecial。

<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:ParametricStudyAnalysis.ScopeSelection.Special"
             xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid" x:Class="ParametricStudyAnalysis.ScopeSelection.Special.UserControlAddSpecialSignal"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.DataContext>
        <local:UserControlAddSpecialSignalModel></local:UserControlAddSpecialSignalModel>
    </UserControl.DataContext>

    <UserControl.Resources>
        <DataTemplate DataType="{x:Type local:UserControlSpecialSignalTtrModel}">
            <local:UserControlSpecialSignalTtr/>
        </DataTemplate>     
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>


        <GroupBox Header="Signal type" Grid.Row="0" Padding="5">
            <xcdg:DataGridControl Name="DataGrid" SelectionMode="Single" ItemsSource="{Binding SpecialSignalEntries}"
                              SelectedItem="{Binding SpecialSignalEntrySelected}" Height="200">
            <xcdg:DataGridControl.Columns>
                <xcdg:Column FieldName="Name" Title="Type of special signal" ReadOnly="True"></xcdg:Column>
            </xcdg:DataGridControl.Columns>
        </xcdg:DataGridControl>
        </GroupBox>

        <GroupBox Header="Parameters" Grid.Row="1" Margin="0,3,0,0" Padding="5">
            <ContentControl Name="MyContentControl" 
                            DataContext="{Binding SpecialSignalEntrySelected, Mode=OneWay}" 
                            Content="{Binding SignalProviderSpecial}">
            </ContentControl>
        </GroupBox>
    </Grid>
</UserControl>