Wie kann ich mehrere Groupbox-Elemente in einem Registerkartenregister verschachteln?

Question

Ich habe eine MVVM Stock App nach Josh Smiths MVVM Demo erstellt. Auf einer Registerkarte im rechten Fensterbereich stecke ich eine Aktienoptionskette, die aus zwei Datagrids besteht - eine für Anrufe und eine für Puts. Dies sind alle Optionen für einen einzelnen Ablaufmonat.

Allerdings möchte ich mehrere Monate in der gleichen Registerkarte - Seite an Seite (ich dachte daran, jeden Monat Daten in eine Groupbox setzen) mit der Fähigkeit, mehrere Monate Daten auf einmal zu sehen.

In Übereinstimmung mit Joshs Demo enthält jede Registerkarte Daten, die von einem Ansichtsmodell präsentiert werden, und wird dem Registersteuerelement als Arbeitsbereich hinzugefügt.

Ich glaube, ich kann mehrere MonthlyChainSpaces innerhalb einer einzigen WorkSpace Registerkarte verschachteln, aber ich bin mir nicht sicher, wie das Xaml aussehen sollte. Ich habe eine Benutzersteuerung, die an das Ansichtsmodell gebunden ist, daher denke ich nicht, dass dies viel ändern würde, wenn überhaupt, da die Daten in jeder GroupBox von meinen aktuellen Ansichtsmodellen dargestellt würden, aber anstatt auf einer separaten Registerkarte zu erscheinen, Sie würden in einem einzigen Tab verschachtelt sein.

Ich bin mir nicht sicher, welche Kontrollen ich in meine "MonthlyChainSpaces" DataTemplate setzen muss, um dies zu erreichen. Ich weiß, dass jedes Gruppenfeld (und ich brauche eine variable Anzahl von ihnen in jedem Register) nur ein Element haben kann - also dachte ich über ein Stackpanel oder Raster in der Groupbox nach. Aber ich bin mir nicht sicher, wie ich erreichen soll, was ich will. Brauche ich eine "Master Groupbox" (die innerhalb der Registerkarte sitzt) und innerhalb dieser Groupbox, habe ich Groupboxes verschachtelt, die jeweils ein Groupbox-Element der "Master Groupbox" darstellen?

Da ich mit WPF ziemlich neu bin, würde ich mich freuen, wenn jemand mit mehr Erfahrung eine kleine Anleitung geben könnte, wie man das schafft?

Answer 1

folgende XAML gegeben ...

<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> 

und die folgenden XML-Datendatei:

<?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> 

Gerade jetzt wird es in mehrere groupbox des mit Datagrids anzuzeigen. Für jeden entsprechenden "Option" -Knoten in der XML-Datei gibt es jedoch ein separates Groupbox/Datagrid. Was ich der XML-Datei geben möchte, ist eine einzelne Groupbox mit einem Datagrid innerhalb von einem anderen Datagrid eingeschlossen. Mein Ansatz besteht darin, das äußere Datagrid an eine Sammlung von Viewmodels zu binden, von denen jedes das innere Groupbox/Datagrid erzeugt. Mit anderen Worten, die innere Gruppe/Datagrids werden horizontal gestapelt - jeweils in einer Spalte des äußeren Datagrids. Das äußere Datagrid wird eine einzelne Zeile mit mehreren Spalten haben, abhängig von der Anzahl der Viewmodels in der gebundenen Auflistung des äußeren Datagrids.

Also, das äußere Datagrid ist an eine Sammlung wie folgt gebunden: ObservableCollection allOptions = new ObservableCollection();

Diese Auflistung füllt das äußere Datagrid mit Objekten, die Viewmodels vom Typ OptionChainViewModel sind. Diese "inneren" Objekte sind selbst GroupBox/DataGrid-Ansichten, die jeweils die Optionen für einen einzelnen Monat enthalten. Das Ergebnis wird eine äußere Gruppenbox mit einem einzelnen Zeilen-Datagrid mit mehreren Spalten sein. Jede äußere DataGrid-Spalte enthält wiederum eine GroupBox/DataGrid-Sicht, wie sie vom OptionChainViewModel gerendert wird.
Hoffe, dass dies hilft einige Antworten zu lösen ...