Customizing the WPF scheduler dialog boxes

One of the controls in our WPF Elements control suite is the familiar Outlook styled Scheduler. This lets users add, edit and view appointments that are scheduled to occur at a particular date and time. Some of these actions such as editing a recurrence pattern are performed by the user changing values in a dialog box as seen below.

Recurrence Dialog

In the current nightly build we have made it easier to customize the template of these dialog boxes. By customizing the dialog boxes you can change the colors and styles of the various controls to suit the needs of you application. This also means you can localize the dialogs by changing the text labels. The best way to create a custom dialog style is to start with the code for the default style and then alter it however you need. Below is the default styling code for the dialog used for adding schedule items.

<ms:BooleanToObjectConverter x:Key="RecurrenceButtonContentConverter" TrueObject="Edit Recurrence" FalseObject="Add Recurrence" />
 
<Style x:Key="ScheduleItemDialogStyle" TargetType="ms:ScheduleItemDialog">
    <Setter Property="Title" Value="New Appointment" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid x:Name="LayoutRoot" Margin="10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="70" />
                        <ColumnDefinition Width="10" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="22" />
                        <RowDefinition Height="10" />
                        <RowDefinition Height="22" />
                        <RowDefinition Height="10" />
                        <RowDefinition Height="22" />
                        <RowDefinition Height="10" />
                        <RowDefinition Height="22" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
 
                    <Button Command="{x:Static ms:SchedulerCommands.EditRecurrenceCommand}" Grid.Column="2" Width="100" HorizontalAlignment="Left"
                            Content="{Binding HasRecurrence, Converter={StaticResource RecurrenceButtonContentConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
 
                    <TextBlock TextAlignment="Right" VerticalAlignment="Center" Grid.Row="2">Subject:</TextBlock>
                    <TextBox Text="{Binding Subject, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Grid.Row="2" Grid.Column="2" />
 
                    <TextBlock TextAlignment="Right" VerticalAlignment="Center" Grid.Row="4">Start time:</TextBlock>
                    <StackPanel Orientation="Horizontal" Grid.Row="4" Grid.Column="2">
                        <ms:DropDownDatePicker Width="205" Margin="0,0,10,0" Value="{Binding StartDate}" Format="Custom" CustomFormat="dd/MM/yyyy" />
                        <ms:TimePicker Width="80" SelectedTime="{Binding StartTime}" ItemsSource="{Binding StartTimeList}" />
                    </StackPanel>
 
                    <TextBlock TextAlignment="Right" VerticalAlignment="Center" Grid.Row="6">End time:</TextBlock>
                    <StackPanel Orientation="Horizontal" Grid.Row="6" Grid.Column="2">
                        <ms:DropDownDatePicker Width="205" Margin="0,0,10,0" Value="{Binding EndDate}" Format="Custom" CustomFormat="dd/MM/yyyy" />
                        <ms:TimePicker Width="80" SelectedTime="{Binding EndTime}" ItemsSource="{Binding EndTimeList}" />
                    </StackPanel>
 
                    <StackPanel Orientation="Horizontal" Grid.Row="7" Grid.Column="2">
                        <Button Command="{x:Static ms:SchedulerCommands.OkCommand}" Content="Save &amp; Close" Width="95" Height="23" Margin="0,18,0,0" />
                        <Button Command="{x:Static ms:SchedulerCommands.CancelCommand}" Content="Cancel" Width="75" Height="23" Margin="10,18,0,0" />
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The default styling code for all 3 dialog box templates can be downloaded here. You may notice that each style is also setting the Title property using a setter. This changes the title of the dialog window which is convenient for localization or to simply provide a different title. In order for the Scheduler control to use your custom styles, you just need to create an instance of the SchedulerFormatter and set the appropriate properties. This is demonstrated in the code below.

<ms:SchedulerFormatter x:Key="Formatter"
                       ScheduleItemDialogStyle="{StaticResource ScheduleItemDialogStyle}"
                       RecurrenceDialogStyle="{StaticResource RecurrenceDialogStyle}"
                       DeleteRecurrenceDialogStyle="{StaticResource DeleteRecurrenceDialogStyle}"
                       DefaultScheduleItemName="New Schedule Item" />
 
<ms:Scheduler Formatter="{StaticResource Formatter}" />

Here I am also setting the DefaultScheduleItemName property which is also new in the latest nightly build. This lets you change the default name of newly created schedule items, which again is convenient for localization.

The current nightly build for the trial version can be downloaded from here, or you can go to your account page if you’re already a customer.

And that’s all you need to know to start creating your own custom dialog styles for the Scheduler. If you have any questions or need assistance with any of this, then we’d love to hear from you in the forum!

Tagged as WPF Elements

Leave a Reply

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top