如何在选项卡控件选项卡中嵌套多个groupbox？

我在Josh Smiths MVVM演示后创建了MVVM Stock App。在右侧窗格的选项卡中，我放置了一个包含两个数据网格的股票期权链 - 一个用于调用，一个用于放置。这些表示单个到期月份的所有选项。如何在选项卡控件选项卡中嵌套多个groupbox？

但是，我想在同一个选项卡内同时显示多个月（我正在考虑将每个月的数据放入groupbox中），以便能够一次查看几个月的数据。

根据Josh的演示，每个选项卡包含由视图模型呈现的数据，并作为工作区添加到选项卡控件中。

我相信我可以在一个WorkSpace选项卡中嵌套多个MonthlyChainSpaces，但我不确定xaml应该如何显示。我有一个与视图模型绑定的用户控件，因此我不认为这需要做太多的改变，因为每个GroupBox中的数据都会由我当前的视图模型提供，但是不是每个组件都出现在单独的选项卡上，他们会嵌套在一个标签中。

我不确定我需要在我的“MonthlyChainSpaces”DataTemplate中放置哪些控件才能完成此操作。我知道每个组框（我需要在每个选项卡中有一个可变数量的组），只能有一个项目 - 所以我想到了组框内的一个堆栈面板或网格。但我不知道如何完成我想要的。我是否需要一个“主组合框”（位于选项卡内）和该组合框内，我嵌套了组合框，每个都代表“主组合框”的组合框项目？

由于我对WPF相当新颖，如果有更多经验的人可以提供关于如何实现这一目标的小方向，我将不胜感激。

来源

2012-04-13 JohnBlacker

考虑下面的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 [email protected]}"/> 
           <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>

现在它会显示多个组框的里面的DataGrid。但是，xml文件中每个相应的“选项”节点都有一个单独的groupbox/datagrid。我想给xml文件的是一个单独的groupbox，里面有一个datagrid，里面有另一个datagrid。我的方法是将外部数据网格绑定到视图模型的集合，每个视图模型将生成内部的groupbox/datagrid。换句话说，内部groupbox/datagrid将被水平堆叠 - 每个都放在外部数据网格的一列中。外部数据网格将包含具有多个列的单个行，具体取决于外部数据网格绑定集合中视图模型的数量。

所以说，外部数据网格绑定到一个集合，如：ObservableCollection allOptions = new ObservableCollection（）;

该集合将使用OptionChainViewModel类型的viewmodel的对象填充外部数据网格。这些“内部”对象本身就是GroupBox/DataGrid视图，每个视图都包含一个月的选项。结果将是具有多列的单行数据网格的外部组合框。每个外部DataGrid列都将包含由OptionChainViewModel呈现的GroupBox/DataGrid视图。
希望这有助于触发一些回复...

来源

2012-04-18 22:30:20 JohnBlacker

如何在选项卡控件选项卡中嵌套多个groupbox？

回答

相关问题