Step 2 of 4: Creating the Resources and the C1Scheduler Control

In this step you will create your application resources and data bindings. You will also add and customize a C1Scheduler control.

Follow these steps:

Add the following namespaces to your main MultiUser application:

XAML	Copy Code
xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule" Or, for Silverlight 5: xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight.5" xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule.5" The entire namespace declaration should appear as follows: <UserControl x:Class="MultipleUserTest.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

XAML

Copy Code

xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight"
xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule"
Or, for Silverlight 5:
xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight.5"
xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule.5"
The entire namespace declaration should appear as follows:
<UserControl x:Class="MultipleUserTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight"
xmlns:c1sched="clr-namespace:C1.Silverlight.Schedule;assembly=C1.Silverlight.Schedule"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

Add <UserControl.Resources> </UserControl.Resources> tags below the namespace declarations.

Click between the tags and insert the following Resource Dictionary:

XAML	Copy Code
<ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/C1.Silverlight.Schedule;component/themes/generic.xaml"/> </ResourceDictionary.MergedDictionaries>

Add the following XAML after the Resource Dictionary to create the Control Template:

XAML	Copy Code
<ControlTemplate x:Key="looklessButton" TargetType="Button"> <Border> <ContentPresenter Margin="4,0" VerticalAlignment="Center"/> </Border> </ControlTemplate>

Create two custom header templates with the following XAML markup. This will create the Custom Group Header Template and the Custom Time Line Group Header Template:

XAML	Copy Code
<!-- custom GroupHeaderTemplate --> <DataTemplate x:Key="myCustomGroupHeaderTemplate"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="25" /> </Grid.RowDefinitions> <c1:C1BrushBuilder x:Name="Background" Style="{StaticResource C1Scheduler_ControlArea_BrushStyle}" Input="{Binding Background}"/> <c1:C1BrushBuilder x:Name="BorderBrush" Input="{Binding Background}" Style="{StaticResource C1Scheduler_MonthHeaderForeground_BrushStyle}"/> <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="2" Grid.RowSpan="2" BorderThickness="1,0,1,0" BorderBrush="{Binding Output, ElementName=BorderBrush}" Background="{Binding Output, ElementName=Background}"/> <!-- navigate to the first group --> <Button Template="{StaticResource looklessButton}" Content="\|<<" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" c1:CommandExtensions.CommandParameter="Home" c1:CommandExtensions.CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowPreviousButton, Converter={StaticResource BooleanToVisibilityConverter}}"/> <!-- navigate to the previous group --> <Button Template="{StaticResource looklessButton}" Content="<" Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand" c1:CommandExtensions.CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowPreviousButton, Converter={StaticResource BooleanToVisibilityConverter}}"/> <!-- navigate to the next group --> <Button Template="{StaticResource looklessButton}" Content=">" Grid.Column="3" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToNextGroupCommand" c1:CommandExtensions.CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowNextButton, Converter={StaticResource BooleanToVisibilityConverter}}"/> <!-- navigate to the last group --> <Button Template="{StaticResource looklessButton}" Content=">>\|" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Center" FontSize="12" c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToNextGroupCommand" c1:CommandExtensions.CommandParameter="End" c1:CommandExtensions.CommandTarget="{Binding Scheduler}" Visibility="{Binding ShowNextButton, Converter={StaticResource BooleanToVisibilityConverter}}"/> <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2" Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, ConverterParameter=Invert}" Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Center"/> <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2" FontWeight="Bold" Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}" Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Center"/> <!-- show additional info from the EmployeesRow --> <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2" Grid.Row="1" Text="{Binding Path=Tag[Title]}" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> </DataTemplate> <!-- use different group header for TimeLine style --> <DataTemplate x:Key="myCustomTimeLineGroupHeaderTemplate"> <Grid IsHitTestVisible="False"> <c1:C1BrushBuilder x:Name="Background" Style="{StaticResource C1Scheduler_ControlArea_BrushStyle}" Input="{Binding Background}"/> <c1:C1BrushBuilder x:Name="BorderBrush" Style="{StaticResource C1Scheduler_MonthHeaderForeground_BrushStyle}" Input="{Binding Background}"/> <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderThickness="4,1,0,1" BorderBrush="{Binding Output, ElementName=BorderBrush}" Background="{Binding Output, ElementName=Background}"> <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> <TextBlock TextWrapping="Wrap" Foreground="{Binding Path=Scheduler.Foreground}" Margin="2" Text="{Binding DisplayName}" HorizontalAlignment="Center"/> <!-- show additional info from the EmployeesRow --> <TextBlock TextWrapping="Wrap" Foreground="{Binding Path=Scheduler.Foreground}" Margin="2" Text="{Binding Path=Tag[Title]}" HorizontalAlignment="Center"/> </StackPanel> </Border> </Grid> </DataTemplate>

