Click here to Skip to main content
15,891,708 members
Articles / Desktop Programming / WPF

WPF: Calendar and Datepicker -Final

Rate me:
Please Sign up or sign in to vote.
4.90/5 (44 votes)
24 Jul 2010CPOL9 min read 268.6K   13.9K   104  
Animated and themed calendar and datepicker controls
<Window x:Class="vhDatePickerHarness.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vdp="clr-namespace:vhDatePicker;assembly=vhDatePicker"
        xmlns:vc="clr-namespace:vhCalendar;assembly=vhCalendar"
        Title="DatePicker Harness v1.5" 
        Height="663.056" Width="650.195" 
        WindowStartupLocation="CenterScreen">

    <Window.Resources>
        <LinearGradientBrush x:Key="WindowBackground" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0.00" Color="White"/>
            <GradientStop Offset="1.00" Color="#FAFAFA"/>
        </LinearGradientBrush>
        
        <LinearGradientBrush x:Key="StatusBarBackground" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#FAFAFA" Offset="0.1"/>
            <GradientStop Color="#DADADA" Offset="1"/>
        </LinearGradientBrush>
        
        <LinearGradientBrush x:Key="PanelBackgroundVertical" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="#FAFAFA" Offset="0.1"/>
            <GradientStop Color="#DADADA" Offset="1"/>

        </LinearGradientBrush>

        <LinearGradientBrush x:Key="PanelBackgroundHorizontal" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#FAFAFA" Offset="0.1"/>
            <GradientStop Color="#DADADA" Offset="1"/>
        </LinearGradientBrush>
    </Window.Resources>

    <Grid Background="{StaticResource WindowBackground}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="190"/>
            <RowDefinition Height="auto" MinHeight="26" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="184.341*" />
            <ColumnDefinition Width="443.854*" />
        </Grid.ColumnDefinitions>

        <Border Background="{StaticResource PanelBackgroundVertical}" 
                Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" 
                BorderBrush="Black" 
                BorderThickness="0.5" 
                CornerRadius="4,4,4,4" 
                Margin="4"
                SnapsToDevicePixels="True">
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Opacity="0.75" ShadowDepth="3" />
            </Border.BitmapEffect>
            <StackPanel Margin="8" 
                        VerticalAlignment="Stretch" 
                        Width="160" >
                <TextBlock Text="Calender Properties" HorizontalAlignment="Left" FontWeight="Bold" Margin="2" />
                <CheckBox Name="chkFooter"   
                          Margin="2" 
                          HorizontalAlignment="Left"
                          IsChecked="True"
                          Click="chkFooter_Clicked">Show Footer</CheckBox>
                <CheckBox Name="chkWeek"   
                          Margin="2" 
                          HorizontalAlignment="Left"
                          IsChecked="True" 
                          Click="chkWeek_Click">Show Week Bar</CheckBox>

                <CheckBox Name="chkShowDays"   
                          Margin="2" 
                          HorizontalAlignment="Left"
                          IsChecked="True">Show All Calendar Days</CheckBox>
                <CheckBox Name="chkIsAnimated"   
                          Margin="2" 
                          HorizontalAlignment="Left"
                          IsChecked="True">Use Animation</CheckBox>
                <TextBlock Height="19" Text="Selection Type" Width="100" HorizontalAlignment="Left" Margin="2,8,2,0" />
                <ComboBox Name="cbSelection" 
                          Height="21" Width="127" 
                          HorizontalAlignment="Left" SelectionChanged="cbSelection_SelectionChanged"/>
                <TextBlock Height="19" Text="Theme" Width="100" HorizontalAlignment="Left" Margin="2,8,2,0" />
                <ComboBox Name="cbTheme" 
                          Height="21" Width="127" 
                          HorizontalAlignment="Left"
                          SelectionChanged="cbTheme_SelectionChanged"/>
                <CheckBox Name="chkAllowDrag"   
                           Margin="2,8,2,2" 
                           HorizontalAlignment="Left"
                           IsChecked="True">Allow Drag operations</CheckBox>
                <CheckBox Name="chkAdornedDrag"   
                          Margin="2" 
                          HorizontalAlignment="Left"
                          IsChecked="True">Adorn Drag</CheckBox>

                <CheckBox Name="chkHighlightDate"  
                          Margin="2" 
                          HorizontalAlignment="Left"
                          IsChecked="True">Highlight Todays Date</CheckBox>
            </StackPanel>
        </Border>

        <Border Background="{StaticResource PanelBackgroundHorizontal}" 
                Grid.Row="1" Grid.Column="1" VerticalAlignment="Bottom"
                Height="160"
                BorderBrush="Black" 
                BorderThickness="0.5" 
                CornerRadius="4,4,4,4" 
                Margin="4"
                SnapsToDevicePixels="True">
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="Black" Opacity="0.75" ShadowDepth="3" />
            </Border.BitmapEffect>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                
                <StackPanel Orientation="Vertical" Grid.Column="0" Margin="12,4,4,4">
                    <TextBlock Height="19" Text="DatePicker Properties" Width="127" HorizontalAlignment="Left" Margin="2,8,2,0" FontWeight="Bold" />
                    <TextBlock Height="19" Text="Calendar Theme" Width="100" HorizontalAlignment="Left" Margin="2,8,2,0" />
                    <ComboBox Name="cbDateTheme" Grid.Column="0"
                                  Height="21" Width="127" 
                                  HorizontalAlignment="Left"
                                  SelectionChanged="cbDateTheme_SelectionChanged"/>
                    <TextBlock Height="19" Text="Button Style" Width="100" HorizontalAlignment="Left" Margin="2,8,2,0" />
                    <ComboBox Name="cbDateButton" Grid.Column="0"
                                Height="21" Width="127" 
                                  HorizontalAlignment="Left"
                                  SelectionChanged="cbDateButton_SelectionChanged"/>
                
                </StackPanel>
                <StackPanel Orientation="Vertical" Grid.Column="1" Margin="4">
                    <TextBlock Height="19" Text="Date Format" Width="100" HorizontalAlignment="Left" Margin="2,8,2,0" />
                    <ComboBox Name="cbDateFormat" 
                              Height="21" Width="127" 
                              HorizontalAlignment="Left"
                              SelectionChanged="cbDateFormat_SelectionChanged"/>
                    <CheckBox Name="chkDateWeek"   
                              Margin="2,8,2,2" 
                              HorizontalAlignment="Left"
                              IsChecked="False" Click="chkDateWeek_Click">Show Week Column</CheckBox>
                    <CheckBox Name="chkDateFooter"   
                              Margin="2" 
                              HorizontalAlignment="Left"
                              IsChecked="False" Click="chkDateFooter_Click">Show Footer</CheckBox>
                    <CheckBox Name="chkReadOnly"   
                              Margin="2" 
                              HorizontalAlignment="Left"
                              IsChecked="True">Read Only</CheckBox>

                </StackPanel>
                <StackPanel Orientation="Vertical" Grid.Column="2">
                    <TextBlock Height="19" Text="Calendar Position" Width="100" HorizontalAlignment="Left" Margin="2,8,2,0" />
                    <ComboBox Name="cbPlacement" 
                              Height="21" Width="127" 
                              HorizontalAlignment="Left"
                              SelectionChanged="cbPlacement_SelectionChanged"/>
                    <CheckBox Name="chkIsCheckable"   
                              Margin="2" 
                              HorizontalAlignment="Left"
                              IsChecked="True">Contains CheckBox</CheckBox>
                    <CheckBox Name="chkIsChecked"   
                              Margin="2" 
                              HorizontalAlignment="Left"
                              IsChecked="False">CheckBox state</CheckBox>
                </StackPanel>
            </Grid>
        </Border>

        <StackPanel Grid.Column="1" Margin="4" Orientation="Vertical">
            <vc:Calendar Name="Cld" 
                         HorizontalAlignment="Center"
                         Width="240" Height="220"
                         Margin="4"     
                         FontSize="12" FontFamily="Sans Serif"                          
                         SelectedDateChanged="Cld_SelectedDateChanged"  
                         SelectedDatesChanged="Cld_SelectedDatesChanged"
                         PropertyChanged="Cld_PropertyChanged"
                         ShowDaysOfAllMonths="{Binding ElementName=chkShowDays, Path=IsChecked}"
                         SelectionMode="Multiple" 
                         FooterVisibility="Visible" 
                         WeekColumnVisibility="Visible" 
                         HeaderHeight="22" 
                         IsTodayHighlighted="{Binding ElementName=chkHighlightDate, Path=IsChecked}"
                         IsAnimated="{Binding ElementName=chkIsAnimated, Path=IsChecked}"
                         AdornDrag="{Binding ElementName=chkAdornedDrag, Path=IsChecked}" 
                         AllowDrag="{Binding ElementName=chkAllowDrag, Path=IsChecked}" 
                         IsEnabled="True">
                <vc:Calendar.BlackoutDates>
                    <vc:DateRangeHelper Start="6/3/2010" End="6/6/2010"/>
                    <vc:DateRangeHelper Start="6/11/2010" End="6/12/2010"/>
                </vc:Calendar.BlackoutDates>
            </vc:Calendar>
            
            <TextBlock Height="19" Text="Drag and Drop" FontSize="10" Width="100" HorizontalAlignment="Center" Margin="30,8,2,-14" />
            
            <ListBox Name="lstCalendar" 
                     HorizontalAlignment="Center"
                     Margin="4,8,4,8" 
                     Height="100" Width="240"
                     AllowDrop="True" 
                     Drop="lstCalendar_Drop" DragEnter="lstCalendar_DragEnter" />

            <vdp:DatePicker Name="Dpk" 
                            Width="162"                            
                            Margin="4,8,0,0" 
                            HorizontalAlignment="Center" 
                            CalendarTheme="AeroNormal"
                            CalendarHeight="170" CalendarWidth="190" 
                            ButtonStyle="Brush"  
                            DateFormat="MMMMddddyyyy" 
                            IsCheckable="{Binding ElementName=chkIsCheckable, Path=IsChecked}" 
                            IsChecked="{Binding ElementName=chkIsChecked, Path=IsChecked}" 
                            IsReadOnly="{Binding ElementName=chkReadOnly, Path=IsChecked}" 
                            Height="24" Background="White">
            </vdp:DatePicker>
        </StackPanel>

        <StatusBar Name="stbEvents" Height="26"
                   Grid.Row="2" Grid.ColumnSpan="2"
                   Background="{StaticResource StatusBarBackground}"
                   BorderBrush="#333333" BorderThickness="0.5" 
                   SnapsToDevicePixels="True">
            <TextBlock Name="stbText" 
                       HorizontalAlignment="Left" 
                       Foreground="#333333" 
                       VerticalAlignment="Center" 
                       Margin="4,2" Text="DatePicker 1.3"/>
        </StatusBar>
    </Grid>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Network Administrator vtdev.com
Canada Canada
Network and programming specialist. Started in C, and have learned about 14 languages since then. Cisco programmer, and lately writing a lot of C# and WPF code, (learning Java too). If I can dream it up, I can probably put it to code. My software company, (VTDev), is on the verge of releasing a couple of very cool things.. keep you posted.

Comments and Discussions