Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Just go through <a href="http://msdn.microsoft.com/en-us/magazine/dd882520.aspx" rel="nofollow">http://msdn.microsoft.com/en-us/magazine/dd882520.aspx</a>. Its not straight forward to change the background color of wpf's default datepicker but you can follow below steps</p> <p>1) Date picker has a CalenderStye Property so override Calender Default ControlTemplate</p> <p>2) In Calender control template, there is CalenderItemStyle where you can override CalenderItemStyle defaulttemplate. In this you can customize the background colors as well as header buttons.</p> <pre><code>&lt;Style x:Key="ItemStyle" TargetType="primitives:CalendarItem"&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="primitives:CalendarItem"&gt; &lt;ControlTemplate.Resources&gt; &lt;DataTemplate x:Key="DayTitleTemplate"&gt; &lt;TextBlock Text="{Binding}" HorizontalAlignment="Center" /&gt; &lt;/DataTemplate&gt; &lt;/ControlTemplate.Resources&gt; &lt;DockPanel Name="PART_Root" LastChildFill="True"&gt; &lt;Button x:Name="PART_PreviousButton" DockPanel.Dock="Left" Content="&amp;lt;" Focusable="False" /&gt; &lt;Button x:Name="PART_NextButton" DockPanel.Dock="Right" Content="&amp;gt;" Focusable="False" /&gt; &lt;Button x:Name="PART_HeaderButton" DockPanel.Dock="Top" FontWeight="Bold" Focusable="False" /&gt; &lt;Grid&gt; &lt;Grid x:Name="PART_MonthView" Visibility="Visible"&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;/Grid.RowDefinitions&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;/Grid&gt; &lt;Grid x:Name="PART_YearView" Visibility="Hidden"&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;RowDefinition Height="Auto"/&gt; &lt;/Grid.RowDefinitions&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;ColumnDefinition Width="Auto"/&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;/Grid&gt; &lt;/Grid&gt; &lt;Rectangle x:Name="PART_DisabledVisual" Opacity="0" Visibility="Collapsed" Fill="#A5FFFFFF"/&gt; &lt;/DockPanel&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="IsEnabled" Value="False"&gt; &lt;Setter TargetName="PART_DisabledVisual" Property="Visibility" Value="Visible" /&gt; &lt;/Trigger&gt; &lt;DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type toolkit:Calendar}}, Path=DisplayMode}" Value="Year"&gt; &lt;Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" /&gt; &lt;Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" /&gt; &lt;/DataTrigger&gt; &lt;DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type toolkit:Calendar}}, Path=DisplayMode}" Value="Decade"&gt; &lt;Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" /&gt; &lt;Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" /&gt; &lt;/DataTrigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;Style x:Key="pp" TargetType="toolkit:Calendar"&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="toolkit:Calendar"&gt; &lt;StackPanel Name="PART_Root" Orientation="Horizontal"&gt; &lt;primitives:CalendarItem Name="PART_CalendarItem" Style="{StaticResource ItemStyle}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" VerticalAlignment="Center" /&gt; &lt;Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="4 4 0 4"&gt; &lt;ScrollViewer VerticalScrollBarVisibility="Auto" Height="{Binding ElementName=PART_CalendarItem, Path=ActualHeight}" Width="100"&gt; &lt;ItemsControl ItemsSource= "{Binding RelativeSource={RelativeSource AncestorType=toolkit:Calendar}, Path=SelectedDates}" /&gt; &lt;/ScrollViewer&gt; &lt;/Border&gt; &lt;/StackPanel&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;/Grid.Resources&gt; &lt;toolkit:DatePicker CalendarStyle="{StaticResource pp}" Margin="0,0,0,242"&gt;&lt;/toolkit:DatePicker&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload