Intersoft ClientUI Documentation
How-to: Create And Integrates Custom View to UXScheduleView

This example shows how to create and integrates custom view to UXScheduleView.

Example

Description

UXScheduleView is designed with extensible architecture which allows you to create custom view such as Agenda View and easily integrate it to the UXScheduleView. To create a custom view, first you need to create a new class and derive it from UXScheduleViewBase and override the InvalidateData method to filter the data that you want to display in the custom view.

The following code shows how to create an Agenda View that displays events for the next ten days.

Code

Generic.xaml
Copy Code
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:UXScheduleView.Samples.Controls"
    xmlns:Intersoft="http://intersoft.clientui.com/schemas">

    <Intersoft:UXScheduleViewResource x:Key="AgendaViewResource"/>
    <Intersoft:EventDateRangeConverter x:Key="EventDateRangeConverter"/>
    <Intersoft:NullVisibilityConverter x:Key="NullVisibilityConverter"/>
    <Intersoft:VisibilityConverter x:Key="VisibilityConverter"/>
    <Intersoft:ColorConverter x:Key="ColorConverter" />
    
    <LinearGradientBrush x:Key="HeaderArrowBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF838383" Offset="0"/>
        <GradientStop Color="#FF363636" Offset="0.989"/>
    </LinearGradientBrush>

    <Style TargetType="local:AgendaView">
        <Setter Property="Intersoft:LocalizationManager.Resource" Value="{StaticResource AgendaViewResource}"/>
        <Setter Property="NumberOfDays" Value="10"/>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Border BorderBrush="Black" BorderThickness="0,1,0,0" Background="{Binding Resource.ResourceColor, Converter={StaticResource ColorConverter}}" Opacity="0.5"/>
                        <StackPanel Margin="8">
                            <!-- Event details -->
                            <Intersoft:DockPanel FillChildMode="Last">
                                <Grid Background="White" Width="14" Height="14" Margin="0,4,6,0" VerticalAlignment="Top" ToolTipService.ToolTip="{Binding Category.CategoryName}" Visibility="{Binding Category, Converter={StaticResource NullVisibilityConverter}}">
                                    <Border Background="{Binding Category.CategoryColor, Converter={StaticResource ColorConverter}}" Opacity="0.7"/>
                                    <Border BorderThickness="1" BorderBrush="{Binding Category.CategoryColor, Converter={StaticResource ColorConverter}}"/>
                                </Grid>
                                <StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock TextWrapping="Wrap" Text="{Binding Converter={StaticResource EventDateRangeConverter}}" Foreground="Black" Margin="0,2,0,0" FontSize="14.667"/>
                                        <Image Opacity="0.5" Source="/Intersoft.Client.UI.ScheduleView;component/Resources/recurring.png" Height="16" Width="16" Visibility="{Binding IsRecurring, Converter={StaticResource VisibilityConverter}}" ToolTipService.ToolTip="{Binding RecurringInfo}" Margin="4,0"/>
                                    </StackPanel>
                                    <TextBlock TextTrimming="WordEllipsis" HorizontalAlignment="Left" Text="{Binding Subject}" VerticalAlignment="Top" FontSize="12" ToolTipService.ToolTip="{Binding Subject}"/>                                    
                                    <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Location}" VerticalAlignment="Top" Foreground="Black" Margin="0,2,0,0" FontSize="12"/>
                                </StackPanel>
                            </Intersoft:DockPanel>

                            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Description}" VerticalAlignment="Top" 
                                       Foreground="Black" TextTrimming="WordEllipsis" MaxHeight="32" Margin="0,8,0,0"/>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:AgendaView">
                    <Grid x:Name="RootElement">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Grid Margin="4">
                            <StackPanel Orientation="Horizontal">
                                <Intersoft:UXFlatButton Command="Intersoft:ScheduleViewCommands.GoToPreviousView" Width="24" Height="26" Margin="2,0" ToolTipService.ToolTip="{Binding TooltipText_Back, Source={StaticResource AgendaViewResource}}">
                                    <Path VerticalAlignment="Center" HorizontalAlignment="Left" Data="M0,6 L8,0 L8,11 z" Fill="{StaticResource HeaderArrowBackground}"/>
                                </Intersoft:UXFlatButton>
                                <Intersoft:UXFlatButton Command="Intersoft:ScheduleViewCommands.GoToNextView" Width="24" Height="26" Margin="2,0" ToolTipService.ToolTip="{Binding TooltipText_Forward, Source={StaticResource AgendaViewResource}}">
                                    <Path VerticalAlignment="Center" HorizontalAlignment="Left" Data="M0,0 L0,11 L8,6 z" Fill="{StaticResource HeaderArrowBackground}"/>
                                </Intersoft:UXFlatButton>
                                <TextBlock x:Name="TitleElement" FontSize="16" Margin="12,6,4,4" VerticalAlignment="Center"/>
                            </StackPanel>
                        </Grid>
                        <Intersoft:UXScrollViewer Grid.Row="1">
                            <ItemsPresenter/>
                        </Intersoft:UXScrollViewer>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>
