My Profile
Sign Out
Tickets
Knowledge Base
Login
Create Ticket
Articles in this section
Category / Section
  1. Home
  2. WinRT
  3. SfCalendar

How to customize color in winRT SfCalendar?

1 min read

By default, SfCalendar comes with a dark background and white foreground. SfCalendar allows you to customize Background,FontForeground and BorderBrushes with different colors.

For modifying complete background:

Set the calendar’s Background property to get the complete Background color.

XAML

 <Input:SfCalendar Background="Pink" />

 

The following screenshot shows SfCalendar with modified Background

 

cid:image004.png@01CF644A.6A6894F0

Modifying Font colors and individual cell Background:

You can edit SfCalendar style to modify the Font color and CalendarButton’s Background color. The following code sample explains the complete Style of SfCalendar.

XAML

  <Page.Resources>
        <DataTemplate x:Key="DefaultCellTemplate">
            <Grid>
                <TextBlock Text="{Binding Day}" 
                                                                                VerticalAlignment="Bottom"
                                                                                Margin="3"/>
            </Grid>
        </DataTemplate>
        <ControlTemplate TargetType="Button" x:Name="DefaultPreviousScrollButtonTemplate">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="PointerOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#414242"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#2FA0D5"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#2FA0D5"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#ECEEEE"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
 
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unfocused"/>
                        <VisualState x:Name="PointerFocused"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid>
                    <Ellipse x:Name="ellipse"
                                                                                                Canvas.Top="50"
                                                                                                Canvas.Left="50"
                                                                                                Fill="{TemplateBinding Background}"
                                                                                                Margin="3" Width="25" Height="25"
                                                                                                StrokeThickness="{TemplateBinding BorderThickness}"
                                                                                                Stroke="{TemplateBinding BorderBrush}"/>
                    <Border x:Name="Border" VerticalAlignment="Center" HorizontalAlignment="Center">
                        <Path x:Name="Triangle" 
                                                                                                                Data="F1M646.688,13.5518L646.783,13.4593 646.965,13.639 668.383,35.0583 689.459,35.0583 665.155,10.751 657.503,3.10126 657.323,2.92023 664.876,-4.63837 689.184,-28.9417 668.109,-28.9417 646.688,-7.52637 636.15,3.01398 646.688,13.5518z" Stretch="Uniform" Fill="{TemplateBinding Foreground}" Width="12" Height="12" 
                                                                                                                Margin="-0.5,0,1.3,0" RenderTransformOrigin="0.5,0.5">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform Angle="180" />
                                    <ScaleTransform ScaleX="-1" ScaleY="-1" />
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Border>
                </Grid>
                <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
            </Grid>
        </ControlTemplate>
 
        <ControlTemplate TargetType="Button" x:Name="DefaultNextScrollButtonTemplate">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="PointerOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#414242"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#2FA0D5"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#2FA0D5"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#ECEEEE"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ellipse">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Triangle">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unfocused"/>
                        <VisualState x:Name="PointerFocused"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid>
                    <Ellipse x:Name="ellipse"
                                                                                                Canvas.Top="50"
                                                                                                Canvas.Left="50"
                                                                                                Fill="{TemplateBinding Background}"
                                                                                                Margin="3" Width="25" Height="25"
                                                                                                StrokeThickness="{TemplateBinding BorderThickness}"
                                                                                                Stroke="{TemplateBinding BorderBrush}"/>
                    <Border x:Name="Border" VerticalAlignment="Center" HorizontalAlignment="Center">
                        <Path x:Name="Triangle" 
                                                                                                                Data="F1M646.688,13.5518L646.783,13.4593 646.965,13.639 668.383,35.0583 689.459,35.0583 665.155,10.751 657.503,3.10126 657.323,2.92023 664.876,-4.63837 689.184,-28.9417 668.109,-28.9417 646.688,-7.52637 636.15,3.01398 646.688,13.5518z" Stretch="Uniform" Fill="{TemplateBinding Foreground}" Width="12" Height="12" 
                                                                                                                Margin="-1,0,-1,0" RenderTransformOrigin="0.5,0.5">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform Angle="0" />
                                    <ScaleTransform ScaleX="-1" ScaleY="-1" />
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Border>
                </Grid>
                <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
            </Grid>
        </ControlTemplate>
 
 
        <DataTemplate x:Key="DefaultBlackOutTemplate">
            <Grid>
                <TextBlock Text="&#xE106;" Foreground="#FFA5A5A5"
                                                                                VerticalAlignment="Top" FontFamily="Segoe UI Symbol"
                                                                                Margin="3" HorizontalAlignment="Right"/>
                <TextBlock Text="{Binding Day}" Foreground="#FFA5A5A5"
                                                                                VerticalAlignment="Bottom"
                                                                                Margin="3"/>
            </Grid>
        </DataTemplate>
 
        <DataTemplate x:Key="DisabledCellTemplate">
            <Grid>
                <TextBlock Text="{Binding Day}" 
                                                                                VerticalAlignment="Bottom" Foreground="Gray" Opacity="1"
                                                                                Margin="3"/>
            </Grid>
        </DataTemplate>
 
        <DataTemplate x:Key="DefaultHeaderTemplate">
            <Grid>
                <TextBlock Text="{Binding}"
                                                                                FontSize="22" Margin="0 5"/>
            </Grid>
        </DataTemplate>
 
        <Converters:BooleanToVisibilityConverter x:Key="BooleanVisibilityConverter"/>
 
        <SolidColorBrush x:Key="AccentBrush" Color="#FF1FAEFF" />
        <Style x:Key="CalendarViewStyle1" TargetType="Input:CalendarView">
            <Setter Property="TabNavigation" Value="Once"/>
            <Setter Property="BorderBrush" Value="{StaticResource ApplicationForegroundThemeBrush}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Input:CalendarView">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid x:Name="PART_LayoutRoot">
 
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
 
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition />
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition />
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition />
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition />
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition />
                                </Grid.RowDefinitions>
 
                                <Rectangle Height="1" Fill="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="0" Grid.Row="1" Grid.ColumnSpan="13"/>
                                <Rectangle Height="1" Fill="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="0" Grid.Row="3" Grid.ColumnSpan="13"/>
                                <Rectangle Height="1" Fill="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="0" Grid.Row="5" Grid.ColumnSpan="13"/>
                                <Rectangle Height="1" Fill="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="0" Grid.Row="7" Grid.ColumnSpan="13"/>
                                <Rectangle Height="1" Fill="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="0" Grid.Row="9" Grid.ColumnSpan="13"/>
 
                                <Rectangle Width="1" Fill="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="0" Grid.Column="1" Grid.RowSpan="11"/>
                                <Rectangle Width="1" Fill="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="0" Grid.Column="3" Grid.RowSpan="11"/>
                                <Rectangle Width="1" Fill="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="0" Grid.Column="5" Grid.RowSpan="11"/>
                                <Rectangle Width="1" Fill="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="0" Grid.Column="7" Grid.RowSpan="11"/>
                                <Rectangle Width="1" Fill="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="0" Grid.Column="9" Grid.RowSpan="11"/>
                                <Rectangle Width="1" Fill="{StaticResource ApplicationForegroundThemeBrush}" StrokeThickness="0" Grid.Column="11" Grid.RowSpan="11"/>
 
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
        <Style x:Key="SfCalendarStyle1" TargetType="Input:SfCalendar">
            <Setter Property="TabNavigation" Value="Once"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="ManipulationMode" Value="TranslateY"/>
            <Setter Property="CellTemplate" Value="{StaticResource DefaultCellTemplate}"/>
            <Setter Property="PreviousScrollButtonTemplate" Value="{StaticResource DefaultPreviousScrollButtonTemplate}"/>
            <Setter Property="NextScrollButtonTemplate" Value="{StaticResource DefaultNextScrollButtonTemplate}"/>
            <Setter Property="BlackOutCellTemplate" Value="{StaticResource DefaultBlackOutTemplate}"/>
            <Setter Property="DisabledCellTemplate" Value="{StaticResource DisabledCellTemplate}"/>
            <Setter Property="HeaderTemplate" Value="{StaticResource DefaultHeaderTemplate}"/>
            <Setter Property="Width" Value="380"/>
            <Setter Property="Height" Value="260"/>
            <Setter Property="BorderBrush" Value="{StaticResource ApplicationForegroundThemeBrush}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Input:SfCalendar">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition />
                            </Grid.RowDefinitions>
 
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Button  Grid.Column="0" IsTabStop="False" HorizontalAlignment="Left" x:Name="PART_Previous" Template="{Binding PreviousScrollButtonTemplate, RelativeSource={RelativeSource Mode=TemplatedParent}}" Visibility="{Binding ShowNavigationButton, Converter={StaticResource BooleanVisibilityConverter}, RelativeSource={RelativeSource Mode=TemplatedParent}}" Margin="0,-5,0,0" BorderThickness="0"/>
                                <Button Grid.Column="2" IsTabStop="False" HorizontalAlignment="Right"  x:Name="PART_Next"  Template="{Binding NextScrollButtonTemplate, RelativeSource={RelativeSource Mode=TemplatedParent}}"  Visibility="{Binding ShowNavigationButton, Converter={StaticResource BooleanVisibilityConverter}, RelativeSource={RelativeSource Mode=TemplatedParent}}"  Margin="0,-5,0,0"  BorderThickness="0"/>
                                <Input:CalendarDayButton IsHitTestVisible="False" Margin="10,0,0,0" IsTabStop="False" Grid.Column="1" x:Name="Part_Month"
                                                                                                                                                ContentTemplate="{Binding HeaderTemplate, RelativeSource={RelativeSource Mode=TemplatedParent}}" Foreground="{StaticResource AccentBrush}"/>
                            </Grid>
 
                            <Grid x:Name="PART_WeekDays" Grid.Row="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
                            </Grid>
 
                            <Input:CalendarView x:Name="PART_CalendarView" Grid.Row="2" IsTabStop="False" 
                                                                                                                                BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Style="{StaticResource CalendarViewStyle1}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
    </Page.Resources>

 

