用戶控件，它與自己的數據

Question

我有一個用戶控件與一個文本框（Y）和一個按鈕，在我的主窗口（Y）有另一個文本框。當您按下按鈕時，會彈出消息並向我們顯示產品X * Y。

現在，如果我只是簡單地通過XAML插入另一個，因爲它綁定到一些數據都UserControl，原來和剛剛添加顯示相同（因爲我說TextBox.Text綁定）。

我想知道如何擴展這個並在我的MainWindow中添加幾個UserControl，這樣我可以在每個UserControl中鍵入不同的值，然後按下Button並查看每個產品的數量。

RootViewMode.cs

public class RootViewModel : INotifyPropertyChanged 
    { 
     #region Implementation of INotifyPropertyChanged 

     private double _x; 
     private double _y; 

     public double X 
     { 
      get { return _x; } 
      set 
      { 
       _x = value; 
       OnPropertyChanged("X"); 
      } 
     } 

     public double Y 
     { 
      get { return _y; } 
      set 
      { 
       _y = value; 
       OnPropertyChanged("Y"); 
      } 
     } 

     public double XY 
     { 
      get { return _x * _y; } 
     } 
    } 

UserControl1.xaml

<StackPanel> 
      <Label Content="Y:" /> 
      <TextBox Text="{Binding Path=Y, UpdateSourceTrigger=PropertyChanged, FallbackValue=1}" Margin="5" /> 
      <Button Content="Press me" Click="OnButtonClick" /> 
     </StackPanel> 

UserControl1.xaml.cs

private void OnButtonClick(object sender, RoutedEventArgs e) 
    { 
     var viewModel = (RootViewModel)DataContext; 
     var resultMessage = string.Format("{0} * {1} = {2}", viewModel.X, viewModel.Y, viewModel.XY); 

     MessageBox.Show(resultMessage, "X * Y"); 
    } 

MainWindow.xaml

<StackPanel> 
     <Label Content="X:" /> 
     <TextBox Text="{Binding Path=X, UpdateSourceTrigger=PropertyChanged}" Margin="5" Height="24" /> 
     <WpfApplication22:UserControl1 Margin="5" /> 
     <WpfApplication22:UserControl1 Margin="5" /> 
    </StackPanel> 

當然，在插入該用戶控件這樣我得到不想要的結果。我懷疑我必須爲每個UserControl創建一個新的RootViemModel，但這必須動態完成。我不想只有2個用戶控件，但有一種方法來生成它們，也許用一個說「創建用戶控件！」的按鈕。謝謝。

（感謝sevenate幫助我的代碼）

Answer 1

你需要爲一個ItemsControl：

<Window x:Class="MiscSamples.UserControlItemsControl" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="UserControlItemsControl" Height="300" Width="300"> 
    <DockPanel> 
     <StackPanel DockPanel.Dock="Top"> 
      <Label Content="X:"/> 
      <TextBox Text="{Binding X}"/> 
      <Button Content="Add User Control" Command="{Binding AddUserControlCommand}"/> 
     </StackPanel> 

     <ItemsControl ItemsSource="{Binding Children}"> 
      <ItemsControl.Template> 
       <ControlTemplate> 
        <ScrollViewer CanContentScroll="True"> 
         <ItemsPresenter/> 
        </ScrollViewer> 
       </ControlTemplate> 
      </ItemsControl.Template> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <!-- Here you can place your local:UserControl. I just thrown the UI elements --> 
        <GroupBox Header="User Control"> 
         <StackPanel> 
          <Label Content="Y:"/> 
          <TextBox Text="{Binding Y}"/> 
          <Button Content="Press Me!" Command="{Binding PressMeCommand}"/> 
         </StackPanel> 
        </GroupBox> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </DockPanel> 
</Window> 

代碼背後：

public partial class UserControlItemsControl : Window 
{ 
    public UserControlItemsControl() 
    { 
     InitializeComponent(); 
     DataContext = new RootViewModel(); 
    } 
} 

RootViewModel：

​​

UserControlViewModel：

public class UserControlViewModel:PropertyChangedBase 
{ 
    private double _y; 
    public double Y 
    { 
     get { return _y; } 
     set 
     { 
      _y = value; 
      OnPropertyChanged("Y"); 
     } 
    } 

    public Command PressMeCommand { get; set; } 
} 

Command類（爲了避免使用的Click事件處理程序，他們不屬於）：

//Dead-simple implementation of ICommand 
//Serves as an abstraction of Actions performed by the user via interaction with the UI (for instance, Button Click) 
public class Command : ICommand 
{ 
    public Action Action { get; set; } 

    public void Execute(object parameter) 
    { 
     if (Action != null) 
      Action(); 
    } 

    public bool CanExecute(object parameter) 
    { 
     return IsEnabled; 
    } 

    private bool _isEnabled = true; 
    public bool IsEnabled 
    { 
     get { return _isEnabled; } 
     set 
     { 
      _isEnabled = value; 
      if (CanExecuteChanged != null) 
       CanExecuteChanged(this, EventArgs.Empty); 
     } 
    } 

    public event EventHandler CanExecuteChanged; 

    public Command(Action action) 
    { 
     Action = action; 
    } 
} 

public class Command<T>: ICommand 
{ 
    public Action<T> Action { get; set; } 

    public void Execute(object parameter) 
    { 
     if (Action != null && parameter is T) 
      Action((T)parameter); 
    } 

    public bool CanExecute(object parameter) 
    { 
     return IsEnabled; 
    } 

    private bool _isEnabled; 
    public bool IsEnabled 
    { 
     get { return _isEnabled; } 
     set 
     { 
      _isEnabled = value; 
      if (CanExecuteChanged != null) 
       CanExecuteChanged(this, EventArgs.Empty); 
     } 
    } 

    public event EventHandler CanExecuteChanged; 

    public Command(Action<T> action) 
    { 
     Action = action; 
    } 
} 

結果：