MVVM绑定到Windows Phone中的自定义控件

时间:2011-11-01 06:11:32

标签: mvvm windows-phone

我有一个我为Windows Phone应用程序定义的简单自定义控件。控件的XAML如下:

<UserControl x:Class="PhoneApp1.MyControl"
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"
         DataContext="{Binding RelativeSource={RelativeSource Self}}">

<Grid x:Name="LayoutRoot">
    <TextBlock Text="{Binding MyLabel}" />
</Grid>

此外,用户控件具有依赖项属性,如下所示:

public partial class MyControl : UserControl
{
    public MyControl()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty MyLabelProperty =
        DependencyProperty.Register("MyLabel", typeof (string), typeof (MyControl), new PropertyMetadata(default(string)));

    public string MyLabel
    {
        get { return (string) GetValue(MyLabelProperty); }
        set { SetValue(MyLabelProperty, value); }
    }
}

现在问题是当我尝试将它数据绑定到我创建的View Model时,没有任何反应。各种代码项如下:

public class MyControlViewModel : ViewModelBase
{
    private string name;

    public string Name
    {
        get { return name; }
        set { name = value;
        RaisePropertyChanged(() => Name);}
    }
}

在App.xaml中查看模型声明

<Application.Resources>
    <PhoneApp1:MyControlViewModel x:Key="MCVM" />
</Application.Resources>

控件的MainPage.xaml声明

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <PhoneApp1:MyControl  x:Name="testControl" DataContext="{StaticResource MCVM}" MyLabel="{Binding Path=MyLabel}" />            
    </Grid>

但是,如果我尝试将其数据绑定到其他UI元素,如下所示,它似乎有用吗?

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <PhoneApp1:MyControl  x:Name="testControl" MyLabel="{Binding ElementName=Button, Path=Content}" />
        <Button Click="Button_Click" x:Name="Button" Content="Click" />
    </Grid>

我一直在努力让这个简单的场景发挥作用,而且我认为有些愚蠢的东西让我失踪了?

非常感谢任何帮助

1 个答案:

答案 0 :(得分:5)

(这是WPF;我不确定这是否与WP7 silverlight 100%相似;我提供了更多详细信息,以帮助您了解正在发生的事情,以便您可以研究一个正确的解决方案,如果我的两个选项不是'可用)

默认情况下,绑定以xaml文件的根元素的DataContext为根(无论是Window还是UserControl)。这意味着

<TextBlock Text="{Binding MyLabel}" />

尝试绑定到DataContext。因此,基本上,您尝试绑定的属性是

  

MyControl.DataContext.MyLabel

您需要绑定到以下内容:

  

MyControl.MyLabel

因此,您必须将绑定到您希望绑定的可视树中的元素,即MyControl类。你可以通过几种方式做到这一点......

<TextBlock Text="{Binding MyLabel, 
                 RelativeSource={RelativeSource FindAncestor,
                                                AncestorType=UserControl}" />

很常见,但必须走树,可能会导致一些性能问题。我发现执行以下操作更容易,并建议:

<UserControl x:Class="PhoneApp1.MyControl"
             x:Name="root"
             x:SnipAttributesBecauseThisIsAnExample="true">
    <TextBlock Text="{Binding MyLabel, ElementName=root}" />
</UserControl>

为UserControl指定一个名称,然后使用ElementName将绑定重新绑定到可视树的根目录。

我会忽略其他更疯狂的方法来实现这一目标。