将 ContentControl 绑定到视图模型的视图

本文关键字：视图 模型 ContentControl 绑定 | 更新日期: 2023-09-27 17:56:33

我在Windows Phone 8应用程序中使用MVVM。我想在我的外壳视图模型中从一个视图模型移动到另一个视图模型。我似乎无法让 ContentControl 绑定到视图模型上的用户控件/电话应用程序页面模板。

我错过了什么？

我试图避免像 MVVM 光这样的东西。（我希望我的应用程序尽可能小的下载量）这应该是可以做到的。

附言我对WPF/WP8还很陌生

这是我到目前为止拥有的示例，请原谅愚蠢的功能:)

/**

外壳视图 **/

<phone:PhoneApplicationPage
    x:Class="PhoneAppWithDataContext.Navigation.ViewModelNavigation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True"
    xmlns:vm="clr-namespace:PhoneAppWithDataContext.Navigation">
    <phone:PhoneApplicationPage.DataContext>
        <vm:AppViewModel/>
    </phone:PhoneApplicationPage.DataContext>
    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="MonthViewModel">
            <vm:MonthViewControl/>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ContentControl Content="{Binding CurrentViewModel}"
                ContentTemplate="{Binding ContentTemplate}"
                HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Stretch"/>
        </Grid>
        <Button Content="Change VM" Command="{Binding ChangeViewModelCommand}"/>
    </Grid>
</phone:PhoneApplicationPage>
/**

外壳/应用程序视图模型 **/

public class AppViewModel : ViewModelBase
{
    private ViewModelBase _currentViewModel;
    private List<ViewModelBase> _viewModels = new List<ViewModelBase>();
    private byte _month = 1;
    public ViewModelBase CurrentViewModel
    {
        get
        {
            return _currentViewModel;
        }
        set
        {
            if (_currentViewModel == value)
                return;
            _currentViewModel = value;
            NotifyPropertyChanged("CurrentViewModel");
        }
    }
    public DataTemplate SelectedTemplate
    {
        get
        {
            if (_currentViewModel == null)
                return null;
            return DataTemplateSelector.GetTemplate(_currentViewModel);
        }
    }
    public List<ViewModelBase> ViewModels
    {
        get
        {
            return _viewModels;
        }
    }
    public AppViewModel()
    {
        ViewModels.Add(new MonthViewModel(_month));
        CurrentViewModel = ViewModels.FirstOrDefault();
    }
    private ICommand _changeViewModelCommand;
    public ICommand ChangeViewModelCommand
    {
        get
        {
            return _changeViewModelCommand ?? (_changeViewModelCommand = new GenericCommand(() =>
            {
                _month++;
                var newVM = new MonthViewModel(_month);
                ViewModels.Add(newVM);
                CurrentViewModel = newVM;
            }, true));
        }
    }
    private void ChangeViewModel(ViewModelBase viewModel)
    {
        if (!ViewModels.Contains(viewModel))
            ViewModels.Add(viewModel);
        CurrentViewModel = ViewModels.FirstOrDefault(vm => vm == viewModel);
    }
}

/** 数据模板选择器 **/

public static class DataTemplateSelector
{
    public static DataTemplate GetTemplate(ViewModelBase param)
    {
        Type t = param.GetType();
        return App.Current.Resources[t.Name] as DataTemplate;
    }
}
/**

用户控制 **/

<UserControl x:Class="PhoneAppWithDataContext.Navigation.MonthViewControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480"
    xmlns:vm="clr-namespace:PhoneAppWithDataContext.Navigation">

    <UserControl.DataContext>
        <vm:MonthViewModel/>
    </UserControl.DataContext>
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="Id" Width="100" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" />
        <TextBlock Text="{Binding Id}" Width="100" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" />
        <TextBlock Text="Name" Width="100" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
        <TextBlock Text="{Binding Name}" Width="100" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" />
    </Grid>
</UserControl>
/**

视图模型库 **/

public abstract class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
/**

用户控件应绑定到的视图模型 **/

public sealed class MonthViewModel : ViewModelBase
{
    private byte _id;
    private string _name;
    public MonthViewModel()
    {
    }
    public MonthViewModel(byte id)
    {
        _id = id;
        _name = "Month " + id.ToString() + " of the year";
    }
    public override string ToString()
    {
        return _name;
    }
    public byte Id
    {
        get
        {
            return _id;
        }
    }
    public string Name
    {
        get
        {
            return _name;
        }
    }
}

将 ContentControl 绑定到视图模型的视图

我相信

这里的问题是：

<UserControl.DataContext>
    <vm:MonthViewModel/>
</UserControl.DataContext>

当您的Content从一个MonthViewModel更改为下一个时，返回的数据模板的数据上下文将设置为绑定到Content的对象。 好吧，一旦设置了 DataContext，您应该就可以开始了，但是一旦加载了 UserControl，它就会将 DataContext 重置为空 MonthViewModel （vm:MonthViewModel） 的新 instace。 摆脱显式的 DataContext 声明 - 换句话说，删除我上面发布的代码。

这样，当您首次调用 CurrentViewModel 并引发 INPC 时，它不会重置 DataContext。 当您在 MonthViewModel 类型的 CurrentViewModel 之间切换时，您的 UserControl 不会再次调用 InitializeComponent，而是 DataContext 将更改。

编辑

此外，如果您仍然没有看到变化，那么我会指出SelectedTemplate属性。 只需将 null 传递给GetTemplate，而不是属性中的 null 检查。 在 GetTemplate 内部，检查 null 并在那里返回 null，如果它是 null。

相关文章：