Custom appearance of WPF Resource view

Continuing from the previous post we will now customize the appearance of the Resource view to achieve a more aesthetically pleasing presentation. The appearance of the view is customized by setting various properties of the Calendar.ResourceViewSettings object.

We will build our presentation on the Silver theme by reducing the sharpness and contrast of colors and making the font uniform across the entire view. The customization process is divided to the following steps:

Customize the view background.

calendar.ResourceViewSettings.CalendarStyle.Background = Brushes.White;

Customize the row headers.

calendar.ResourceViewSettings.ExpandableRows = false;
calendar.ResourceViewSettings.HeaderStyle.FontFamily = headerFont;
calendar.ResourceViewSettings.HeaderStyle.FontSize = 13;
calendar.ResourceViewSettings.HeaderStyle.Foreground = new SolidColorBrush(Color.FromArgb(255, 64, 64, 64));
calendar.ResourceViewSettings.HeaderStyle.Background = Brushes.White;
calendar.ResourceViewSettings.HeaderStyle.BorderBrush = borderBrush;
calendar.ResourceViewSettings.HeaderStyle.BorderThickness = new Thickness(0, 0, 0, 1);

Customize the view cells.

calendar.ResourceViewSettings.CellStyle.Background = Brushes.White;
calendar.ResourceViewSettings.CellStyle.BorderBrush = borderBrush;
calendar.ResourceViewSettings.WeekendStyle.Background = new SolidColorBrush(Color.FromArgb(255, 250, 250, 250));
calendar.ResourceViewSettings.WeekendStyle.BorderBrush = borderBrush;

Customize the view timelines.

calendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.Background = Brushes.White;
calendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.BorderBrush = borderBrush;
calendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.FontFamily = headerFont;
calendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.FontSize = 13;
calendar.ResourceViewSettings.BottomTimelineSettings.CalendarStyle.FontWeight = FontWeights.Normal;
calendar.ResourceViewSettings.BottomTimelineSettings.NowFillBrush = Brushes.Transparent;
calendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.Background = Brushes.White;
calendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.BorderBrush = borderBrush;
calendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.FontFamily = headerFont;
calendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.FontSize = 13;
calendar.ResourceViewSettings.MiddleTimelineSettings.CalendarStyle.FontWeight = FontWeights.Normal;
calendar.ResourceViewSettings.MiddleTimelineSettings.NowFillBrush = Brushes.Transparent;

Note that the font, headerFont and borderBrush variables are defined as follows:

FontFamily font = new FontFamily("Segoe UI");
FontFamily headerFont = new FontFamily("Segoe UI Light");
Brush borderBrush = new SolidColorBrush(Color.FromArgb(255, 224, 224, 224));

The final result is displayed below.

scheduling-resourceviewappearance

The complete sample project is available for download here:
http://mindfusion.eu/_samples/WpfPlannerResourceViewAppearance.zip

You can get the trial version of MindFusion.Scheduling for WPF from this link:
http://mindfusion.eu/WpfPlannerTrial.zip

Enjoy!

Custom items in WPF Calendar

Expanding on the previous post we will now modify the appearance of the calendar items through the use of a custom item presenter. To define the new presenter, simply create a new Style resource with TargetType set to ItemPresenter and place this Style somewhere in the resource look-up path – for example in the application’s or the window’s resource dictionaries. The Style must contain a setter for the Template property that defines the appearance of the item:

<Style TargetType="{x:Type planner:ItemPresenter}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type planner:ItemPresenter}">
        <Grid>
        ...
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

In this particular case the presenter represents a grid with two rows. The top row contains an icon and the header text of the item. The bottom row contains the description text. Note, that the TextBlock displaying the header text of the item has a name – HeaderBlock. The element with this name defines the position of the TextBox when the item is in-place edited.

Various appearance properties are also customized – such as FontFamily, Background and BorderBrush, by assigning new values to the respective properties of the Calendar.ItemSettings.CalendarStyle object:

calendar.ItemSettings.CalendarStyle.FontFamily = new FontFamily("Segoe UI");
calendar.ItemSettings.CalendarStyle.Background = Brushes.White;
calendar.ItemSettings.CalendarStyle.BorderBrush = Brushes.SlateGray;

Finally, the size of the calendar lanes is increased to accommodate the new appearance of the items:

calendar.ResourceViewSettings.LaneSize = 54;

The final result is displayed below.

scheduling-customitems

The complete sample project is available for download here:
http://mindfusion.eu/_samples/WpfPlannerCustomItems.zip

You can get the trial version of MindFusion.Scheduling for WPF from this link:
http://mindfusion.eu/WpfPlannerTrial.zip

Enjoy!