XAML

Copy Code

<!-- custom GroupHeaderTemplate -->
            <DataTemplate x:Key="myCustomGroupHeaderTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition Height="25" />
                    </Grid.RowDefinitions>
                    <c1:C1BrushBuilder x:Name="Background" Style="{StaticResource C1Scheduler_ControlArea_BrushStyle}" Input="{Binding Background}"/>
                    <c1:C1BrushBuilder x:Name="BorderBrush" Input="{Binding Background}" Style="{StaticResource C1Scheduler_MonthHeaderForeground_BrushStyle}"/>
                    <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="2" Grid.RowSpan="2"
                                                BorderThickness="1,0,1,0" BorderBrush="{Binding Output, ElementName=BorderBrush}"
                                                Background="{Binding Output, ElementName=Background}"/>
                    <!-- navigate to the first group -->
                    <Button Template="{StaticResource looklessButton}" Content="|&lt;&lt;" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center"
                                                FontSize="12"
                                                c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand"
                                                c1:CommandExtensions.CommandParameter="Home"
                                                c1:CommandExtensions.CommandTarget="{Binding Scheduler}"
                                                Visibility="{Binding ShowPreviousButton, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                    <!-- navigate to the previous group -->
                    <Button Template="{StaticResource looklessButton}" Content="&lt;" Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Center"
                                                FontSize="12"
                                                c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToPreviousGroupCommand"
                                                c1:CommandExtensions.CommandTarget="{Binding Scheduler}"
                                                Visibility="{Binding ShowPreviousButton, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                    <!-- navigate to the next group -->
                    <Button Template="{StaticResource looklessButton}" Content="&gt;" Grid.Column="3" Grid.RowSpan="2" VerticalAlignment="Center"
                                                FontSize="12"
                                                c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToNextGroupCommand"
                                                c1:CommandExtensions.CommandTarget="{Binding Scheduler}"
                                                Visibility="{Binding ShowNextButton, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                    <!-- navigate to the last group -->
                    <Button Template="{StaticResource looklessButton}" Content="&gt;&gt;|" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Center"
                                                FontSize="12"
                                                c1:CommandExtensions.Command="c1sched:C1Scheduler.NavigateToNextGroupCommand"
                                                c1:CommandExtensions.CommandParameter="End"
                                                c1:CommandExtensions.CommandTarget="{Binding Scheduler}"
                                                Visibility="{Binding ShowNextButton, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                    <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2"
                                             Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, ConverterParameter=Invert}"
                                             Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2"
                                             FontWeight="Bold" Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}}"
                                             Text="{Binding DisplayName}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    <!-- show additional info from the EmployeesRow -->
                    <TextBlock Foreground="{Binding Path=Scheduler.Foreground}" Margin="10,3" Grid.Column="2" Grid.Row="1"
                                             Text="{Binding Path=Tag[Title]}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
            </DataTemplate>

            <!-- use different group header for TimeLine style -->
            <DataTemplate x:Key="myCustomTimeLineGroupHeaderTemplate">
                <Grid IsHitTestVisible="False">
                    <c1:C1BrushBuilder x:Name="Background" Style="{StaticResource C1Scheduler_ControlArea_BrushStyle}" Input="{Binding Background}"/>
                    <c1:C1BrushBuilder x:Name="BorderBrush" Style="{StaticResource C1Scheduler_MonthHeaderForeground_BrushStyle}" Input="{Binding Background}"/>
                    <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                                      BorderThickness="4,1,0,1" BorderBrush="{Binding Output, ElementName=BorderBrush}"
                                      Background="{Binding Output, ElementName=Background}">
                        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                            <TextBlock TextWrapping="Wrap" Foreground="{Binding Path=Scheduler.Foreground}" Margin="2"
                                                  Text="{Binding DisplayName}" HorizontalAlignment="Center"/>
                            <!-- show additional info from the EmployeesRow -->
                            <TextBlock TextWrapping="Wrap" Foreground="{Binding Path=Scheduler.Foreground}" Margin="2"
                                                     Text="{Binding Path=Tag[Title]}" HorizontalAlignment="Center"/>
                        </StackPanel>
                    </Border>
                </Grid>
            </DataTemplate>

