Как я могу создать профилировщик GUI в WPF?

Question

Я хочу создать профилировщик задач в WPF с пользовательским интерфейсом, аналогичным интерфейсу incredibuild.

Например, временные задачи отображаются в виде полос на соответствующей строке. Посмотрите на:

http://baoz.net/wp-content/2009/06/ib1.png

чтобы понять, что я имею в виду. Я не уверен, что лучший способ решить эту проблему? Должен ли я переопределить класс Panel, создав для этого настраиваемую панель макета, или там может быть существующий элемент управления / библиотека, который может соответствовать моим потребностям. До сих пор я рассматривал различные элементы управления графиками, но не уверен, что они могут быть изменены для достижения такого поведения или нет. Я действительно надеюсь, что кто-то, кто уже некоторое время использует WPF, поможет мне сузить область поиска. Не совсем легко узнать, что гуглить:)

Answer 1

В WPF этот вид диаграммы абсолютно тривиален. Никакого специального графического пакета не требуется:

В ваших ресурсах определите DataTemplate для отображения события, ширина которого связана с длиной события:

  <DataTemplate TargetType="{x:Type local:Event}">
    <Border Width="{Binding EventLength}">  <!-- This sets the width -->
      <Border Margin="1" Padding="1" StrokeThickness="1" Stroke="Black"
              Background="{Binding EventColor}"> <!-- Actual border -->
        <TextBlock Text="{Binding EventDescription}" />
      </Border>
    </Border>
  </DataTemplate>

Также определите шаблон панели горизонтальных элементов:

  <ItemsPanelTemplate x:Key="HorizontalPanel"><DockPanel/></ItemsPanelTemplate>

Теперь ваш фактический график тривиален для построения:

<ItemsControl ItemsSource="{Binding CPUs}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <DockPanel>
        <TextBlock Width="100" Text="{Binding Name}" /> <!-- CPU name -->
        <Rectangle Width="1" Fill="Black" />            <!-- Vertical divider -->
        <ItemsControl ItemsSource="{Binding Events}"    <!-- Events -->
                      ItemsPanel="{StaticResource HorizontalPanel}" />
      </DockPanel>
    </DataTemplate>
  </ItemsControl.Template>
</ItemsControl>

Если у вас есть промежутки между вашими событиями, просто добавьте объект «Gap» в вашу коллекцию событий для их представления, а затем добавьте DataTemplate для пробелов:

<DataTemplate TargetType="{x:Type local:Gap}">
  <UIElement Width="{Binding GapWidth}" />
</DataTemplate>