AgendaView.cs
Copy Code
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Globalization;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using Intersoft.Client.UI.ScheduleView;

namespace UXScheduleView.Samples.Controls
{
    public class AgendaView : UXScheduleViewBase
    {
        #region Elements

        private TextBlock TitleElement { get; set; }

        #endregion

        #region Constructors

        public AgendaView()
        {
            this.DefaultStyleKey = typeof(AgendaView);
        }

        #endregion

        #region Dependency Properties

        /// <summary>
        /// Identifies the TitleFullMonthFormat dependency property. 
        /// </summary>
        public static readonly DependencyProperty TitleFullMonthFormatProperty =
            DependencyProperty.Register("TitleFullMonthFormat", typeof(string), typeof(AgendaView), new PropertyMetadata("{0:MMMMM d, yyyy}", OnPropertyChanged));

        /// <summary>
        /// Identifies the TitleRangeFullMonthFormat dependency property. 
        /// </summary>
        public static readonly DependencyProperty TitleRangeFullMonthFormatProperty =
            DependencyProperty.Register("TitleRangeFullMonthFormat", typeof(string), typeof(AgendaView), new PropertyMetadata("{0:MMMMM d, yyyy} - {1:MMMM d, yyyy}", OnPropertyChanged));

        /// <summary>
        /// Identifies the TitleRangePartialMonthFormat dependency property. 
        /// </summary>
        public static readonly DependencyProperty TitleRangePartialMonthFormatProperty =
            DependencyProperty.Register("TitleRangePartialMonthFormat", typeof(string), typeof(AgendaView), new PropertyMetadata("{0:MMMM d} - {1:d, yyyy}", OnPropertyChanged));

        /// <summary>
        /// Identifies the TitleRangePartialYearFormat dependency property. 
        /// </summary>
        public static readonly DependencyProperty TitleRangePartialYearFormatProperty =
            DependencyProperty.Register("TitleRangePartialYearFormat", typeof(string), typeof(AgendaView), new PropertyMetadata("{0:MMMM d} - {1:MMMM d, yyyy}", OnPropertyChanged));

        /// <summary>
        /// Gets or sets a value that determines the title format when the date is in full month.
        /// </summary>
        [Category("Format")]
        public string TitleFullMonthFormat
        {
            get { return (string)GetValue(TitleFullMonthFormatProperty); }
            set { SetValue(TitleFullMonthFormatProperty, value); }
        }

        /// <summary>
        /// Gets or sets a value that determines the title format when the date is in range full month.
        /// </summary>
        [Category("Format")]
        public string TitleRangeFullMonthFormat
        {
            get { return (string)GetValue(TitleRangeFullMonthFormatProperty); }
            set { SetValue(TitleRangeFullMonthFormatProperty, value); }
        }

