1

Josh Smith の MVVM デモを参考にして、MVVM Stock アプリを作成しました。右ペインのタブ内に、コール用とプット用の 2 つのデータグリッドで構成されるストック オプション チェーンを配置しました。これらは、単一の有効期限月のすべてのオプションを表しています。

ただし、一度に複数の月のデータを表示できるように、同じタブ内に複数の月を並べて表示したいと考えています (各月のデータをグループボックスに入れることを考えていました)。

Josh のデモによると、各タブにはビューモデルによって提示されるデータが含まれており、ワークスペースとしてタブ コントロールに追加されます。

1 つの WorkSpace タブ内に複数の MonthlyChainSpaces をネストできると思いますが、xaml がどのように表示されるかわかりません。ビューモデルに関連付けられているユーザーコントロールがあるので、各 GroupBox のデータは現在のビューモデルによって表示されるため、大きな変更が必要になるとは思いませんが、それぞれが別のタブに表示されるのではなく、それらは単一のタブ内にネストされます。

これを達成するために、「MonthlyChainSpaces」DataTemplate にどのコントロールを配置する必要があるかわかりません。各グループボックス（および各タブ内で可変数のグループが必要になる）には1つのアイテムしか持てないことがわかっているので、グループボックス内にスタックパネルまたはグリッドを考えていました。しかし、私は自分がやりたいことを達成する方法がわかりません。「マスターグループボックス」(タブ内にある) が必要で、そのグループボックス内にネストされたグループボックスがあり、それぞれが「マスターグループボックス」のグループボックスアイテムを表していますか?

私はWPFにかなり慣れていないので、経験豊富な人がこれを実現する方法について少し指示を出していただければ幸いです。

4

1 に答える 1

0

次の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 allOptions = new ObservableCollection();

このコレクションは、タイプ OptionChainViewModel のビューモデルであるオブジェクトを外側のデータグリッドに取り込みます。これらの「内部」オブジェクト自体は、それぞれが 1 か月のオプションを含む GroupBox/DataGrid ビューです。結果は、複数の列を持つ単一行のデータグリッドを持つ外側のグループボックスになります。外側の各 DataGrid 列には、OptionChainViewModel によってレンダリングされる GroupBox/DataGrid ビューが含まれます。
これがいくつかの返信を引き起こすのに役立つことを願っています...

于 2012-04-18T22:30:20.020 に答える