c# - 如何在选项卡控制选项卡内嵌套多个组框？

标签 c# wpf mvvm

我根据 Josh Smiths MVVM 演示创建了一个 MVVM Stock 应用程序。在右侧 Pane 的选项卡中，我放置了一个由两个数据网格组成的股票期权链——一个用于看涨期权，一个用于看跌期权。
这些代表单个到期月份的所有选项。

但是，我想在同一个选项卡中显示多个月 - 并排显示(我正在考虑将每个月的数据放在一个分组框中)，并且能够一次查看几个月的数据。

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

我相信我可以在单个 WorkSpace 选项卡中嵌套多个 MonthlyChainSpaces，但我不确定 xaml 的外观。我有一个与 View 模型相关联的用户控件，因此我认为不需要太多更改(如果有的话)，因为每个 GroupBox 中的数据将由我当前的 View 模型呈现，而不是每个都出现在单独的选项卡上，它们将嵌套在单个选项卡中。

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

由于我对 WPF 相当陌生，如果有更多经验的人可以就如何实现这一点提供一些指导，我将不胜感激？

最佳答案

鉴于以下 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 文件是一个单独的组框，其中一个数据网格被另一个数据网格包围。我的方法是让外部数据网格绑定(bind)到 View 模型的集合，每个 View 模型都将生成内部组框/数据网格。换句话说，内部组框/数据网格将水平堆叠 - 每个都在外部数据网格的一列中。外部数据网格将有一行多列，具体取决于外部数据网格绑定(bind)集合中 View 模型的数量。

因此，假设外部数据网格绑定(bind)到一个集合，例如:
ObservableCollection allOptions = new
ObservableCollection();

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

关于c# - 如何在选项卡控制选项卡内嵌套多个组框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10149357/

上一篇：wpf - 如何将文本框添加到 Gridview 的每个标题列并使用文本框过滤该列？

下一篇：wpf - 如何为用户控件创建 MVVM 而不将所有内部结构暴露给消费者？

相关文章：

c# - 在 .NET RESTful 应用程序中使用 Ninject？

wpf - 变更跟踪和并发 - 这会失败吗？

c# - ICommand 依赖属性

c# - 可以使用 ReactiveUI 根据两个列表执行

C# Open XML SDK 2.0 Excel 电子表格 - 从字符串数组加载单元格范围

c# - ASP.NET Identity 在管理 View 中检索和编辑用户数据？

c# - 如何在几秒钟后更改标签文本？

c# - 如何停止验证触发器在wpf中自动启动

c# - 如何使文本框只接受货币格式输入？

C# WPF MVVM ComboBox SelectedItem

©2024 IT工具网  联系我们