ItemsControl（虚拟化足球驱动信息）

Question

我正在尝试模拟 NFL 驱动图来可视化游戏中的一些驱动数据。我粗略地尝试模仿的一个例子可以在这里看到，由 nfl.com 提供。我正在尝试实现以下目标：

• 显示比赛场地
• 在比赛场地顶部绘制数据
• 当我将鼠标悬停在某物上时，我想触发一个事件（例如 工具提示）

http://www.nfl.com/ gamecenter/2011100909/2011/REG5/jets@patriots#menu=drivechart

这里是我现在，首先是 xaml:

<StackPanel x:Name="myStackPanel" Orientation="Vertical">
  <StackPanel.Background>
    <ImageBrush ImageSource="{StaticResource PlayingField}" Stretch="Fill" />
  </StackPanel.Background>
  <ItemsControl Background="AliceBlue" Opacity="0.5" 
                ItemsSource="{Binding Path=DriveDetails}"           
                ItemTemplate="{StaticResource myDataTemplate}" 
                ItemsPanel="{StaticResource myItemsPanelTemplate}" />
</StackPanel>

结果是：

（抱歉，因为我是新手，所以无法添加屏幕截图！）

我会尽力描述我所看到的内容，我相信你们大多数人在阅读完 xaml 后都会明白这一点。 基本上我在背景中看到了一个足球场，在左上角 - 我的 ItemsControl 控件。StackPanel

是不言自明的，我现在在调整图像大小时会遇到问题一码并不代表一个像素，但我将把它留到另一天，我主要关心的是如何可视化数据。另外，驱动器可视化不应从左上角开始：D 因此，纯粹处理 ItemsControl 我只剩下这个：

（抱歉，因为我是新手，所以无法添加屏幕截图！）

我将再次尝试描述该图像。它是前面提到的 ItemsControl 控件的特写，没有背景（足球场）图像。

注意：ItemsControl 背景已设置为 AliceBlue，以便更容易看到，一旦我让这个工作正常。

ItemsSource 绑定到“Play”类的列表：

public class Play
{
  public int Quarter { get; set; }
  public int Result { get; set; }
  public PlayType TypeOfPlay { get; set; }
  public double WidthOfPlay { get; set; }
}

PlayType 是一个枚举：

public enum PlayType
{
  Run,
  Pass,
  Penalty,
  Punt,
  FieldGoal
}

列表获取一些数据...（示例数据，我知道第一个下来已经获得了哈哈）

List<Play> SamplePlays = new List<Play>()
{
  new Play { Quarter = 1, Result = 5, TypeOfPlay = PlayType.Penalty, WidthOfPlay = 30 },
  new Play { Quarter = 1, Result = 5, TypeOfPlay = PlayType.Run, WidthOfPlay = 30 },
  new Play { Quarter = 1, Result = 5, TypeOfPlay = PlayType.Pass, WidthOfPlay = 30 },
  new Play { Quarter = 1, Result = 40, TypeOfPlay = PlayType.Punt, WidthOfPlay = 240 }
};

...并且被传承借助传输参数类到 ViewModel…

ucHomeInstance = ucDriveChartInstance;
((ucDriveChart)ucHomeInstance).setViewModel(new ucDriveChartVM(new ucDriveChartTP() 
  { Plays = SamplePlays }));

… 在这里它被分配给 DriveDetails 属性

public class ucDriveChartVM : ViewModelBase
{
    public List<Play> DriveDetails { get; set; }

    public ucDriveChartVM(ucDriveChartTP transferParameter)
    {
        this.DriveDetails = transferParameter.Plays;
    }
}

这是 ItemsPanel 的 xaml：

<ItemsPanelTemplate x:Key="myItemsPanelTemplate">
  <StackPanel Orientation="Horizontal" IsItemsHost="True" />
</ItemsPanelTemplate>

这是 ItemTemplate 的 xaml – 请注意，我绑定到 WidthOfPlay，因为一码是背景图形上大约有 6 个单位，一旦我整理好图形和调整大小，我将绑定到实际的 Result 属性：

<DataTemplate x:Key="myDataTemplate">
  <StackPanel Orientation="Horizontal" Width="{Binding WidthOfPlay}"
              SnapsToDevicePixels="True" Style="{StaticResource onMouseOver}">
    <Border Padding="0,5,0,5">
      <Grid>
        <StackPanel Style="{StaticResource onMouseOver}">
          <Rectangle Width="{Binding WidthOfPlay}" Height="10" 
                     Fill="{Binding TypeOfPlay,
                       Converter={StaticResource PlayTypeToColourConverter}}" />
        </StackPanel>
      </Grid>
    </Border>
  </StackPanel>