Add the following XAML markup to complete the styles and databindings used in your application:

XAML	Copy Code
<!-- Border Brush --> <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFA3AEB9" Offset="0"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.375"/> <GradientStop Color="#FF617584" Offset="1"/> </LinearGradientBrush> <!-- Button styles --> <SolidColorBrush x:Key="commandBaseBorderBrush" Color="#FF6593CF"/> <LinearGradientBrush x:Key="buttBackBrush" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#FFE3EFFF" Offset="0"/> <GradientStop Color="#FFC4DDFF" Offset="0.367"/> <GradientStop Color="#FFADD1FF" Offset="0.377"/> <GradientStop Color="#FFC0DBFF" Offset="1"/> </LinearGradientBrush> <Style x:Key="buttonStyle" TargetType="Button"> <Setter Property="Width" Value="90"/> <Setter Property="Background" Value="{StaticResource buttBackBrush}" /> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="Orange"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border BorderThickness="0,0,1,0"> <Border.Background> <LinearGradientBrush x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#FFE3EFFF" Offset="0"/> <GradientStop Color="#FFC4DDFF" Offset="0.367"/> <GradientStop Color="#FFADD1FF" Offset="0.377"/> <GradientStop Color="#FFC0DBFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border Name="brd" BorderThickness="0,0,1,0" Margin="0,3" BorderBrush="{StaticResource commandBaseBorderBrush}"/> <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="RadioButton" x:Key="radioButtonStyle"> <Setter Property="Width" Value="90"/> <Setter Property="Background" Value="{StaticResource buttBackBrush}" /> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="RadioButton"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="brd" Storyboard.TargetProperty="Opacity" To="0.15"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="CheckStates"> <VisualState x:Name="Checked"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFD9AA"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFBB6E"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFAB3F"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFEE17A"/> </Storyboard> </VisualState> <VisualState x:Name="Unchecked"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border BorderThickness="0,0,1,0"> <Border.Background> <LinearGradientBrush x:Name="MouseOverGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="Transparent" Offset="0"/> <GradientStop Color="Transparent" Offset="0.367"/> <GradientStop Color="Transparent" Offset="0.377"/> <GradientStop Color="Transparent" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border Name="brd" BorderThickness="0,0,1,0"> <Border.Background> <LinearGradientBrush x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#FFE3EFFF" Offset="0"/> <GradientStop Color="#F9C4DDFF" Offset="0.367"/> <GradientStop Color="#E5ADD1FF" Offset="0.377"/> <GradientStop Color="#C6C0DBFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border BorderThickness="0,0,1,0" Margin="0,3" BorderBrush="{StaticResource commandBaseBorderBrush}"/> <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> </UserControl.Resources>

XAML

Copy Code

