c# - 使用 Frame 和 Combobox MVVM 进行导航

Question

我正在尝试了解 MVVM，但我目前正纠结于如何处理导航。

目前我有一个页面，该页面中有一个框架，该框架负责在其他各种页面中进行框架。导航以前是使用下拉框处理的，并且在选择更改时它将以这种方式导航。

我不确定如何在不从模型 View 中触摸框架的情况下做到这一点，这最终会破坏 mvvm。

最后，我想要完成的是，单击组合框，选择一个项目，然后让下面的框架导航到正确的 View 。

我没有使用 Prism 或任何其他带有 MVVM 的框架，只是尝试手动完成所有操作。

Answer 1

ComboBox将显示 ObservableCollection由您的主视图模型公开的框架项目，并且 View 模型将具有所选项目的另一个属性。

您的主视图模型和框架项目 View 模型都继承自 ViewModelBase实现 INotifyPropertyChanged 的类，也许还有一些其他的东西。

所以，C#:

public ObservableCollection<ViewModelBase> FrameItems { get; protected set; }

private ViewModelBase _selectedFrameItem;
public ViewModelBase SelectedFrameItem {
    get { return _selectedFrameItem; }
    set {
        value = _selectedFrameItem;
        //  Defined in ViewModelBase
        OnPropertyChanged();
    }
}

您的主视图模型将填充 FrameItems在其构造函数中:

public MainViewModel()
{
    FrameItems = new ObservableCollection<ViewModelbase> {
        new IceCreamMenu(),
        new SmurfOptions(),
        new MagicSparklePonyFourierTransformConfiguration()
    };
}

每个框架项都是 ViewModelBase 的子类.它通过通知公开属性，包括 ObservableCollections它可能拥有的任何一组子事物。稍后我们将通过为它编写一个数据模板来显示它。

假设你已经给了你的 ViewModelBase甲级 String Title { get; set; }属性(property)。或者你可能想写一个 ViewModelBase 的子类。介绍 Title ;你的来电。现在让我们把它放在 ViewModelBase为简单起见。

XAML——这会忽略所有的布局，但这里不需要。

<ComboBox 
    ItemsSource="{Binding FrameItems}"
    SelectedItem="{Binding SelectedFrameItem}"
    DisplayMemberPath="Title"
    />

<Frame Content={Binding SelectedFrameItem}" />

好的，但它到底怎么知道如何处理 SelectedFrameItem ？!

简单的!写一个资源字典，比如说， ViewModelDataTemplates.xaml , 并将其合并到 App.xaml因此它的内容在应用程序的任何 XAML 中都是“可见的”。

应用程序.xaml

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <!-- Source is a relative path from project root directory -->
            <ResourceDictionary Source="ViewModelDataTemplates.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

...加上任何主题的东西或任何东西。

在 ViewModelDataTemplates.xaml ，为您的框架项目类定义数据模板。

假设你有一个 IceCreamMenu View 模型，带有 Flavors 的集合

public ObservableCollection<IceCreamFlavor> Flavors { get; protected set; }

...和一个 SelectedFlavor .您将定义命名空间 vm适本地使用 xmlns:vm资源字典上的属性。

ViewModelDataTemplates.xaml

<DataTemplate DataType="{x:Type vm:IceCreamMenu}">
    <Grid>
        <ListBox 
            ItemsSource="{Binding Flavors}"
            SelectedItem="{Binding SelectedFlavor}"
            />
    </Grid>
</DataTemplate>

<DataTemplate DataType="{x:Type vm:IceCreamFlavor}">
    <StackPanel Orientation="Horizontal">
        <Border 
            Height="20" 
            Width="20" 
            Margin="4" 
            Background={Binding Color, Converter={StaticResource ColorToBrushConverter}}" 
            />
        <Label Content="Name" />
    </StackPanel>
</DataTemplate>

如果您有现有的 UserControls你想通过数据模板使用，这很简单:假设你有一个 NotesTabView UserControl这是您的 NotesTabViewModel 的 View ，您可以像这样定义 DataTemplate:

<DataTemplate DataType="{x:Type vm:NotesTabViewModel}">
    <vw:NotesTabView />
</DataTemplate>