将多个视图绑定到所选项的ObservableCollection(MVVM,SL5)

时间:2012-01-04 12:30:33

标签: data-binding observablecollection silverlight-5.0 attachedbehaviors multiple-views

我在Silverlight 5中使用MVVM。我想要实现的是在一个视图中选择ListBox中的项目(例如ListView.xaml)并在ListBox中显示所选项目另一个视图(例如SelectionView.xaml)。

我选择的项目位于ObservableCollection<MyItem>(称为SelectedItems)中,该行为是通过in this answer所述的附加行为创建的

问题似乎是我使用了两个不同的XAML文件。如果我在选择发生的同一个XAML文件中绑定ListBoxSelectedItems,那么这些项目会在同一视图中的另一个ListBox中显示而不会出现问题。但是在另一个文件中,ListBox保持为空。

两个视图都使用与DataContext相同的ViewModel

我会对正确方向的一些指示感到高兴。我是SL的新手,所以也许我错过了一些明显的东西。

这是有效的代码:

ListView.xaml

<UserControl x:Class="Silverlight5App.View.Content.ListView"
    xmlns:viewModel="clr-namespace:Silverlight5App.ViewModel"
    xmlns:behaviours="clr-namespace:Silverlight5App.Behaviours">


    <UserControl.Resources>
        <viewModel:XYPlotViewModel x:Key="ViewModelTest" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ViewModelTest}}">
        <StackPanel>            
            <ListBox  ItemsSource="{Binding Path=XYPoints}"  behaviours:SelectedItems.Items="{Binding SelectedItems}" Name="XYPointsListbox" SelectionMode="Extended" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Margin="2" Text="{Binding id}" />
                            <TextBlock Grid.Column="1" Margin="2" Text="{Binding x}" />
                            <TextBlock Grid.Column="2" Margin="2" Text="{Binding y}" />
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

            <ListBox ItemsSource="{Binding SelectedItems}"  Name="XYPointsListboxSelection">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Margin="2" Text="{Binding id}" />
                            <TextBlock Grid.Column="1" Margin="2" Text="{Binding x}" />
                            <TextBlock Grid.Column="2" Margin="2" Text="{Binding y}" />
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>
    </Grid>
</UserControl>

并且此代码只提供一个空的列表框:

SelectionView.xaml

    <UserControl x:Class="Silverlight5App.View.Content.SelectionView"
    xmlns:viewModel="clr-namespace:Silverlight5App.ViewModel"     
    xmlns:behaviours="clr-namespace:Silverlight5App.Behaviours">

    <UserControl.Resources>
        <viewModel:XYPlotViewModel x:Key="ViewModelTest" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ViewModelTest}}" >       
        <StackPanel>               
            <ListBox ItemsSource="{Binding Path=SelectedItems}"  Name="XYPointsListboxSelection2">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="100" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Margin="2" Text="{Binding id}" />
                        <TextBlock Grid.Column="1" Margin="2" Text="{Binding x}" />
                        <TextBlock Grid.Column="2" Margin="2" Text="{Binding y}" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        </StackPanel>
    </Grid>
</UserControl>

PS:语法高亮设置为language-all:lang-xml但似乎不起作用?

1 个答案:

答案 0 :(得分:1)

您应该使用相同的ViewModel实例才能生效。

您可以通过将视图模型创建为Singleton并通过XAML分配它,而不是通过代码(在构造函数中或在PageLoaded事件中)分配它。