DatePicker/Calendar header too dark out of the box

Apr 23, 2010 at 4:50 PM

I just installed the Feb 2010 WPF toolkit, and created a fresh WPF app to test it out.  Right out of the box, the header area of both the DatePicker and the Calendar are Dark Blue, the month/year is illegible because of this, as well as the forward/backward buttons being hard to see.

See a pic here: http://twitpic.com/1hs5of.

I just installed it and dragged the controls to a new form without doing anything else.  What could be the problem?

Thanks in advance!

Apr 26, 2010 at 3:32 PM

To give more info, I'm running .Net 3.5 SP1 on Windows XP.  On my PC at home, I'm running Windows 7 and the controls look how they are supposed to.  I've tried uninstalling the toolkit and reinstalling to no avail.  What could possibly cause this strange anomaly?

 

Apr 28, 2010 at 6:54 PM

Nevermind, I finally figured it out on my own.  Here were the key changes:

1) Grab the Generic.xaml from the Calendar/themes in the toolkit source and add it to a ResourceDictionary in your project.

2) Set the namespaces to use the WpfToolkit assembly for primitives and vsm.

3) Modify the LinearGradientBrush at the top to use specific colors instead of system colors.

4) Assign an x:Key to the first style and then assign it to the CalendarStyle of the datepicker control.

 

 

<!--=================================================================
Copyright (C) Microsoft Corporation.  All rights reserved.
==================================================================-->

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:tk="clr-namespace:Microsoft.Windows.Controls;assembly=WpfToolkit"
    xmlns:primitives="clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WpfToolkit"
    xmlns:vsm="clr-namespace:System.Windows;assembly=WpfToolkit">

    
    <LinearGradientBrush x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type tk:Calendar}, ResourceId=CalendarBackgroundBrush}"
    	x:Shared="false" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="AliceBlue" Offset="0"/>
        <GradientStop Color="LightSteelBlue" Offset="0.16"/>
        <GradientStop Color="White" Offset="0.16"/>
        <GradientStop Color="White" Offset="1"/>
    </LinearGradientBrush>

    <!--Calendar-->
    <Style x:Key="MyCalendarStyle" TargetType="tk:Calendar">

... (rest omitted)

 

May 18, 2010 at 4:33 PM

Thanks, saved me several hours frustration

Aug 27, 2010 at 8:30 PM

Tks... It is very usefull!

I was searching at hours!

 

Jun 21, 2011 at 6:04 AM

Hi,

I've having troubles getting this fix to work. I have version v3.5.50211.1 installed. 

 

My code is different to yours, as seen here;

 

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:tk="http://schemas.microsoft.com/wpf/2008/toolkit"
    xmlns:primitives="http://schemas.microsoft.com/wpf/2008/toolkit"
    xmlns:vsm="clr-namespace:System.Windows;assembly=WpfToolkit">


    <LinearGradientBrush x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type tk:Calendar}, ResourceId=CalendarBackgroundBrush}"
    	x:Shared="false" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="AliceBlue" Offset="0"/>
        <GradientStop Color="LightSteelBlue" Offset="0.16"/>
        <GradientStop Color="White" Offset="0.16"/>
        <GradientStop Color="White" Offset="1"/>
    </LinearGradientBrush>

    <!--Calendar-->
    <Style x:Key="MyCalendarStyle" TargetType="tk:Calendar">

 

 

The big difference being;

    xmlns:tk="http://schemas.microsoft.com/wpf/2008/toolkit" <---- this is different
    xmlns:primitives="http://schemas.microsoft.com/wpf/2008/toolkit" <---- this is different
xmlns:vsm="clr-namespace:System.Windows;assembly=WpfToolkit"> <----- I can't change this,

The window hosting the calendar looks like this;
<Window
    xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
and
    <toolkit:Calendar Name="myCal" Style="MyCalendarStyle" />

 

Anyone able to clear my confusion?! thanks

Jun 21, 2011 at 6:14 AM

this fixed my problem;

                            <toolkit:Calendar Name="dateStart" IsTodayHighlighted="False" Style="{StaticResource MyCalendarStyle}" />

Jul 27, 2011 at 2:38 AM

I am having problems implementing the part of the Resource Dictionary. I did not implement anything in each datepicker control. It works when I run the solution. But when I open any control in Design View, I get the error of 

Error 194 '{DependencyProperty.UnsetValue}' is not a valid value for the 'System.Windows.Controls.Panel.Background' property on a Setter.

 

This is what I implemented. Only in the resource dictionary.

 

    <LinearGradientBrush x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type wpfToolkit:Calendar}, ResourceId=CalendarBackgroundBrush}"
    	x:Shared="false" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientStop Color="AliceBlue" Offset="0"/>
        <GradientStop Color="LightSteelBlue" Offset="0.16"/>
        <GradientStop Color="White" Offset="0.16"/>
        <GradientStop Color="White" Offset="1"/>
    </LinearGradientBrush>
    
    <!--Calendar-->
    <Style x:Key="MyCalendarStyle" TargetType="wpfToolkit:Calendar">
        <Setter Property="Background" Value="{StaticResource CalendarBackgroundBrush}" />
    </Style>

 


Jan 26, 2013 at 12:39 AM

I'm very new to programming WPF apps, Not to sound too dumb but I couldn't really follow. So I did this to make it work.

In my MainWindow.xaml a the top I added that blue line.

<Window x:Class="SPContentCreator.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
        Title="SPContentCreator" Height="471" Width="633" Loaded="Window_Loaded" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" >

 

And where I added the DatePicker

                    <my:DatePicker HorizontalAlignment="Left" Margin="474,84,0,0" Name="startDatePicker" VerticalAlignment="Top" IsEnabled="True" Width="97">
                        <my:DatePicker.CalendarStyle>
                            <Style TargetType="toolkit:Calendar">
                                <Setter Property="Background" Value="White"></Setter>
                            </Style>
                        </my:DatePicker.CalendarStyle>
                    </my:DatePicker>