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>

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

- Diyan Bogdanov

---

你没有提供足够的代码，为了正确回答这个问题，我们需要看到你的主视图模型、将其映射到内容控件的绑定以及你想要显示的其他内容控件的名称。 - Mark Feldman

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>

因此，当主视图中的按钮被点击时，您只需更改ViewModel属性的值，DataTemplate将确保在UI中呈现相关视图。这是我自己定制的ICommand实现之一，就像RelayCommand那样，如果尚未加载视图模型，它将加载视图模型：

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

- Sheridan

Answer 2

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

请注意，local：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>

- Eric Ouellet