WPF-UserControl中的MVVM系結

我正在測驗 MVVM 模式中的示例系結。我正在使用包 GalaSoft.MvvmLight。從 MainViewModel 系結到 MainWindow 是正常的，但我無法將資料從 ViewModel (ImageViewModel) 系結到 View (ImageView)。我所有的代碼都在下面

在 App.xaml 中

<Application x:Class="WpfApplication1.App"         
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr- 
namespace:WpfApplication1" StartupUri="MainWindow.xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" d1p1:Ignorable="d" 
xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006">
<Application.Resources>
<ResourceDictionary>
  <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr- 
  namespace:WpfApplication1.ViewModel" />
</ResourceDictionary>
</Application.Resources>
</Application>

在 MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:v="clr-namespace:WpfApplication1.View"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    DataContext="{Binding Main, Source={StaticResource Locator}}"
    mc:Ignorable="d"
    Title="MainWindow" Height="800" Width="1000">
<Grid>
    <Grid Grid.Column="1">
        <v:ImageView DataContext="{Binding ImageVM}"/>
    </Grid>
       
</Grid>

在 ImageView.xaml 中

<UserControl x:Class="WpfApplication1.View.ImageView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:WpfApplication1.View"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         Name="ucImage">

<UserControl.DataContext>
    <Binding Path="Main.ImageVM" Source="{StaticResource Locator}"/>
</UserControl.DataContext>

<Grid>
    <TextBox x:Name="label" Text="{Binding TestText, ElementName=ucImage}" Width="100" 
     Height="50"/>
</Grid>
</UserControl>

在 ViewModelLocator.cs

using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApplication1.ViewModel
{
public class ImageViewModel: ViewModelBase
{
    public string _TestText;
    public string TestText
    {
        get
        {
            return _TestText;
        }
        set
        {
            _TestText = value;
            RaisePropertyChanged(() => this.TestText);
        }
    }


    public ImageViewModel()
    {
        TestText = "asdasdasdasdas";
    }
}
}

在 MainViewModel

public class MainViewModel : ViewModelBase
{
    private ImageViewModel _ImageVM;
    public ImageViewModel ImageVM
    {
        get { return _ImageVM; }
        set { Set(ref _ImageVM, value); }
    }


    public MainViewModel()
    {
        ImageVM = new ImageViewModel();
    }
}

在 ImageViewModel.cs

using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApplication1.ViewModel
{
public class ImageViewModel: ViewModelBase
{
    public string _TestText;
    public string TestText
    {
        get
        {
            return _TestText;
        }
        set
        {
            _TestText = value;
            RaisePropertyChanged(() => this.TestText);
        }
    }


    public ImageViewModel()
    {
        TestText = "asdasdasdasdas";
    }
}

}

輸出中的這個錯誤是

System.Windows.Data 錯誤：40：BindingExpression 路徑錯誤：在“物件”“ImageView”（名稱=“ucImage”）上找不到“TestText”屬性。系結運算式：路徑=測驗文本；DataItem='ImageView' (Name='ucImage'); 目標元素是“文本框”（名稱=“標簽”）；目標屬性是“文本”（型別“字串”）

任何提出解決方案的人將不勝感激！

uj5u.com熱心網友回復：

表達方式

Text="{Binding TestText, ElementName=ucImage}"

期望TestTextImageView 控制元件中的一個屬性，該屬性顯然不存在 - 這就是錯誤訊息所說的。

您只需撰寫以下內容即可使控制元件的 XAML 中的元素直接系結到其 DataContext 中的視圖模型物件：

<TextBox Text="{Binding TestText}" .../>

為了使控制元件獨立于特定的視圖模型，它應該公開一個可系結的屬性，即這樣的依賴屬性：

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

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register(
            nameof(Text), typeof(string), typeof(ImageView));

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }
}

這將與

<TextBox Text="{Binding Text, ElementName=ucImage}"

在控制元件的 XAML 中并且沒有明確設定控制元件的 DataContext，即<UserControl.DataContext>在其 XAML 中沒有該部分。

該屬性將像

<v:ImageView DataContext="{Binding ImageVM}" Text="{Binding TestText}"/>

要不就

<v:ImageView Text="{Binding ImageVM.TestText}"/>

標籤：wpf 虚拟机 捆绑

上一篇：輸入的專案有時在資料網格中顯示為空

下一篇：對于WPF默認系統字體，如何在資源字典中指定默認系統字體