Windows Phone 8.1 MVVM设置View的ViewModel答案

【问题标题】：Windows Phone 8.1 MVVM Setting ViewModel of ViewWindows Phone 8.1 MVVM设置View的ViewModel
【发布时间】：2015-02-12 00:18:15
【问题描述】：

MainPage.XAML

<phone:PhoneApplicationPage
    x:Class="MyApp.MainPage"
    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"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewModels="clr-namespace:MyApp.ViewModels"
    xmlns:views="clr-namespace:MyApp.Views"
    mc:Ignorable="d"
    d:DataContext="{d:DesignInstance Type=viewModels:MainViewModel}">

    <!--FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"-->

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">



        <!--Pivot Control-->
        <phone:Pivot Title="MyApp">
            <!--Pivot item one-->
            <phone:PivotItem Header="Main">
                <Grid>

                </Grid>
            </phone:PivotItem>

            <!--Pivot item two-->
            <phone:PivotItem Header="Counter">
               <views:CounterView />
            </phone:PivotItem>
        </phone:Pivot>
    </Grid>

</phone:PhoneApplicationPage>

CounterView.XAML

 <UserControl x:Class="MyApp.Views.CounterView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        FontFamily="{StaticResource PhoneFontFamilyNormal}"
        FontSize="{StaticResource PhoneFontSizeNormal}"
        Foreground="{StaticResource PhoneForegroundBrush}"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:viewModels="clr-namespace:MyApp.ViewModels"
        mc:Ignorable="d"
        d:DesignHeight="480" d:DesignWidth="480"          
        d:DataContext="{d:DesignInstance Type=viewModels:CounterViewModel}">


        <Grid x:Name="LayoutRoot" Background="Blue" >
            <TextBlock Text="{Binding LightSensorInfo}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="75,137,0,316"/>
        </Grid>
    </UserControl>

错误：

System.Windows.Data Error: BindingExpression path error: 'LightSensorInfo' property not found on 'MyApp.ViewModels.MainViewModel' 'MyApp.ViewModels.MainViewModel' (HashCode=62333418). BindingExpression: Path='LightSensorInfo' DataItem='MyApp.ViewModels.MainViewModel' (HashCode=62333418); target element is 'System.Windows.Controls.TextBlock' (Name=''); target property is 'Text' (type 'System.String')..

为什么应用程序会尝试查看 MainViewModel 而不是我在 CounterView DataContext 中设置的 CounterViewModel？

在 WPF 中，ResourceDictionary 我也曾经设置过：

<DataTemplate DataType="viewModels:CounterViewModel">
    <views:CounterView/>
</DataTemplate>

但 WindowsPhone 似乎找不到 DataType 属性，所以我注释掉了这部分。

我错过了什么？有什么想法吗？

【问题讨论】：

您是否要为用户控件制作自己的视图模型？
也许是因为这是设计时数据上下文而不是实际数据上下文？
在我的 WP 8.1 应用程序样式中，如果没有 x:Key，如果它们被放置在外部资源字典文件中，它们将被忽略。尝试将 DataTemplate 直接移动到<App.Resources></App.Resources>
是编译错误还是运行时错误？
这是运行时错误。实际上，这不是错误，它只是输出中的一条消息。我正在尝试为 UserControl 设置单独的 ViewModel。

标签： c# xaml silverlight mvvm windows-phone-8.1

【解决方案1】：

哇！找到解决方案！

CounterView.XAML

错误：

d:DataContext="{d:DesignInstance Type=viewModels:CounterViewModel}"

正确：

<UserControl.DataContext>
    <viewModels:CounterViewModel/>
</UserControl.DataContext>

决赛：

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

    <UserControl.DataContext>
        <viewModels:CounterViewModel/>
    </UserControl.DataContext>


    <Grid x:Name="LayoutRoot" Background="Blue" >
        <TextBlock Text="{Binding LightSensorInfo}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="75,137,0,316"/>
    </Grid>
</UserControl>

像魅力一样工作！这是我所做的唯一更改 - 不需要做任何其他事情。

【讨论】：

您的答案确实是正确的，但是，您的“错误”XAML 适合设计您的 UserControl，以便 Intellisense 可以找到您的 ViewModel 的属性。您可以将两者都包含在您的 XAML 中。

【解决方案2】：

http://blog.jerrynixon.com/2013/07/solved-two-way-binding-inside-user.html

看起来答案就在那个博客里。尚未测试，但听起来合乎逻辑：

请注意：用户控件的数据上下文属性继承从父母。 DataTemplate 可能会这样。但用户控制不要期望数据上下文类型。相反，他们想要房产显式设置。我们想绑定这些属性。

随时更新我。 :)

【讨论】：