Home Forums WPF controls Xceed Toolkit Plus for WPF timelinePanel use with collection

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • User (Old forums)
    Member
    Post count: 23064
    #41801 |

    Hi

    I am trying to use the TimelinePanel control with a collection of item and I am having troubles making it work (nothing is showing). I am trying 2 different approach.

    XAML:

    <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <ItemsControl ItemsSource="{Binding list, Source={StaticResource viewModel}}">
                    <ItemsControl.Template>
                        <ControlTemplate TargetType="ItemsControl">
                            <xtc:TimelinePanel BeginDate="{Binding startHour, Source={StaticResource viewModel}}" EndDate="{Binding endHour, Source={StaticResource viewModel}}" Background="Aqua" />
                        </ControlTemplate>
                    </ItemsControl.Template>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border Background="Blue" Width="100" Height="25" Margin="0, 2, 0, 2" xtc:TimelinePanel.Date="{Binding start}">
                                <TextBlock Text="{Binding name}" />
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
            <Grid Grid.Row="1">
                <xtc:TimelinePanel Background="LightBlue" BeginDate="{Binding startHour, Source={StaticResource viewModel}}" EndDate="{Binding endHour, Source={StaticResource viewModel}}">
                    <ItemsControl ItemsSource="{Binding list, Source={StaticResource viewModel}}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Background="Blue" Width="100" Height="25" Margin="0, 2, 0, 2" xtc:TimelinePanel.Date="{Binding start}" xtc:TimelinePanel.DateEnd="{Binding end}">
                                    <TextBlock Text="{Binding name}" />
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </xtc:TimelinePanel>
            </Grid> 

        </Grid> 

    and the code behind:

     public partial class MainWindow : Window

        {
            public MainWindow()
            {
                InitializeComponent();
            }
        }
     
        public class timeViewModel
        {
            public DateTime startHour
            {
                getset;
            }
     
            public DateTime endHour
            {
                getset;
            }
     
            public ObservableCollection<timelineItem> list { getset; }
     
            public timeViewModel()
            {
                startHour = DateTime.Now.Date;
                endHour = (DateTime.Now.Date + TimeSpan.FromDays(22));
                getData();
            }
     
            private void getData()
            {
                List<timelineItem> listItem = new List<timelineItem>();
                for (int i = 6; i < 20; i++)
                {
                    timelineItem newItem = new timelineItem();
                    newItem.name = "test " + i.ToString();
                    newItem.start = (DateTime.Now.Date + TimeSpan.FromDays(i));
                    newItem.end = (DateTime.Now.Date + TimeSpan.FromDays(i + 2));
                    listItem.Add(newItem);
                }
                list = new ObservableCollection<timelineItem>(listItem);
            }
        }
    }
     
    public class timelineItem
    {
        public string name { getset; }
        public DateTime start { getset; }
        public DateTime end { getset; }
    }

     Any help on how the show the item on the timelinepanel would be great.

    Thanks

    Pierre 

    Imported from legacy forums. Posted by pierre (had 150 views)

    Fawzi [Xceed]
    Member
    Post count: 722

    Hi,

    I would not use “ItemsControl.Template” and “ItemsControl.ItemTemplate”, but instead use :
    -“ItemsControl.ItemsPanel” to define the panel to use : TimelinePanel, 
    -“ItemsControl.ItemTemplate” to define the visual of each item,
    -“ItemsControl.ItemContainerStyle” to define the attached property “Date” and “DateEnd”. This is necessary since the ItemsControls will automatically create ContentPresenter for each items with the content being the “Border” defined in ItemsControl.ItemTemplate. To work correctly, the TimelinePanel needs to find the attached property “Date” and “DateEnd” at top level on its items, so on the ContentPresenters.

    Something like :

    <Grid>
            <ItemsControl x:Name=”_itemsControl”
                          ItemsSource=”{Binding list, Source={StaticResource viewModel}}”>
                <ItemsControl.ItemsPanel>
                  <ItemsPanelTemplate>
                      <xtc:TimelinePanel BeginDate=”{Binding startHour, Source={StaticResource viewModel}}”
                                        EndDate=”{Binding endHour, Source={StaticResource viewModel}}”
                                        Background=”Aqua”/>
                  </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                  <DataTemplate>
                      <Border Background=”Blue”
                              Height=”25″
                              Margin=”0, 2, 0, 2″>
                        <TextBlock Text=”{Binding name}”
                                    Foreground=”White”/>
                      </Border>
                  </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemContainerStyle>
                  <Style>
                      <Setter Property=”xtc:TimelinePanel.Date”
                              Value=”{Binding Path=start}”/>
                      <Setter Property=”xtc:TimelinePanel.DateEnd”
                              Value=”{Binding Path=end}” />
                  </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
          </Grid>

    Imported from legacy forums. Posted by Fawzi [Xceed] (had 21 views)

    User (Old forums)
    Member
    Post count: 23064

    It worked really good, thanks a lot.

    Imported from legacy forums. Posted by pierre (had 130 views)

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.