<!-- Border Brush -->
            <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>

            <!-- Button styles -->
            <SolidColorBrush x:Key="commandBaseBorderBrush"  Color="#FF6593CF"/>
            <LinearGradientBrush x:Key="buttBackBrush" StartPoint="0,0" EndPoint="0,1" >
                <GradientStop Color="#FFE3EFFF" Offset="0"/>
                <GradientStop Color="#FFC4DDFF" Offset="0.367"/>
                <GradientStop Color="#FFADD1FF" Offset="0.377"/>
                <GradientStop Color="#FFC0DBFF" Offset="1"/>
            </LinearGradientBrush>
            <Style x:Key="buttonStyle"  TargetType="Button">
                <Setter Property="Width" Value="90"/>
                <Setter Property="Background" Value="{StaticResource buttBackBrush}" />
                <Setter Property="Foreground" Value="#FF000000"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="FontSize" Value="14"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="Orange"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border BorderThickness="0,0,1,0">
                                    <Border.Background>
                                        <LinearGradientBrush x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" >
                                            <GradientStop Color="#FFE3EFFF" Offset="0"/>
                                            <GradientStop Color="#FFC4DDFF" Offset="0.367"/>
                                            <GradientStop Color="#FFADD1FF" Offset="0.377"/>
                                            <GradientStop Color="#FFC0DBFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <Border Name="brd" BorderThickness="0,0,1,0" Margin="0,3"
                                                        BorderBrush="{StaticResource commandBaseBorderBrush}"/>
                                <ContentPresenter
                                      x:Name="contentPresenter"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="RadioButton" x:Key="radioButtonStyle">
                <Setter Property="Width" Value="90"/>
                <Setter Property="Background" Value="{StaticResource buttBackBrush}" />
                <Setter Property="Foreground" Value="#FF000000"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="FontSize" Value="14"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="RadioButton">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="brd" Storyboard.TargetProperty="Opacity" To="0.15"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFD9AA"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFBB6E"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFAB3F"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFEE17A"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border BorderThickness="0,0,1,0">
                                    <Border.Background>
                                        <LinearGradientBrush x:Name="MouseOverGradient" StartPoint="0,0" EndPoint="0,1" >
                                            <GradientStop Color="Transparent" Offset="0"/>
                                            <GradientStop Color="Transparent" Offset="0.367"/>
                                            <GradientStop Color="Transparent" Offset="0.377"/>
                                            <GradientStop Color="Transparent" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <Border Name="brd" BorderThickness="0,0,1,0">
                                    <Border.Background>
                                        <LinearGradientBrush x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" >
                                            <GradientStop Color="#FFE3EFFF" Offset="0"/>
                                            <GradientStop Color="#F9C4DDFF" Offset="0.367"/>
                                            <GradientStop Color="#E5ADD1FF" Offset="0.377"/>
                                            <GradientStop Color="#C6C0DBFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <Border BorderThickness="0,0,1,0" Margin="0,3"
                                                        BorderBrush="{StaticResource commandBaseBorderBrush}"/>
                                <ContentPresenter
                                x:Name="contentPresenter"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Margin="{TemplateBinding Padding}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>

Add the following XAML markup to complete the styles and databindings used in your application:

XAML	Copy Code
<!-- Border Brush --> <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFA3AEB9" Offset="0"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.375"/> <GradientStop Color="#FF617584" Offset="1"/> </LinearGradientBrush> <!-- Button styles --> <SolidColorBrush x:Key="commandBaseBorderBrush" Color="#FF6593CF"/> <LinearGradientBrush x:Key="buttBackBrush" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#FFE3EFFF" Offset="0"/> <GradientStop Color="#FFC4DDFF" Offset="0.367"/> <GradientStop Color="#FFADD1FF" Offset="0.377"/> <GradientStop Color="#FFC0DBFF" Offset="1"/> </LinearGradientBrush> <Style x:Key="buttonStyle" TargetType="Button"> <Setter Property="Width" Value="90"/> <Setter Property="Background" Value="{StaticResource buttBackBrush}" /> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="Orange"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border BorderThickness="0,0,1,0"> <Border.Background> <LinearGradientBrush x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#FFE3EFFF" Offset="0"/> <GradientStop Color="#FFC4DDFF" Offset="0.367"/> <GradientStop Color="#FFADD1FF" Offset="0.377"/> <GradientStop Color="#FFC0DBFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border Name="brd" BorderThickness="0,0,1,0" Margin="0,3" BorderBrush="{StaticResource commandBaseBorderBrush}"/> <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="RadioButton" x:Key="radioButtonStyle"> <Setter Property="Width" Value="90"/> <Setter Property="Background" Value="{StaticResource buttBackBrush}" /> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="FontSize" Value="14"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="RadioButton"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="brd" Storyboard.TargetProperty="Opacity" To="0.15"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/> <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="CheckStates"> <VisualState x:Name="Checked"> <Storyboard> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFD9AA"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFBB6E"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFAB3F"/> <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFEE17A"/> </Storyboard> </VisualState> <VisualState x:Name="Unchecked"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border BorderThickness="0,0,1,0"> <Border.Background> <LinearGradientBrush x:Name="MouseOverGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="Transparent" Offset="0"/> <GradientStop Color="Transparent" Offset="0.367"/> <GradientStop Color="Transparent" Offset="0.377"/> <GradientStop Color="Transparent" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border Name="brd" BorderThickness="0,0,1,0"> <Border.Background> <LinearGradientBrush x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#FFE3EFFF" Offset="0"/> <GradientStop Color="#F9C4DDFF" Offset="0.367"/> <GradientStop Color="#E5ADD1FF" Offset="0.377"/> <GradientStop Color="#C6C0DBFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border BorderThickness="0,0,1,0" Margin="0,3" BorderBrush="{StaticResource commandBaseBorderBrush}"/> <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> </UserControl.Resources>

XAML

Copy Code

<!-- Border Brush -->
            <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>

            <!-- Button styles -->
            <SolidColorBrush x:Key="commandBaseBorderBrush"  Color="#FF6593CF"/>
            <LinearGradientBrush x:Key="buttBackBrush" StartPoint="0,0" EndPoint="0,1" >
                <GradientStop Color="#FFE3EFFF" Offset="0"/>
                <GradientStop Color="#FFC4DDFF" Offset="0.367"/>
                <GradientStop Color="#FFADD1FF" Offset="0.377"/>
                <GradientStop Color="#FFC0DBFF" Offset="1"/>
            </LinearGradientBrush>
            <Style x:Key="buttonStyle"  TargetType="Button">
                <Setter Property="Width" Value="90"/>
                <Setter Property="Background" Value="{StaticResource buttBackBrush}" />
                <Setter Property="Foreground" Value="#FF000000"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="FontSize" Value="14"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="Orange"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border BorderThickness="0,0,1,0">
                                    <Border.Background>
                                        <LinearGradientBrush x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" >
                                            <GradientStop Color="#FFE3EFFF" Offset="0"/>
                                            <GradientStop Color="#FFC4DDFF" Offset="0.367"/>
                                            <GradientStop Color="#FFADD1FF" Offset="0.377"/>
                                            <GradientStop Color="#FFC0DBFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <Border Name="brd" BorderThickness="0,0,1,0" Margin="0,3"
                                                        BorderBrush="{StaticResource commandBaseBorderBrush}"/>
                                <ContentPresenter
                                      x:Name="contentPresenter"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="RadioButton" x:Key="radioButtonStyle">
                <Setter Property="Width" Value="90"/>
                <Setter Property="Background" Value="{StaticResource buttBackBrush}" />
                <Setter Property="Foreground" Value="#FF000000"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="FontSize" Value="14"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="RadioButton">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="brd" Storyboard.TargetProperty="Opacity" To="0.15"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFFCDE"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFEAAC"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFD767"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="MouseOverGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFFE59B"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFFFD9AA"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFFFBB6E"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFFFAB3F"/>
                                                <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFFEE17A"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border BorderThickness="0,0,1,0">
                                    <Border.Background>
                                        <LinearGradientBrush x:Name="MouseOverGradient" StartPoint="0,0" EndPoint="0,1" >
                                            <GradientStop Color="Transparent" Offset="0"/>
                                            <GradientStop Color="Transparent" Offset="0.367"/>
                                            <GradientStop Color="Transparent" Offset="0.377"/>
                                            <GradientStop Color="Transparent" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <Border Name="brd" BorderThickness="0,0,1,0">
                                    <Border.Background>
                                        <LinearGradientBrush x:Name="BackgroundGradient" StartPoint="0,0" EndPoint="0,1" >
                                            <GradientStop Color="#FFE3EFFF" Offset="0"/>
                                            <GradientStop Color="#F9C4DDFF" Offset="0.367"/>
                                            <GradientStop Color="#E5ADD1FF" Offset="0.377"/>
                                            <GradientStop Color="#C6C0DBFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <Border BorderThickness="0,0,1,0" Margin="0,3"
                                                        BorderBrush="{StaticResource commandBaseBorderBrush}"/>
                                <ContentPresenter
                                x:Name="contentPresenter"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Margin="{TemplateBinding Padding}"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>

