Question

我对wpf和MVVM都是全新的。我有一个Mainwindow有两个视图左侧有一个带有列表框的用户控件，列表框里面有一个编辑按钮。在右边我有另一个视图，其中包含用于查看和编辑记录的所有控件。我可以在列表框中选择一个项目并编辑我的记录，因为使用绑定它会自动填充selectedItem对象。我想要做的是当用户点击编辑按钮时，如果他们点击列表框中包含的另一个按钮，则显示右侧的视图，然后在右侧显示该视图并关闭上一个视图。我想我在这里缺少一个大概念，因为大多数例子都是简单化的，只是展示一个视图。我真的不想在后面的代码中做到这一点。我看过John smiths标签，但是想要做一些没有标签的同事。任何帮助将不胜感激。

Answer 1

听起来两个视图需要共享相同的上下文（即ViewModel），然后它们将通过依赖属性的魔力自动保持同步...

Answer 2

我可能会尝试设置它，以便单击任一按钮（查看或编辑）设置右框架的DataContext。 RightFrame视图使用基于DataContext的DataTemplates显示。

所以你的xaml会是这样的：

<DataTemplate DataType={x:Type MyEditingViewModel}>
    <!-- Editing Object View -->
</DataTemplate>

<DataTemplate DataType={x:Type MyViewingViewModel}>
    <!-- Viewing Object View -->
</DataTemplate>

您的按钮点击事件将是这样的：

private void EditButton_Click(object sender, EventArgs e)
{
    RightFrame.DataContext = new MyEditingViewModel((sender as Button).DataContext)
}

private void ViewButton_Click(object sender, EventArgs e)
{
    RightFrame.DataContext = new MyViewingViewModel((sender as Button).DataContext)
}

Answer 3

所以基本上，你要做的就是让你的视图模型决定它应该呈现在哪个视图中，并根据用户的选择做出决定。

我是如何做到这一点的：

我的视图模型公开了一个视图样式属性，它是一个可枚举的属性。在视图模型（通常是用户控件）的视图中，我实现了DockPanel来包含每种视图样式。每个DockPanel都分配了一个样式，样式定义如下：

<Style x:Key="Style_View1" TargetType="DockPanel">
    <Setter Property="Visibility" Value="Collapsed"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding ViewStyle}" Value="View1">
            <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

<Style x:Key="Style_View2" TargetType="DockPanel">
    <Setter Property="Visibility" Value="Collapsed"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding ViewStyle}" Value="View2">
            <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

（如果DockPanel或Grid更适合您的方案，显然您不需要使用StackPanel。并且您可以为每种风格实现不同的用户控件查看是否要保持代码分割良好。）

因此，只要ViewStyle的值是具有相应样式的值，该视图样式就是可见的。由于默认情况下所有样式都将Visibility设置为Collapsed，因此最多只能看到一种视图样式。

有很多方法可以选择视图样式 - 为每个创建一个命令并将其绑定到按钮，创建一组单选按钮并使用值转换器，设置视图样式以响应视图中的其他属性模型 - 无论有效。

使用MVVM显示视图的正确方法

3 个答案: