如何在选择列表框中的项目时打开新的用户控件？

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 模型类，它从 mainwindow.xaml UI 中选择选项卡：

private Product m_SelectedTab;
    public Product SelectedTab
    {
        get
        {
            return m_SelectedTab;
        }

        set
        {
            m_SelectedTab = value;
            NotifyPropertyChanged("SelectedTab");
        }
    }

我想知道当我在 Listbox(mainwindow.xaml) 中选择项目时，会弹出一个带有上面电压.xaml UI 的窗口。如果您需要任何进一步的代码以进行清晰的描述，我很乐意在这里上传。

请帮忙:(

Answer 1

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

相反，我假设您想要的是这些项目（连接、I2C 等）中的每一个都是您的 ListBox 的项目。再次假设您唯一要做的就是打开另一个页面，然后您可以在每个 ListBoxItem 中使用 HyperlinkBut​​ton：

<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 是名称（电压），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) 执行此操作，或者您可以向每个项目添加命令并自己处理导航。