</DataTemplate>

我将 PlayType 枚举转换为 Brush，这就是为什么您可以使用示例数据查看显示的颜色。

<converter:PlayToColour x:Key="PlayTypeToColourConverter"
  ColourRun="Red" ColourPass="Blue" ColourPenalty="Yellow" ColourSpecial="Purple" />

所以所有这些都工作正常 - 但显然表现并不如预期 - 看上面的例子，一次发球由许多次比赛组成，这些比赛彼此相邻，但作为一次比赛可能会导致负码数，它们也被放置在彼此下方，并在最后一场比赛结束时抵消！

所以我想这是我的问题 - 如何以这样的形式表示数据，即驱动器的每次播放都位于该特定驱动器的前一次播放下方，但也从最后一个驱动器的末尾开始（以某种方式偏移？ ）

由于一场游戏由多个驱动器组成，我将在稍后阶段传递一个“驱动器”列表，其中包含驱动器起始位置和该驱动器的比赛列表（而不是简单的比赛列表）这个例子）。

这意味着整个内容也需要可滚动！

我认为使用 ItemsControl 控件以及 ItemTemplate 和 DataTemplate 的做法是正确的，但我肯定可以使用一些专家建议来实现这一目标。

如果您已经读到这里，感谢您抽出时间 - GO PATS ;)

[编辑]

非常感谢 AngelWPF（虚拟化）和Rachel（一切！）我实际上设法让它工作，至少对于我提供 ItemsControl 的播放列表来说是这样。 雷切尔，你的博客很棒。 AttachedProperties 条目确实非常有用，感谢您分享您的知识！

在稍后的阶段，我希望能够添加一两个屏幕截图，以更好地演示我正在胡思乱想的内容；）

按照建议，我使用（以及其他属性）PlayIndex 修改了 Play 类，用于网格定位

public class Play
{
  public int PlayIndex { get; set; }
  public int Quarter { get; set; }
  public int Down { get; set; }
  public int YardsToGo { get; set; }
  public int Position { get; set; }
  public PlayType TypeOfPlay { get; set; }
  public PlayDetail DetailsOfPlay { get; set; }
  public PlayResult ResultOfPlay { get; set; }
  public int YardsOfPlay { get; set; }
  public double PlayLength { get; set; }
  public string Player1 { get; set; }
  public string Player2 { get; set; }
}

并使用PlayIndex、ItemContainerStyle 被添加到 ItemsControl

<ItemsControl.ItemContainerStyle>
  <Style>
    <Setter Property="Grid.Column" Value="{Binding PlayIndex}" />
    <Setter Property="Grid.Row" Value="{Binding PlayIndex}" />
  </Style>
</ItemsControl.ItemContainerStyle>

将 ItemsPanelTemplate 从 StackPanel 更改为 Grid 也对此有所帮助:) 现在，每个 Play 都以各自的颜色相邻显示以及彼此下方显示。将 ToolTip 添加到 ItemsControl（使用 Play 类中的其他属性）将其完善。

正如我已经说过的，现在对于播放项目列表（为简单起见而缩短）来说，这非常有效：

List<Play> SamplePlays = new List<Play>()
{
  new Play { PlayIndex = 0, Position = 30, YardsOfPlay = 5, PlayLength = 25 },
  new Play { PlayIndex = 1, Position = 35, YardsOfPlay = 15, PlayLength = 75 },
  new Play { PlayIndex = 2, Position = 50, YardsOfPlay = 0, PlayLength = 0 },
  new Play { PlayIndex = 3, Position = 50,  YardsOfPlay = 8, PlayLength = 40 },
  new Play { PlayIndex = 4, Position = 58,  YardsOfPlay = 1, PlayLength = 5 },
  new Play { PlayIndex = 5, Position = 59,  YardsOfPlay = 30, PlayLength = 150 }
};

但是我将如何绑定我在原始帖子末尾所写的关于传递“驱动器”列表的内容”？

请注意 - 我在原来的帖子中写了这个，我希望这“允许”我用更多信息编辑这篇帖子，而不是提出一个全新的问题！

给定以下“Drive”类：

