I created a MVVM Stock app fashioned after Josh Smiths MVVM demo. Inside a tab on the right pane I put a stock option chain consisting of two datagrids - one for calls and one for puts. These represent all the options for a single expiration month.
However, I want to show multiple months inside the same tab - side by side (I was thinking of putting each month's data inside a groupbox) with the ability to see several months data at a time.
In accordance with Josh's demo, each tab contains data presented by a viewmodel and is added to the tab control as a workspace.
I believe I can nest multiple MonthlyChainSpaces inside a single WorkSpace tab, but I'm not sure how the xaml should look. I have a usercontrol that is tied to the viewmodel, so I don't think that would require much change, if any, as the data in each GroupBox would be presented by my current viewmodel's, but instead of each appearing on a separate tab, they'd be nested inside a single tab.
I'm not sure about which controls I need to put in my "MonthlyChainSpaces" DataTemplate in order to accomplish this. I know that each groupbox (and I'll have a need for a variable number of them inside each tab) can only have one item - so I was thinking of a stackpanel or grid inside the groupbox. But I'm not sure how to accomplish what I want. Do I need a "master groupbox" (which sits inside the tab) and within that groupbox, I have nested groupbox's, each representing a groupbox item of the "master groupbox"?
Since I'm fairly new with WPF I'd appreciate it if someone with more experience could provide a little direction on how to make this happen?
Given the following 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>
And the following xml data file:
<?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>
Right now it will display multiple groupbox's with datagrids inside. However, there is a separate groupbox/datagrid for each corresponding "option" node in the xml file. What I want given the xml file is a single groupbox with a datagrid inside enclosed by another datagrid. My approach is to have the outer datagrid bind to a collection of viewmodel's each of which will produce the inner groupbox/datagrid. In other words the inner groupbox/datagrid's will be stacked horizontally - each in a column of the outer datagrid. The outer datagrid will have a single row with multiple columns depending on the number of viewmodel's in the outer datagrid's bound collection.
So, say the outer datagrid is bound to a collection like: ObservableCollection allOptions = new ObservableCollection();
This collection will populate the outer datagrid with objects which are viewmodel's of type OptionChainViewModel. These "inner" objects are themselves GroupBox/DataGrid views each containing the options for a single month. The result will be an outer groupbox with a single row datagrid with multiple columns. Each outer DataGrid column will in turn contain a GroupBox/DataGrid view as rendered by the OptionChainViewModel.
Hope this helps trigger some replies...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.