Binding Observable集合

Question

我在主窗口中有一個集合，我想在用戶控件的網格中顯示它， 什麼是正確的MVVM方式來做到這一點？

我在MainWindow中完成了一個observableCollection並將其綁定到了usercontrol中的observableCollection。並在用戶控件中將網格綁定到 集合。

它不工作:(

/// <summary> 
/// Interaction logic for MainWindow.xaml 
/// </summary> 
public partial class MainWindow : Window 
{ 
    public ObservableCollection<string> MyNames 
    { 
     get { return (ObservableCollection<string>)GetValue(MyNamesProperty); } 
     set { SetValue(MyNamesProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for Names. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty MyNamesProperty = 
     DependencyProperty.Register("MyNames", typeof(ObservableCollection<string>), typeof(MainWindow), new UIPropertyMetadata(null)); 

    public MainWindow() 
    { 
     MyNames = new ObservableCollection<string>() { "Jonh", "Mary" }; 
     this.InitializeComponent(); 
     DataContext = this; 
    } 
} 

主窗口XAML：

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="clr-namespace:WpfApplication3" 
x:Class="WpfApplication3.MainWindow" 
x:Name="Window" 
Title="MainWindow" 
UseLayoutRounding="True" 
Width="640" Height="480"> 
<Grid> 
    <local:NamesControl Names="{Binding MyNames}"></local:NamesControl> 
</Grid> 

用戶控件：

public partial class NamesControl : UserControl 
{ 
    public ObservableCollection<string> Names 
    { 
     get { return (ObservableCollection<string>)GetValue(NamesProperty); } 
     set { SetValue(NamesProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for Names. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty NamesProperty = 
     DependencyProperty.Register("Names", typeof(ObservableCollection<string>), typeof(NamesControl), new UIPropertyMetadata(null)); 



    public NamesControl() 
    { 
     InitializeComponent(); 
     DataContext = this; 
    } 
} 

用戶控件XAML：

<UserControl x:Class="WpfApplication3.NamesControl" 
     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" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="300"> 
<Grid> 
    <ItemsControl ItemsSource="{Binding Names}"/> 
</Grid> 

Answer 1

的 「正確的方式」 來做到這將需要三樣東西：

• 主窗口
• 用戶控件
• 視圖模型

在視圖模型，你想創建你的ObservableCollection並將其設置爲屬性在視圖模型，就像這樣：

public class MyListViewModel 
{ 
    public MyViewModel() 
    { 
    MyObjects = new ObservableCollection<MyObject>(); 
    // Add items to collection 
    } 

    public ObservableCollection<MyObject> MyObjects{ get; set; } 
} 

然後，在你的用戶控件的初始化方法要實例化視圖模型並將其連接到DataContext爲用戶控件：

public AgentListView() 
{ 
     InitializeComponent(); 
     DataContext = new MyViewModel(); 
} 

注：這是很容易如果您使用IoC容器爲您處理依賴關係解決方案，但爲了簡單起見，我在此略過。

在你的用戶控件要指定的DataContext的用戶控件，然後你的DataGrid中的個人綁定和列：

<UserControl x:Class="UserControls.Views.AgentDataGridView" 
      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:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit" 
      xmlns:utility="clr-namespace:UserControls.Utility" 
      mc:Ignorable="d" 
      d:DataContext="{Binding}"> 
    <GroupBox Header="Agent States" Height="auto" Margin="0,5,0,0" Name="_groupBox" VerticalAlignment="Top" BorderBrush="DarkSlateBlue"> 
    <Grid Name="_grid" ShowGridLines="True" Margin="5" > 
     <toolkit:DataGrid 
     ItemsSource="{Binding MyObjects, Mode=OneWay}"> 
     <toolkit:DataGrid.Columns> 
      <toolkit:DataGridTextColumn Binding="{Binding StateAndJobDescription, Mode=OneWay, NotifyOnSourceUpdated=True,UpdateSourceTrigger=PropertyChanged}" Header="State" Width="100" IsReadOnly="True" /> 
      <toolkit:DataGridTextColumn Binding="{Binding SubStateDescription, Mode=OneWay, NotifyOnSourceUpdated=True,UpdateSourceTrigger=PropertyChanged}" Header="City" Width="120" IsReadOnly="True" /> 
     </toolkit:DataGrid.Columns> 
     </toolkit:DataGrid> 
    </Grid> 
    </GroupBox> 
</UserControl> 

從這裏，你只需要在用戶控件添加到您的主窗口。