ExpressionDark Calender theme available

Dec 10, 2009 at 3:58 PM
Edited Dec 10, 2009 at 4:15 PM

Here is the calender styles for expression dark, this took me a full day to do!!!, so microsoft cop on and update the themes.As much as microsoft would like us to think that you can simply cut and paste silverlight code into wpf and vice versa, its just not true yet.

These styles were achieved by taking the corresponding silverlight styles and replacing sections of xaml to match the syntax of the generic.xaml here and there. You should find  the generic.xaml in the Toolkit-release\Calendar\Themes in your extracted download of the WPFToolkit.

I also found some help from this website  http://msdn.microsoft.com/en-us/magazine/dd882520.aspx and the related code available here http://code.msdn.microsoft.com/mag200906Foundations/Release/ProjectReleases.aspx?ReleaseId=2614.

The last thing that was required, after plugging in the sections from generic.xaml, and this was one of the most important steps, you need to tell the calender style to use the defined styles of all the other calender elements. First you need to set a x:Key property on the other styles so you can reference them and then in the calendar style you will see

<Setter Property="CalendarDayButtonStyle" Value= "{DynamicResource CalDay}"/>
 <Setter Property="CalendarButtonStyle" Value= "{DynamicResource CalBut}"/>

and

<primitives:CalendarItem
Name="PART_CalendarItem"
Style = "{DynamicResource CalItem}"....

Without these lines, the CalendarItem, CalendarDayButton and CalendarButton styles are just a waste of space and will not take effect. These changes were strangely missing from the generic.xaml and the silverlight theme.

You must have these namespaces declared. If you compare the silverlight expressiondark theme to the code below you will see I simple changed the namespace for the calendar elements. This was the simplest part, and I'm sure many of you have got this far already.

xmlns:vsm="clr-namespace:System.Windows;assembly=WPFToolkit"
xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit"
xmlns:primitives="clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit"

I have uploaded my full expressiondark theme here http://rapidshare.com/files/318980080/ExpressionDark2.xaml as even just including the calender related snippets here exceeds the message lenght restriction. I have made other changes to the theme which you may not want,  so copy just the calendar bits from the xaml file which are at the bottom into your expressiondark.xaml.

Just a extra note: Because the expressiondark and expressionlight are essentially the same code with different colors behind the resources, you can drop these new styles as is into the expressionlight also.

Dec 11, 2009 at 10:15 AM
Edited Dec 11, 2009 at 10:58 AM

After changing a few more of the themes over this is a summary of the changes required

 

Add namespaces


Change namspaces


Add x:Key properties to CalendarButton, CalendarDayButton and CalendarItem (Do not add x:Key to Calendar, and remove x:Key property on Calendar if it exists)


Fix Style references on calendar to point at x:Keys


Add x:Key to 'DayTitleTemplate'


Prefix x:Names with PART_ for appropiate items  in CalenderItem and Calender

----In Calendar----

Root

CalendarItem

---In CalendarItem----

Root

PreviousButton

HeaderButton

NextButton

MonthView

YearView

DisableVisual (x2)

Make sure all PARTs are visible except for PART_YearView


Copy in Triggers for CalendarItem from generic.xaml

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="PART_DisabledVisual" Property="Visibility" Value="Visible" />
                        </Trigger>
                        <DataTrigger Value="Year">
                            <DataTrigger.Binding>
                                <Binding Path="DisplayMode">
                                    <Binding.RelativeSource>
                                        <RelativeSource Mode="FindAncestor" AncestorType="{x:Type controls:Calendar}" />
                                    </Binding.RelativeSource>
                                </Binding>
                            </DataTrigger.Binding>
                            <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                            <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                        <DataTrigger Value="Decade">
                            <DataTrigger.Binding>
                                <Binding Path="DisplayMode">
                                    <Binding.RelativeSource>
                                        <RelativeSource Mode="FindAncestor" AncestorType="{x:Type controls:Calendar}" />
                                    </Binding.RelativeSource>
                                </Binding>
                            </DataTrigger.Binding>
                            <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                            <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </ControlTemplate.Triggers>

Move DayTitleTemplate to <ControlTemplate.Resources>

Change all occurances of   <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

to

<DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
                     <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>

Change all occurances of   <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />

to

<DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
                     <Visibility>Collapsed</Visibility>
                </DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>

Change PART_DisabledVisual resources from static to dynamic

Dec 11, 2009 at 1:00 PM

I have uploaded my modified themes. They are available here http://rapidshare.com/files/319383328/Skins.rar.

This pack includes support for calender in ExpressionDark, ExpressionLight, TwilightBlue, BubbleCreme and the UXMusings skins. As before I have made other mods to the skins so you may just want to copy the calendar styles only, from these files.

Dec 26, 2011 at 7:25 PM

Hi Nobster, It was nice to read about your achievements but the product is no longer available (dead link). Could you share your calendar again?

Dec 27, 2011 at 12:37 PM

Try

http://www.mediafire.com/?zzzdnoonjqy

As I said before there are other mods and bits to these theme files so they may not even compile in their entirety on your system but you should be strip out the calendar styles.

Dec 27, 2011 at 12:49 PM

Thanks!

Feb 8, 2012 at 11:20 AM

Hey

I'm new to WPF and I was wondering why provided ExpressionBlend Dark style is not really that style :)

I was "googling" and I have found a project with unknown source (dunno who made it) with a theme similiar to Expression Blend 4 years ago! But the problem is, because this theme is not complete...

Here is the link:
ExpressionDark_Theme_Clone - http://qnapclub.home.pl/temp/ExpressionDark_Theme_Clone.zip

Can someone help to clean it up?

Thanks and Best regards

Jul 7, 2012 at 3:51 PM

Hi, 

Where i can find the lastest Expression dark theme, i tried the themes provided by Nobster, but no succes.?

Thanks and best regards.

Jul 7, 2012 at 5:10 PM

I don't know if there is any official "latest" theme. However I know where is one theme that works. I took code from Nobster, adjusted it a bit and published for everyone both at GitHub to collaborate and at Nuget to make it easy to install. You can find it at:

GitHub:

https://github.com/StanislawSwierc/WpfThemesCollection

https://github.com/StanislawSwierc/WpfThemesCollection/commit/f695ed967cc61eba38d890493c036f81cd7ea818

 

Nuget:

https://nuget.org/packages/Wpf.Themes.ExpressionDark

Jul 15, 2012 at 1:17 PM

Thanks Stanislav,

I need to style DatePicker control, but there is styled only Calendar control, how can I apply that calendar style to datepicker to?