如何在选项卡控件选项卡中嵌套多个分组框
本文关键字：选项 控件 嵌套 | 更新日期: 2023-09-27 18:30:59
我创建了一个 MVVM Stock 应用程序，该应用程序是在 Josh Smiths MVVM 演示之后制作的。 在右侧窗格的选项卡中，我放置了一个由两个数据网格组成的股票期权链 - 一个用于看涨期权，一个用于看跌期权。这些表示单个到期月份的所有选项。
但是，我想在同一选项卡中并排放置显示多个月份（我正在考虑将每个月的数据放在分组框中），并且能够一次查看几个月的数据。
根据 Josh 的演示，每个选项卡都包含视图模型呈现的数据，并作为工作区添加到选项卡控件中。
我相信我可以在单个工作区选项卡中嵌套多个 MonthlyChainSpaces，但我不确定 xaml 应该是什么样子。 我有一个与视图模型绑定的用户控件，所以我认为这不需要太多更改（如果有的话），因为每个 GroupBox 中的数据将由我当前的视图模型呈现，但不是每个都出现在单独的选项卡上，而是嵌套在单个选项卡中。
我不确定我需要在我的"MonthlyChainSpaces"数据模板中放置哪些控件才能完成此操作。 我知道每个分组框（并且我在每个选项卡中需要可变数量的分组框）只能有一个项目 - 所以我在考虑分组框中的堆栈面板或网格。 但我不确定如何实现我想要的。 我是否需要一个"主组框"（位于选项卡内），并且在该组框中，我嵌套了组框，每个组框代表"主组框"的一个组框项目？
由于我对 WPF 相当陌生，如果有更多经验的人可以提供有关如何实现这一目标的一点指导，我将不胜感激？
给定以下 xaml...
<Window x:Class="NestedGroupBoxes.MainWindow"
xmlns:datagrid="http://schemas.microsoft.com/wpf/2008/toolkit"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="525" Width="767">
<Window.Resources>
<XmlDataProvider x:Key="chainProvider" Source="/MinimalOptions.XML" XPath="/query/results">
</XmlDataProvider>
</Window.Resources>
<DockPanel>
<GroupBox MaxWidth="500" HorizontalAlignment="Left">
<GroupBox.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBox Text="{Binding Source={StaticResource chainProvider}, XPath=optionsChain/@symbol}"/>
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid DockPanel.Dock="Bottom" Margin="4">
<StackPanel Orientation="Vertical">
<Label Content="AllOptions" HorizontalAlignment="Left" Name="outerOptionChainDataGrid" VerticalAlignment="Top" />
<datagrid:DataGrid MinHeight="200"
MinWidth="200"
MaxWidth="500"
Width="Auto"
HorizontalAlignment="Left"
AutoGenerateColumns="False"
EnableRowVirtualization="True"
AlternatingRowBackground="LightGray"
SelectionUnit="FullRow"
Name="dgridCallOptionChain"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Source={StaticResource chainProvider},XPath=optionsChain/option}"
SelectedItem="{Binding Path=SelectedOption, Mode=TwoWay}"
VerticalAlignment="Stretch"
HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" IsManipulationEnabled="True" >
<datagrid:DataGrid.Columns>
<datagrid:DataGridTemplateColumn Header="Date" MinWidth="100">
<datagrid:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<DockPanel>
<GroupBox MaxWidth="500" HorizontalAlignment="Left">
<GroupBox.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBox Text="{Binding Source={StaticResource chainProvider}, XPath=optionsChain/@symbol}"/>
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid DockPanel.Dock="Bottom" Margin="0,2,4,2">
<StackPanel Orientation="Vertical">
<Label Content="Monthly Options" HorizontalAlignment="Left" Name="innerOptionChainDataGrid" VerticalAlignment="Top" />
<datagrid:DataGrid MinHeight="200"
MinWidth="200"
MaxWidth="500"
Width="Auto"
HorizontalAlignment="Left"
AutoGenerateColumns="False"
EnableRowVirtualization="True"
AlternatingRowBackground="LightGray"
SelectionUnit="FullRow"
Name="dgridCallOptionChain"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding Source={StaticResource chainProvider},XPath=optionsChain/option}"
SelectedItem="{Binding Path=SelectedOption, Mode=TwoWay}"
VerticalAlignment="Stretch"
HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" MaxHeight="200" IsManipulationEnabled="True" >
<datagrid:DataGrid.Columns>
<datagrid:DataGridTextColumn Header="Symbol" Binding="{Binding XPath=@symbol}"/>
<datagrid:DataGridTextColumn Header="Strike" Binding="{Binding XPath=strikePrice}"/>
<datagrid:DataGridTextColumn Header="Bid" Binding="{Binding XPath=bid}"/>
<datagrid:DataGridTextColumn Header="Ask" Binding="{Binding XPath=ask}"/>
<datagrid:DataGridTextColumn Header="Volume" Binding="{Binding XPath=vol}"/>
<datagrid:DataGridTextColumn Header="OpenInt" Binding="{Binding XPath=openInt}"/>
</datagrid:DataGrid.Columns>
</datagrid:DataGrid>
</StackPanel>
</Grid>
</GroupBox>
</DockPanel>
</DataTemplate>
</datagrid:DataGridTemplateColumn.CellTemplate>
</datagrid:DataGridTemplateColumn>
</datagrid:DataGrid.Columns>
</datagrid:DataGrid>
</StackPanel>
</Grid>
</GroupBox>
</DockPanel>
</Window>
和以下 xml 数据文件：
<?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
yahoo:count="1" yahoo:created="2012-01-10T00:51:10Z" yahoo:lang="en-US">
<diagnostics>
<publiclyCallable>true</publiclyCallable>
<url execution-start-time="21" execution-stop-time="286"
execution-time="265" proxy="DEFAULT"><![CDATA[http://www.datatables.org/yahoo/finance/yahoo.finance.options.xml]]></url>
<url execution-start-time="291" execution-stop-time="1179"
execution-time="888" proxy="DEFAULT"><![CDATA[http://finance.yahoo.com/q/op?s=YHOO&m=2012-01]]></url>
<log>results.length(): 2</log>
<javascript execution-time="987" instructions-used="406004" table-name="yahoo.finance.options"/>
<user-time>1276</user-time>
<service-time>1153</service-time>
<build-version>24402</build-version>
</diagnostics>
<results>
<optionsChain expiration="2012-01-20" symbol="YHOO">
<option symbol="YHOO120121C00002500" type="C">
<strikePrice>2.5</strikePrice>
<lastPrice>13.65</lastPrice>
<change>0</change>
<changeDir/>
<bid>12.9</bid>
<ask>13</ask>
<vol>8</vol>
<openInt>73</openInt>
</option>
<option symbol="YHOO120121C00005000" type="C">
<strikePrice>5</strikePrice>
<lastPrice>11.30</lastPrice>
<change>0</change>
<changeDir/>
<bid>10.4</bid>
<ask>10.5</ask>
<vol>NaN</vol>
<openInt>289</openInt>
</option>
<option symbol="YHOO120121C00007500" type="C">
<strikePrice>7.5</strikePrice>
<lastPrice>8.70</lastPrice>
<change>0</change>
<changeDir/>
<bid>7.9</bid>
<ask>8</ask>
<vol>5</vol>
<openInt>1416</openInt>
</option>
</optionsChain>
</results>
现在，它将显示多个分组框，其中包含数据网格。 但是，对于 xml 文件中的每个相应"选项"节点，都有一个单独的分组框/数据网格。 给定 xml 文件，我想要的是一个分组框，里面有一个数据网格，里面有一个数据网格，被另一个数据网格包围。 我的方法是将外部数据网格绑定到视图模型的集合，每个视图模型都将生成内部分组框/数据网格。换句话说，内部分组框/数据网格将水平堆叠 - 每个分组框/数据网格在外部数据网格的一列中。 外部数据网格将具有包含多列的单行，具体取决于外部数据网格的绑定集合中的视图模型的数量。
因此，假设外部数据网格绑定到如下集合： 可观察集合所有选项 = 新 ObservableCollection（）;
此集合将使用 OptionChainViewModel 类型的 viewmodel 对象填充外部数据网格。 这些"内部"对象本身就是 GroupBox/DataGrid 视图，每个视图都包含一个月的选项。 结果将是一个外部分组框，其中包含具有多列的单行数据网格。 每个外部 DataGrid 列将依次包含一个由 OptionChainViewModel 呈现的 GroupBox/DataGrid 视图。
希望这有助于触发一些回复...