How to customize header Resources in Silverlight Schedule ?
The header of Schedule Resources can be easily customized by overriding the default style in all view. This article explains how you can customize the default Resource header style in all view of Schedule.
For Customizing the Resource header in TimeLine View
Create a Silverlight application and add SfSchedule control by specifying the resource to it.
XAML
<syncfusion:SfSchedule x:Name="Schedule" Resource="Doctor" DayHeaderOrder="OrderByResource" ScheduleType="Day"/>
Add resources in ScheduleResourceTypeCollection as follows.
XAML
<syncfusion:SfSchedule.ScheduleResourceTypeCollection > <syncfusion:ResourceType TypeName="Doctors" > <local:CustomResource BackgroundBrush="#FFC13E70" DisplayName="Dr.Jacob John, M.D " ResourceName="Dr.Jacob"/> <local:CustomResource BackgroundBrush="#FF00ABA9" DisplayName="Dr.Darsy Mascio, M.D" ResourceName="Dr.Darsy"/> </syncfusion:ResourceType> </syncfusion:SfSchedule.ScheduleResourceTypeCollection>>
To customize the Schedule Resource header in TimeLine view, you need to override the default style of TimeLineViewItemHeader Control and add necessary style in the application as follows.
XAML
<Style TargetType="syncfusion:TimeLineViewItemHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:TimeLineViewItemHeader">
<Grid>
<Border Background="{Binding BackgroundBrush}" BorderBrush="Green" BorderThickness="2">
<StackPanel Orientation="Vertical">
<Image Source="{Binding ResourceImageUri}" Height="100" Width="100"/>
<TextBlock Foreground="White" FontSize="13" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding DisplayName}" />
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
For Customizing the Resource header in Month View
Similarly to customize the Schedule Resource header in Month view, you need to override the default style of MonthViewItemHeader control and add necessary style in the application as follows.
XAML
<Style TargetType="syncfusion:MonthViewItemHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:MonthViewItemHeader">
<Grid>
<Border Background="{Binding BackgroundBrush}" BorderBrush="Green" BorderThickness="2">
<StackPanel Orientation="Vertical">
<Image Source="{Binding ResourceImageUri}" Height="100" Width="100"/>
<TextBlock Foreground="White" FontSize="13" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding DisplayName}">
</TextBlock>
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
For Customizing the Resource header in Day View
You can also add necessary style in Schedule Resource header in Day/Week/Work week view, by overriding the default style of DayViewItemHeader control in the application as follows.
XAML
<Style TargetType="syncfusion:DayViewItemHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:DayViewItemHeader">
<Grid>
<Border Height="120" Padding="5" Background="{Binding BackgroundBrush}" BorderBrush="White" BorderThickness="3">
<StackPanel Orientation="Vertical">
<Image Source="{Binding ResourceImageUri}" Height="80" Width="100"/>
<TextBlock Grid.Row="1" Foreground="White" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding DisplayName}" />
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In the above all the mentioned styles, the Textblock and Image are used to display the Resource name and image in Resource header.
The following sample is to illustrate the Schedule Resource header customization by overriding the default style of DayViewItemHeader of Schedule and specifying the type as week.
Sample Location:
\AppData\Local\Syncfusion\EssentialStudio\12.3.0.36\ Silverlight \SfSchedule.Silverlight\ SfSchedule\ ResourceDemo
In the above sample by applying the other view Resource header styles given above and by changing the Schedule type you can get the similar output as follows for other views (Month, TimeLine, Day and WorkWeek)
The following screenshot displays the Resource Header customization in Day View.
Figure 1: Resource Header customization in Day View
The following screenshot displays the Resource Header customization in Month View.
Figure 2: Resource Header customization in Month View
The following screenshot displays the Resource Header customization in Week View.
Figure 3: Resource Header customization in Week View
The following screenshot displays the Resource Header customization in Work Week View.
Figure 4: Resource Header customization in Work Week View
The following screenshot displays the Resource Header customization in TimeLine View.
Figure 5: Resource Header customization in TimeLine View
