如何在選項卡控件選項卡中嵌套多個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？

回答

相關問題