For Editing Day name, Month name and Year’s font color:

You can set the Foreground color in SfCalendar control for editing Day name font color and for altering Month and year name, modify the ‘AccentBrush’ tag(code line numbered 185) value in the generated style.

Refer the following code sample and the screenshot for Day name, Month Name and Year modifications.

XAML

<Page.Resources>
       <SolidColorBrush x:Key="AccentBrush" Color="Red" />
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Input:SfCalendar Foreground="Green" Style="{StaticResource SfCalendarStyle1}"/>
 </Grid>

 

 

cid:image003.png@01CF644A.6A6894F0

For Modifying CalendarDayButton’s ForeGround and Background:

You can modify the calendar DayButton by changing the CellTemplate and modifying its Grid’s Background and TextBlock foreground.

XAML

<Page.Resources>
        <DataTemplate x:Key="DefaultCellTemplate">
            <Grid Background="AliceBlue">
                <TextBlock Text="{Binding Day}" Foreground="OrangeRed"
                                                                                VerticalAlignment="Bottom"
                                                                                Margin="3"/>
            </Grid>
        </DataTemplate>            
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
        <Input:SfCalendar  CellTemplate="{StaticResource DefaultCellTemplate}"/>
 
    </Grid>

 

The following screenshot shows the calendarDayButton customization