public class Drive
{
  public int DriveIndex { get; set; }
  public int StartPos { get; set; }
  public int EndPos { get; set; }
  public double DriveLength { get; set; }
  public DriveResult Result { get; set; }
  public List<Play> DrivePlays { get; set; }
}

用数据填充列表（使用与上面相同的操作）

List<Drive> SampleDrives = new List<Drive>() 
{
  new Drive { DriveIndex = 0, StartPos = 30, EndPos = 49, DriveLength = 19,
              DrivePlays = new List<Play>() 
              {
                // create plays here
              }},
  new Drive { DriveIndex = 1, StartPos = 30, EndPos = 49, DriveLength = 19,
              DrivePlays = new List<Play>() 
              {
                // create plays here
              }}
};

，ViewModel 现在看起来像这样：

public class ucDriveChartVM : ViewModelBase
{
  public List<Play> DriveDetails { get; set; }
  public List<Drive> Drives { get; set; }

  public ucDriveChartVM(ucDriveChartTP transferParameter)
  {
    this.DriveDetails = transferParameter.Plays;
    this.Drives = transferParameter.Drives;
  }
}

我显然需要使用另一个 DataTemplate 提供此 ItemsControl（包含驱动器），但此 DataTemplate 将具有将播放保存在该驱动器列表中。我很快发现你不能将内容放在矩形中，所以我必须仔细考虑一下：/

经过一些实验，我绑定到 DriveLength 属性以图形方式查看给定驱动器的长度并出现使用 DataGridCell，以便我可以在其中放置内容（例如 StackPanel）。

（我知道除了驱动器的长度之外，我没有绑定任何东西，这个例子中的矩形只是为了在测试时显示一些东西！）

<DataTemplate x:Key="myDataTemplateDrives">
  <StackPanel Orientation="Horizontal" Width="{Binding DriveLength}" 
              SnapsToDevicePixels="True" Margin="0,0,1,0">
    <Border>
      <Grid>
        <StackPanel>
          <DataGridCell>
            <StackPanel Width="{Binding Path=DriveLength}">
              <Rectangle Height="10" Fill="Gray" />
            </StackPanel>
          </DataGridCell>
        </StackPanel>
      </Grid>
    </Border>
  </StackPanel>
</DataTemplate>

但是我已经喝完了第四杯咖啡，我遇到了麻烦绑定到 List 对象内的 List？像 Drives.DrivePlays 这样的东西？！

所以我将从一个简单的（谢谢你们俩）

List<Play>

绑定转到一个

List<Drive>

的绑定

List<Play>!

包含名为“DrivePlays”

：D我是否遗漏了一些明显的东西，或者我需要更多咖啡吗？

编辑

我已经在一个单独的问题中解释了问题的最后一部分

相关问题关于原始问题的最后部分

Answer 1

首先我要说的是我对足球一无所知，所以如果我理解错误请原谅我。

首先，ItemsControl 实际上将每个项目包装在 ContentPresenter 中，因此无法通过 DataTemplate 调整项目的位置。如果您希望更改项目的位置，则需要使用 ItemContainerStyle （有关示例，请参阅 此处）

由于您想要定位数据的方式，我会考虑尝试添加 Grid.Row/Grid.Column 属性到您的 Play 类，并找出后面的代码中应该包含哪些内容。然后，您可以根据 Plays 列表中的行/列数将 ItemsControl 绘制为具有列/行的网格，并将每个项目放置在适当的单元格中。 （我有一个使用附加属性定义 Grid.Rows/Columns 这里，虽然我相信他们需要一些小的修改才能绑定值......需要将 Grid 更改为GridHelpers 并将 Register 更改为 RegisterAttached）

为了滚动 ItemsControl，您可以将其包装在 ScrollViewer 中。如果您还想虚拟化 ItemsControl，请查看此问题

Answer 2

我建议为了数据项的布局对齐及其虚拟化，您必须分析 WPF 下所有项目控件提供的多个选项...

1. ItemsControl 与 UniformGrid 作为 ItemsPanel。
2. 带有透明选择画笔的ListBox（使其看起来像项目控件）提供了固有的虚拟化。
3. ListView同时提供了GridView的对齐布局和虚拟化。
4. WPF DataGrid 可用于更好的选项，例如列/行虚拟化、排序等...
5. 但是，您可以在 4.0 之前的版本中实现虚拟化 ItemsControl，http://omniscientist.net:8081/efficientlargedatasets