使用MVVM Light創建一般用戶控件

Question

如何使用MVVM Light創建一般用戶控件？

在應用程序中的所有主視圖似乎工作正常。但是，一般控制似乎並不接受綁定。這是我的FileDiplay控件。 一個圖標和一個顯示文件名旁邊的TextBlock。

---

利用

在主視圖中的一個，我試圖綁定一個ItemsControl的ItemsTemplate內的文件名。指定文字，如FileName="xxx"可以正常工作，但綁定不會。

<local:FileLink FileName="{Binding FileName}" /> 

我一直在DependencyProperty和INotifyPropertyChanged很多玩耍。看起來沒有辦法解決DependencyProperty，因爲它不能被綁定。當使用簡單的TextBlock而不是此用戶控件時，綁定被接受。

---

我沒有包含定位器或利用控件，以避免代碼太多。事實上，我認爲這是一個非常簡單的問題，我還沒有找到解決方案。我認爲將DataContext設置爲ViewModel是正確的，因爲沒有列表綁定或真正的UserControl分離是可能的。我也調試了setters並嘗試了不同的方法。

FileLink.xaml

<local:UserControlBase 
    x:Class="....FileLink" 
    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:..." 
    mc:Ignorable="d" DataContext="{Binding FileLink, Source={StaticResource Locator}}"> 
    <Grid> 
     <StackPanel Orientation="Horizontal"> 
      <Image Source="{Binding Icon}" Margin="0,0,5,0" /> 
      <TextBlock Text="{Binding FileName}" /> 
     </StackPanel> 
    </Grid> 
</local:UserControlBase> 

FileLink.xaml.cs

using System.Windows; 
using System.Windows.Media; 

namespace ... 
{ 
    public partial class FileLink : UserControlBase 
    { 
     private FileLinkViewModel ViewModel => DataContext as FileLinkViewModel; 
     public static DependencyProperty FileNameProperty = DependencyProperty.Register(nameof(FileName), typeof(string), typeof(FileLink)); 

     public ImageSource Icon 
     { 
      get 
      { 
       return App.GetResource("IconFileTypeCsv.png"); // TODO:... 
      } 
     } 
     public string FileName 
     { 
      get 
      { 
       return ViewModel.FileName; 
      } 
      set 
      { 
       ViewModel.FileName = value; 
      } 
     } 

     public FileLink() 
     { 
      InitializeComponent(); 
     } 
    } 
} 

FileLinkViewModel.cs

using GalaSoft.MvvmLight; 

namespace ... 
{ 
    public class FileLinkViewModel : ViewModelBase 
    { 
     private string _FileName; 
     public string FileName 
     { 
      get 
      { 
       return _FileName; 
      } 
      set 
      { 
       Set(() => FileName, ref _FileName, value); 
      } 
     } 
    } 
} 

Answer 1

不明確設置的DataContext你的用戶控件的，因爲它有效地防止了控制從其父控制，這是繼承的DataContext你在一個結合樣

<local:FileLink FileName="{Binding FileName}" /> 

也期待什麼，不裹視圖模型像您對FileName屬性所做的那樣。如果視圖模型具有FileName屬性，則上面的綁定可以直接使用，而不需要包裝視圖模型。

如果你真的需要在用戶控件一個FileName屬性，它應該是一個普通依賴屬性

public partial class FileLink : UserControlBase 
{ 
    public FileLink() 
    { 
     InitializeComponent(); 
    } 

    public static readonly DependencyProperty FileNameProperty = 
     DependencyProperty.Register(nameof(FileName), typeof(string), typeof(FileLink)); 

    public string FileName 
    { 
     get { return (string)GetValue(FileNameProperty); } 
     set { SetValue(FileNameProperty, value); } 
    } 
} 

，你應該通過指定用戶控件作爲的RelativeSource綁定到它：

<local:UserControlBase ...> <!-- no DataContext assignment --> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="IconFileTypeCsv.png" Margin="0,0,5,0" /> 
     <TextBlock Text="{Binding FileName, 
          RelativeSource={RelativeSource AncestorType=UserControl}}" /> 
    </StackPanel> 
</local:UserControlBase>