Insert the following XAML markup to create a grid, a border for your application, and a stackpanel that contains four radio buttons that will control the scheduler view:

XAML	Copy Code
<Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="196"/> <ColumnDefinition MinWidth="200"/> </Grid.ColumnDefinitions> <Border BorderThickness="1" Height="28" HorizontalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="2" BorderBrush="{StaticResource BorderBrush}" Background="{StaticResource buttBackBrush}"> <StackPanel Orientation="Horizontal" > <RadioButton x:Name="btnDay" Style="{StaticResource radioButtonStyle}" Content="Day" c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=OneDayStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnWorkWeek" Style="{StaticResource radioButtonStyle}" Content="Work Week" c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=WorkingWeekStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnWeek" Style="{StaticResource radioButtonStyle}" Content="Week" c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=WeekStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnMonth" Style="{StaticResource radioButtonStyle}" Content="Month" c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=MonthStyle, ElementName=Scheduler}"/> <RadioButton x:Name="btnTimeLine" Style="{StaticResource radioButtonStyle}" Content="Time Line" Width="100" c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}" c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand" c1:CommandExtensions.CommandParameter="{Binding Path=TimeLineStyle, ElementName=Scheduler}"/> </StackPanel> </Border>

XAML

Copy Code

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="196"/>
            <ColumnDefinition MinWidth="200"/>
        </Grid.ColumnDefinitions>
        <Border BorderThickness="1" Height="28" HorizontalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="2"
                BorderBrush="{StaticResource BorderBrush}" Background="{StaticResource buttBackBrush}">
            <StackPanel Orientation="Horizontal" >
                <RadioButton x:Name="btnDay" Style="{StaticResource radioButtonStyle}" Content="Day"
                             c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}"
                             c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand"
                             c1:CommandExtensions.CommandParameter="{Binding Path=OneDayStyle, ElementName=Scheduler}"/>
                <RadioButton x:Name="btnWorkWeek" Style="{StaticResource radioButtonStyle}" Content="Work Week"
                             c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}"
                             c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand"
                             c1:CommandExtensions.CommandParameter="{Binding Path=WorkingWeekStyle, ElementName=Scheduler}"/>
                <RadioButton x:Name="btnWeek" Style="{StaticResource radioButtonStyle}" Content="Week"
                             c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}"
                             c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand"
                             c1:CommandExtensions.CommandParameter="{Binding Path=WeekStyle, ElementName=Scheduler}"/>
                <RadioButton x:Name="btnMonth" Style="{StaticResource radioButtonStyle}" Content="Month"
                             c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}"
                             c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand"
                             c1:CommandExtensions.CommandParameter="{Binding Path=MonthStyle, ElementName=Scheduler}"/>
                <RadioButton x:Name="btnTimeLine" Style="{StaticResource radioButtonStyle}" Content="Time Line" Width="100"
                             c1:CommandExtensions.CommandTarget="{Binding ElementName=Scheduler}"
                             c1:CommandExtensions.Command="sched:C1Scheduler.ChangeStyleCommand"
                             c1:CommandExtensions.CommandParameter="{Binding Path=TimeLineStyle, ElementName=Scheduler}"/>
            </StackPanel>
        </Border>

The following XAML markup creates the listbox, C1Calendar, and C1Scheduler for the application:

XAML	Copy Code
<c1sched:C1Calendar x:Name="Calendar" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="1" MaxSelectionCount="42" SelectedDates="{Binding VisibleDates, ElementName=Scheduler}" CalendarHelper="{Binding CalendarHelper, ElementName=Scheduler}" BoldedDates="{Binding BoldedDates, ElementName=Scheduler}" GenerateAdjacentMonthDays="true" Margin="2"/> <ListBox Grid.Column="0" Grid.Row="2" x:Name="lstUsers" MinHeight="100" Margin="2" ItemsSource="{Binding GroupItems, ElementName=Scheduler}"> <ListBox.ItemTemplate> <DataTemplate> <CheckBox Margin="2" Content="{Binding}" Tag="{Binding}" IsChecked="{Binding IsChecked, Mode=TwoWay}"/> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <c1sched:C1Scheduler x:Name="Scheduler" StyleChanged="Scheduler_StyleChanged" GroupBy="Owner" GroupHeaderTemplate="{StaticResource myCustomGroupHeaderTemplate}" GroupPageSize="2" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Style="{Binding OneDayStyle, ElementName=Scheduler}" c1:C1NagScreen.Nag="True"> <c1sched:C1Scheduler.Settings> <c1sched:C1SchedulerSettings FirstVisibleTime="07:00:00" AllowContactsEditing="False" AllowCategoriesEditing="False" AllowCategoriesMultiSelection="False" /> </c1sched:C1Scheduler.Settings> </c1sched:C1Scheduler> <!-- Status bar --> <StackPanel Margin="2" Grid.Row="3" Grid.ColumnSpan="2" Orientation="Horizontal"> <TextBlock Margin="2,2,10,2">Status:</TextBlock> <TextBlock Margin="2" x:Name="tbStatus" Grid.Row="2" MinHeight="10"/> </StackPanel> </Grid> </UserControl>

XAML

Copy Code

<c1sched:C1Calendar x:Name="Calendar" VerticalAlignment="Stretch" Grid.Column="0" Grid.Row="1"
                                    MaxSelectionCount="42" SelectedDates="{Binding VisibleDates, ElementName=Scheduler}"
                                    CalendarHelper="{Binding CalendarHelper, ElementName=Scheduler}"
                                    BoldedDates="{Binding BoldedDates, ElementName=Scheduler}"
                                    GenerateAdjacentMonthDays="true" Margin="2"/>
        <ListBox Grid.Column="0" Grid.Row="2" x:Name="lstUsers" MinHeight="100" Margin="2"
                         ItemsSource="{Binding GroupItems, ElementName=Scheduler}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <CheckBox Margin="2" Content="{Binding}" Tag="{Binding}" IsChecked="{Binding IsChecked, Mode=TwoWay}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <c1sched:C1Scheduler x:Name="Scheduler" StyleChanged="Scheduler_StyleChanged"
                                           GroupBy="Owner" GroupHeaderTemplate="{StaticResource myCustomGroupHeaderTemplate}" GroupPageSize="2"
                                           Grid.Column="1" Grid.Row="1" Grid.RowSpan="2"
                                           Style="{Binding OneDayStyle, ElementName=Scheduler}" c1:C1NagScreen.Nag="True">
            <c1sched:C1Scheduler.Settings>
                <c1sched:C1SchedulerSettings FirstVisibleTime="07:00:00" AllowContactsEditing="False" AllowCategoriesEditing="False" AllowCategoriesMultiSelection="False" />
            </c1sched:C1Scheduler.Settings>
        </c1sched:C1Scheduler>
        <!-- Status bar -->
        <StackPanel Margin="2" Grid.Row="3" Grid.ColumnSpan="2" Orientation="Horizontal">
            <TextBlock Margin="2,2,10,2">Status:</TextBlock>
            <TextBlock Margin="2" x:Name="tbStatus" Grid.Row="2" MinHeight="10"/>
        </StackPanel>
    </Grid>
</UserControl>

In this step you created the application databindings and resources. You also created the C1Scheduler and C1Calendar controls and customized some of the scheduler settings. In the next step, you will add the code to control your application.