如何在ListBox中选择项目时打开新的用户控件

Question

我是MVVM的新手。我有一个主要项目"MVVM Demo"，其中包括mainwindow.xaml文件，它有我的主UI。我有一个列表框，里面有一组项目：

<ListBox Name="ButtonPanel" ItemsSource="{Binding BoardTabs}" SelectedItem="{Binding SelectedTab, Mode=TwoWay}" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Connect}"  >
                            </TextBlock>
                            <TextBlock Text="{Binding I2C}"  >
                            </TextBlock>
                            <TextBlock Text="{Binding Voltage}" >
                            </TextBlock>
                            <TextBlock Text="{Binding Clock}" >
                            </TextBlock>
                            <TextBlock Text="{Binding Codec}" >
                            </TextBlock>
                            <TextBlock Text="{Binding EEPROM}" >
                            </TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

我需要列表框的每一项分别打开一个新的用户控件。请注意，我已经在主项目之外创建了一个单独的用户控件（我的解决方案文件中的第二个项目），并将其添加为对主项目（Board control mvvm）的引用

Voltage是一个userControl，它有一个Voltage.xaml文件，我的Ui所在的文件有一个单独的视图、模型和视图模型类。当我点击位于Board Control MVVM项目中的MainWindow.xaml中的电压项目（列表框内的文本块）时，它会弹出一个新窗口。

这是我的ProductView模型类，它从主窗口中选择选项卡。xaml UI:

private Product m_SelectedTab;
    public Product SelectedTab
    {
        get
        {
            return m_SelectedTab;
        }
        set
        {
            m_SelectedTab = value;
            NotifyPropertyChanged("SelectedTab");
        }
    }

我想知道当我在Listbox（mainwindow.xaml）中选择项目时，会弹出一个带有voltage.xaml UI的窗口。如果你需要任何进一步的代码来明确描述，我很乐意上传到这里。

请帮助：（

Answer 1

只是为了清楚起见；如果Connect、I2C、Voltage等是您在ListBox中想要的项目，那么上面的Xaml不是您想要的。因为每个项目都将具有所有这些TextBlock（因为您将ItemTemplate定义为多个TextBlock）。

相反，我假设您想要的是这些项（Connect、I2C等）中的每一项都是ListBox中的项。再次假设你唯一想做的就是打开另一个页面，那么你可以在每个ListBoxItem:中使用HyperlinkButton

<ListBox x:Name="ListBoxItems" ItemsSource="{Binding Path=Items}">
            <ListBox.ItemTemplate>
                <DataTemplate>                        
                    <HyperlinkButton NavigateUri="{Binding Path=Page}">
                        <HyperlinkButton.Style>
                            <Style TargetType="HyperlinkButton">
                                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="HyperlinkButton">
                                            <ContentPresenter/>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </HyperlinkButton.Style>
                        <TextBlock Text="{Binding Path=Name}" />                            
                    </HyperlinkButton>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

这里的Name和Page是Item类的属性，它表示您的每个项目（Connect、I2C等），Name是Name（电压），Page是指向要打开的相应页面的Uri（/Voltage.xaml）

ListBox的ItemsSource绑定到ViewModel类的Items属性，Items是Item对象的ObservableCollection：

ItemsViewModel viewModel = new ItemsViewModel() {
            Items = new ObservableCollection<Item>() { 
            new Item() { Name = "Item 1", Page = new Uri("/Page1.xaml", UriKind.Relative) },
            new Item() { Name = "Item 2", Page = new Uri("/Page2.xaml", UriKind.Relative) }}
        };

请注意，如果您想向页面传递额外的数据，您可以通过查询字符串（/Voltage.xaml？param=blah）来完成，也可以向每个项添加一个命令并自己处理导航。