Datepicker style problem

Topics: Developer Forum
Aug 13, 2009 at 2:23 PM
Edited Aug 13, 2009 at 2:28 PM

I wanted to create a datepicker with highlighted dates from my own collection and blackout dates from seperate collection.  Charle's Petzold wrote and msdn article (http://msdn.microsoft.com/en-us/magazine/dd882520.aspx) showing how to get the background color to be red for a collection of dates.  He did this by creating a custom style for calendarstyle and also used a converter.  So I copied his code and then added the blackout dates which i wanted also.  Even though Charle's template has a element named "blackout" in it, it doesn't seem to be working for me.  If I comment out the custom style then the blackout dates work fine (black x over the date).  Any ideas why this style is not working properly with blackout dates?

 

<Window
    x:Class="RedLetterDays.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wpftoolkit="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"
    xmlns:src="clr-namespace:RedLetterDays"
    Title="Red-Letter Days">
   
    <Window.Resources>
       
        <ResourceDictionary>

            <Style TargetType="wpftoolkit:Calendar"  x:Key="CalenderStyleNew">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="wpftoolkit:Calendar">
                            <StackPanel HorizontalAlignment="Center" x:Name="Root">
                                <wpftoolkit:Calendar
                                    x:Name="Calendar"
                                    SelectedDate="{TemplateBinding SelectedDate}"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}">
                                    <wpftoolkit:Calendar.CalendarDayButtonStyle>

                                        <Style TargetType="primitives:CalendarDayButton">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="primitives:CalendarDayButton">


                                                        <ControlTemplate.Resources>
                                                            <src:RedLetterDayConverter x:Key="conv" />
                                                        </ControlTemplate.Resources>

                                                        <Grid ToolTip="{Binding Converter={StaticResource conv}, Mode=OneWay}">


                                                            <vsm:VisualStateManager.VisualStateGroups>
                                                                <vsm:VisualStateGroup x:Name="CommonStates">
                                                                    <vsm:VisualStateGroup.Transitions>
                                                                        <vsm:VisualTransition GeneratedDuration="0:0:0.1" />
                                                                    </vsm:VisualStateGroup.Transitions>
                                                                    <vsm:VisualState x:Name="Normal" />
                                                                    <vsm:VisualState x:Name="MouseOver">
                                                                        <Storyboard>
                                                                            <DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                                                        </Storyboard>
                                                                    </vsm:VisualState>
                                                                    <vsm:VisualState x:Name="Pressed">
                                                                        <Storyboard>
                                                                            <DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
                                                                        </Storyboard>
                                                                    </vsm:VisualState>
                                                                    <vsm:VisualState x:Name="Disabled">
                                                                        <Storyboard>
                                                                            <DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                                                            <DoubleAnimation Storyboard.TargetName="NormalText" Storyboard.TargetProperty="Opacity" To=".35" Duration="0" />
                                                                        </Storyboard>
                                                                    </vsm:VisualState>
                                                                </vsm:VisualStateGroup>
                                                                <vsm:VisualStateGroup x:Name="SelectionStates">
                                                                    <vsm:VisualStateGroup.Transitions>
                                                                        <vsm:VisualTransition GeneratedDuration="0" />
                                                                    </vsm:VisualStateGroup.Transitions>
                                                                    <vsm:VisualState x:Name="Unselected" />
                                                                    <vsm:VisualState x:Name="Selected">
                                                                        <Storyboard>
                                                                            <DoubleAnimation Storyboard.TargetName="SelectedBackground" Storyboard.TargetProperty="Opacity" To=".75" Duration="0" />
                                                                        </Storyboard>
                                                                    </vsm:VisualState>
                                                                </vsm:VisualStateGroup>
                                                                <vsm:VisualStateGroup x:Name="CalendarButtonFocusStates">
                                                                    <vsm:VisualStateGroup.Transitions>
                                                                        <vsm:VisualTransition GeneratedDuration="0" />
                                                                    </vsm:VisualStateGroup.Transitions>
                                                                    <vsm:VisualState x:Name="CalendarButtonFocused">
                                                                        <Storyboard>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DayButtonFocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
                                                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                                                    <DiscreteObjectKeyFrame.Value>
                                                                                        <Visibility>Visible</Visibility>
                                                                                    </DiscreteObjectKeyFrame.Value>
                                                                                </DiscreteObjectKeyFrame>
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                        </Storyboard>
                                                                    </vsm:VisualState>
                                                                    <vsm:VisualState x:Name="CalendarButtonUnfocused">
                                                                        <Storyboard>
                                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DayButtonFocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
                                                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                                                    <DiscreteObjectKeyFrame.Value>
                                                                                        <Visibility>Collapsed</Visibility>
                                                                                    </DiscreteObjectKeyFrame.Value>
                                                                                </DiscreteObjectKeyFrame>
                                                                            </ObjectAnimationUsingKeyFrames>
                                                                        </Storyboard>
                                                                    </vsm:VisualState>
                                                                </vsm:VisualStateGroup>
                                                                <vsm:VisualStateGroup x:Name="ActiveStates">
                                                                    <vsm:VisualStateGroup.Transitions>
                                                                        <vsm:VisualTransition GeneratedDuration="0" />
                                                                    </vsm:VisualStateGroup.Transitions>
                                                                    <vsm:VisualState x:Name="Active" />
                                                                    <vsm:VisualState x:Name="Inactive">
                                                                        <Storyboard>
                                                                            <ColorAnimation Duration="0" Storyboard.TargetName="selectedText" Storyboard.TargetProperty="Color" To="#FF777777"></ColorAnimation>
                                                                        </Storyboard>
                                                                    </vsm:VisualState>
                                                                </vsm:VisualStateGroup>
                                                                <vsm:VisualStateGroup x:Name="DayStates">
                                                                    <vsm:VisualStateGroup.Transitions>
                                                                        <vsm:VisualTransition GeneratedDuration="0" />
                                                                    </vsm:VisualStateGroup.Transitions>
                                                                    <vsm:VisualState x:Name="RegularDay" />
                                                                    <vsm:VisualState x:Name="Today">
                                                                        <Storyboard>
                                                                            <DoubleAnimation Storyboard.TargetName="TodayBackground" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                                                            <ColorAnimation Duration="0" Storyboard.TargetName="selectedText" Storyboard.TargetProperty="Color" To="#FFFFFFFF"></ColorAnimation>
                                                                        </Storyboard>
                                                                    </vsm:VisualState>
                                                                </vsm:VisualStateGroup>
                                                                <vsm:VisualStateGroup x:Name="BlackoutDayStates">
                                                                    <vsm:VisualStateGroup.Transitions>
                                                                        <vsm:VisualTransition GeneratedDuration="0" />
                                                                    </vsm:VisualStateGroup.Transitions>
                                                                    <vsm:VisualState x:Name="NormalDay" />
                                                                    <vsm:VisualState x:Name="BlackoutDay">
                                                                        <Storyboard>
                                                                            <DoubleAnimation Duration="0" Storyboard.TargetName="Blackout" Storyboard.TargetProperty="Opacity" To=".2"/>
                                                                        </Storyboard>
                                                                    </vsm:VisualState>
                                                                </vsm:VisualStateGroup>
                                                            </vsm:VisualStateManager.VisualStateGroups>

                                                            <Rectangle x:Name="TodayBackground" RadiusX="1" RadiusY="1" Opacity="0" Fill="#FFAAAAAA"/>


                                                            <Rectangle x:Name="RedLetterDayBackground" IsHitTestVisible="False" Fill="#80FF0000" />

                                                            <Rectangle x:Name="SelectedBackground" RadiusX="1" RadiusY="1" Opacity="0" Fill="{TemplateBinding Background}"/>
                                                            <Rectangle x:Name="Background" RadiusX="1" RadiusY="1" Opacity="0" Fill="{TemplateBinding Background}"/>
                                                            <ContentPresenter
                                                                x:Name="NormalText"
                                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                                Margin="5,1,5,1">
                                                                <TextElement.Foreground>
                                                                    <SolidColorBrush x:Name="selectedText" Color="#FF333333"/>
                                                                </TextElement.Foreground>
                                                            </ContentPresenter>
                                                            <Path x:Name="Blackout" Opacity="0" Margin="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" Fill="#FF000000" Stretch="Fill" Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z"/>
                                                            <Rectangle x:Name="DayButtonFocusVisual" Visibility="Collapsed" IsHitTestVisible="false" RadiusX="1" RadiusY="1" Stroke="#FF45D6FA"/>
                                                        </Grid>
                                                        <ControlTemplate.Triggers>
                                                            <Trigger Property="IsFocused" Value="True">
                                                                <Setter TargetName="DayButtonFocusVisual" Property="Visibility" Value="Visible" />
                                                            </Trigger>


                                                            <DataTrigger Binding="{Binding Converter={StaticResource conv}}" Value="{x:Null}">
                                                                <Setter TargetName="RedLetterDayBackground" Property="Visibility" Value="Hidden" />
                                                            </DataTrigger>

                                                        </ControlTemplate.Triggers>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>

                                    </wpftoolkit:Calendar.CalendarDayButtonStyle>
                                </wpftoolkit:Calendar>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

        </ResourceDictionary>
       
    </Window.Resources>
   
    <wpftoolkit:DatePicker
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        CalendarStyle="{DynamicResource CalenderStyleNew}">

        <wpftoolkit:DatePicker.BlackoutDates>
            <wpftoolkit:CalendarDateRange Start="8/10/2009" End="8/12/2009"/>
        </wpftoolkit:DatePicker.BlackoutDates>
       
    </wpftoolkit:DatePicker>
</Window>