        /// <summary>
        /// Gets or sets a value that determines the title format when the date is in partial range month.
        /// </summary>
        [Category("Format")]
        public string TitleRangePartialMonthFormat
        {
            get { return (string)GetValue(TitleRangePartialMonthFormatProperty); }
            set { SetValue(TitleRangePartialMonthFormatProperty, value); }
        }

        /// <summary>
        /// Gets or sets a value that determines the title format when the date is in partial year month.
        /// </summary>
        [Category("Format")]
        public string TitleRangePartialYearFormat
        {
            get { return (string)GetValue(TitleRangePartialYearFormatProperty); }
            set { SetValue(TitleRangePartialYearFormatProperty, value); }
        }

        #endregion

        #region Methods

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            this.TitleElement = base.GetTemplateChild("TitleElement") as TextBlock;

            this.UpdateTitle();
        }

        public override void InvalidateData()
        {
            base.InvalidateData();

            DateTime startRange = this.DisplayDate.Date;
            DateTime endRange = this.DisplayDate.Date.AddDays(this.NumberOfDays);

            IEnumerable<UXScheduleViewEventModel> eventsSource = this.Events as IEnumerable<UXScheduleViewEventModel>;
            IEnumerable<UXScheduleViewEventModel> events = eventsSource;

            IEnumerable<UXScheduleViewEventModel> eventsCollection =
                UXScheduleViewDataManager.GetRangeData(
                    this.OwningScheduler, null,
                    events, startRange, endRange);
            
            this.ItemsSource = eventsCollection.OrderBy(o => o.StartDate).ThenByDescending(o => o.Duration);
            this.UpdateTitle();
        }
        
        private static void OnPropertyChanged(DependencyObject dp, DependencyPropertyChangedEventArgs e)
        {
            AgendaView control = (AgendaView)dp;
            if (control != null)
            {                
                if (e.Property == TitleFullMonthFormatProperty || e.Property == TitleRangeFullMonthFormatProperty || e.Property == TitleRangePartialMonthFormatProperty || e.Property == TitleRangePartialYearFormatProperty)
                {
                    control.UpdateTitle();
                }
            }
        }

        private void UpdateTitle()
        {
            if (this.TitleElement != null)
            {
                DateTimeFormatInfo dtFormat = Intersoft.Client.Framework.DateTimeHelper.GetCurrentDateFormat(this.ActualCulture);

                if (this.NumberOfDays == 1)
                {
                    if (this.TitleElement != null)
                        this.TitleElement.Text = string.Format(dtFormat, this.TitleFullMonthFormat, new object[] { this.DisplayDate });
                }
                else
                {
                    DateTime startDate = this.DisplayDate.Date;
                    DateTime endDate = startDate.AddDays(this.NumberOfDays - 1);

                    string title = "";

                    if (startDate.Month == endDate.Month && startDate.Year == endDate.Year)
                        title = string.Format(dtFormat, this.TitleRangePartialMonthFormat, new object[] { startDate, endDate });
                    else if (startDate.Year == endDate.Year)
                        title = string.Format(dtFormat, this.TitleRangePartialYearFormat, new object[] { startDate, endDate });
                    else
                        title = string.Format(dtFormat, this.TitleRangeFullMonthFormat, new object[] { startDate, endDate });

                    this.TitleElement.Text = title;
                }
            }
        }

        #endregion
    }
}
MainPage.xaml
Copy Code
<Intersoft:UXScheduleView x:Name="SampleControl1" IsBusy="{Binding IsBusy, Mode=TwoWay}"
                          EventsSource="{Binding Events}" CategoriesSource="{Binding Categories}" ResourcesSource="{Binding Resources}">
    <Intersoft:UXScheduleDayView/>
    <Intersoft:UXScheduleWorkWeekView/>
    <Intersoft:UXScheduleWeekView/>
    <Intersoft:UXScheduleMonthView/>
    <local:AgendaView Header="Agenda" IsActive="True"/>
</Intersoft:UXScheduleView>
See Also

Concepts