Articles in this section
Category / Section

How to customize Resource header in WPF Schedule?

2 mins read

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 WPF 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\WPF\SfSchedule.WPF\ SfSchedule\Samples\ 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 Vie


Conclusion

I hope you enjoyed how to customize Resource header in Schedule.

You can refer to our WPF Schedule feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Schedule example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied