Pull to refresh

Создание Timeline в WPF

Reading time5 min
Views2.3K
Так как с Blend пока глухо, делаю стандартные вещи, которые никому не интересны, то расскажу, как я делаю Журнал Логов для администратора.

Конечно можно было бы сделать стандартный грид и и потом таблицей это выводить, но хочется чего то необычного и в то же время удобного. Поэтому для себя я выбрал принцип timeline.

Для начала вот вам ссылочки:
Silverlight & WPF Timeline Control — Отличный контрол, который я стал использовать (не люблю велосипеды)
Source Code — исходники сборки и примеры работы с ней или же скачайте отдельно релизы библиотек Library for WPF и Library for Silverlight


Суть простая: Кидаем DLL в референсы, добавляем себе на панель ToolBox новые элементы и накидываем на форму. Вот такой код у меня получился:

  1. <Grid
  2.     x:Name="LayoutRoot"
  3.     Background="White">
  4.     <TabControl>
  5.       <TabItem
  6.         x:Name="tiTimeLine"
  7.         Header="TimeLine">
  8.         <Grid
  9.           x:Name="grdTimeLine">
  10.           <Grid.RowDefinitions>
  11.             <RowDefinition
  12.               Height="*" />
  13.             <RowDefinition
  14.               Height="30" />
  15.           </Grid.RowDefinitions>
  16.  
  17.           <timeline:TimelineTray
  18.             x:Name="timeline"
  19.             Grid.Row="0"
  20.             CalendarType="gregorian"
  21.             HorizontalAlignment="Stretch"
  22.             MinDateTime="01/01/2010"
  23.             MaxDateTime="01/01/2020"
  24.             InitialDateTime="02/11/2010">
  25.  
  26.             <Grid.RowDefinitions>
  27.               <RowDefinition
  28.                 Height="20" />
  29.               <RowDefinition
  30.                 Height="*" />
  31.               <RowDefinition
  32.                 Height="25" />
  33.               <RowDefinition
  34.                 Height="20" />
  35.             </Grid.RowDefinitions>
  36.             
  37.             <timeline:TimelineToolbox
  38.               Grid.Row="0"
  39.               />
  40.  
  41.             <timeline:TimelineBand
  42.               Grid.Row="1"
  43.               IsMainBand="True"
  44.               ItemSourceType="Days"
  45.               HorizontalAlignment="Stretch"
  46.               TimelineWindowSize="20"
  47.               MaxEventHeight="130" />
  48.             
  49.             <timeline:TimelineBand
  50.               Grid.Row="2"
  51.               HorizontalAlignment="Stretch"
  52.               ItemSourceType="months"
  53.               TimelineWindowSize="16"
  54.               MaxEventHeight="4" />
  55.             
  56.             <timeline:TimelineBand
  57.               Grid.Row="3"
  58.               HorizontalAlignment="Stretch"
  59.               ItemSourceType="years"
  60.               TimelineWindowSize="16"
  61.               MaxEventHeight="4" />
  62.  
  63.           </timeline:TimelineTray>
  64.         </Grid>
  65.       </TabItem>
  66.       <TabItem
  67.         x:Name="tiOther"
  68.         Header="Another">
  69.         <Grid />
  70.       </TabItem>
  71.     </TabControl>
  72.   </Grid>
* This source code was highlighted with Source Code Highlighter.


Ну и конечно же картинка


Всё это динамично и работает. Ну почти всё — кнопка развернуть в WPF не работает, т.к. в библиотеки прописано только для SIlverlight. 
Вот с добавлением данных я что-то никак не пойму, может кто из вас поймёт. В примерах вставка данных происходит либо с сервера (например: localhost:123/data.xml), либо из ресурсов (что почему то не пашет).

Так же можно делать выгрузку из SQL базы. Сейчас очень поздно завтра обновлю и покажу, как подключить БД, но в двух словах — конвертить в XMLDocument.
Tags:
Hubs:
Total votes 16: ↑12 and ↓4+8
Comments7

Articles