For Modifying BorderBrushes:

BorderBrush property in SfCalendar is used to set the outline Border for the Grid.

XAML

<Input:SfCalendar BorderBrush="Violet" />

 

To change the colors of inner gridlines, you can change the Fill property of Rectangles (Code lines numbered from 226 to 237) in CalendarView's control template from SfCalendar's complete style.

XAML

<Rectangle Height="1" Fill="Violet" StrokeThickness="0" Grid.Row="1" Grid.ColumnSpan="13"/>
<Rectangle Height="1" Fill="Violet" StrokeThickness="0" Grid.Row="3" Grid.ColumnSpan="13"/>
<Rectangle Height="1" Fill="Violet" StrokeThickness="0" Grid.Row="5" Grid.ColumnSpan="13"/>
<Rectangle Height="1" Fill="Violet" StrokeThickness="0" Grid.Row="7" Grid.ColumnSpan="13"/>
<Rectangle Height="1" Fill="Violet" StrokeThickness="0" Grid.Row="9" Grid.ColumnSpan="13"/>
<Rectangle Width="1" Fill="Violet" StrokeThickness="0" Grid.Column="1" Grid.RowSpan="11"/>
<Rectangle Width="1" Fill="Violet" StrokeThickness="0" Grid.Column="3" Grid.RowSpan="11"/>
<Rectangle Width="1" Fill="Violet" StrokeThickness="0" Grid.Column="5" Grid.RowSpan="11"/>
<Rectangle Width="1" Fill="Violet" StrokeThickness="0" Grid.Column="7" Grid.RowSpan="11"/>
<Rectangle Width="1" Fill="Violet" StrokeThickness="0" Grid.Column="9" Grid.RowSpan="11"/>
<Rectangle Width="1" Fill="Violet" StrokeThickness="0" Grid.Column="11" Grid.RowSpan="11"/>

Following screenshot displays the modified BorderBrushes

 

cid:image002.png@01CF644A.6A6894F0

 

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