Why Can’t find Calendar Date Picker in Visual Studio for UWP?

uwp
xaml

(SAM) #1

I can’t find the CalendarDatePicker control on my Visual Studio 2015 toolbox for a Universal Windows Platform Project (UWP), I also tried adding <CalendarDatePicker /> using XAML but it says Reference not found, I believe I’m missing some reference or something, can anyone help?


(samantha jameson) #2

That’s a common mistake, you should know that DatePicker exists under WinRT (Windows Runtime), while CalendarDatePicker exists under UWP (Universal Windows Apps).

WinRT and UWP are two distinct things:

WinRT exists under Windows 8.1, while UWP is the new evolved version of UWP within Windows 10+.

Hope that explains the route of your problem.


(this.is.sparta) #3

Use <DatePicker />
Here is a sample style/template I found on the internet:

<!-- Default style for Windows.UI.Xaml.Controls.DatePicker -->
<Style TargetType="DatePicker">
  <Setter Property="Orientation" Value="Horizontal"/>
  <Setter Property="IsTabStop" Value="False"/>
  <Setter Property="MinWidth" Value="296"/>
  <Setter Property="MaxWidth" Value="456"/>
  <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
  <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
  <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
  <Setter Property="HorizontalAlignment" Value="Left"/>
  <Setter Property="VerticalAlignment" Value="Center"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="DatePicker">
        <StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
          <StackPanel.Resources>
            <Style x:Key="DatePickerFlyoutButtonStyle" TargetType="Button">
              <Setter Property="UseSystemFocusVisuals" Value="False" />
              <Setter Property="Template">
                <Setter.Value>
                  <ControlTemplate TargetType="Button">
                    <Grid Background="{TemplateBinding Background}">
                      <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                          <VisualState x:Name="Normal" />
                          <VisualState x:Name="PointerOver">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                 Storyboard.TargetProperty="BorderBrush">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                 Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageBackgroundAltMediumBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                 Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </VisualState>
                          <VisualState x:Name="Pressed">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                 Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                 Storyboard.TargetProperty="BorderBrush">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                 Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </VisualState>
                          <VisualState x:Name="Disabled">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                 Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                 Storyboard.TargetProperty="BorderBrush">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                 Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                          <VisualState x:Name="Focused">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                 Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                 Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </VisualState>
                          <VisualState x:Name="Unfocused" />
                          <VisualState x:Name="PointerFocused" />
                        </VisualStateGroup>
                      </VisualStateManager.VisualStateGroups>
                      <ContentPresenter x:Name="ContentPresenter"
                                        BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                                        Background="{ThemeResource SystemControlBackgroundAltMediumLowBrush}"
                                        BorderThickness="2"
                                        Content="{TemplateBinding Content}"
                                        Foreground="{TemplateBinding Foreground}"
                                        HorizontalContentAlignment="Stretch"
                                        VerticalContentAlignment="Stretch"
                                        AutomationProperties.AccessibilityView="Raw"/>
                    </Grid>
                  </ControlTemplate>
                </Setter.Value>
              </Setter>
            </Style>
          </StackPanel.Resources>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter"
                                                 Storyboard.TargetProperty="Foreground">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FirstPickerSpacing"
                                                 Storyboard.TargetProperty="Fill">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondPickerSpacing"
                                                 Storyboard.TargetProperty="Fill">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <ContentPresenter x:Name="HeaderContentPresenter"
                            x:DeferLoadStrategy="Lazy"
                            Visibility="Collapsed"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                            Margin="0,0,0,8"
                            Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                            AutomationProperties.AccessibilityView="Raw" />
          <Button x:Name="FlyoutButton"
                  Style="{StaticResource DatePickerFlyoutButtonStyle}"
                  Foreground="{TemplateBinding Foreground}"
                  Background="{TemplateBinding Background}"
                  IsEnabled="{TemplateBinding IsEnabled}"
                  HorizontalAlignment="Stretch"
                  HorizontalContentAlignment="Stretch">
            <Grid x:Name="FlyoutButtonContentGrid" >
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="78*" x:Name="DayColumn" />
                <ColumnDefinition Width="Auto" x:Name="FirstSpacerColumn" />
                <ColumnDefinition Width="132*" x:Name="MonthColumn" />
                <ColumnDefinition Width="Auto" x:Name="SecondSpacerColumn" />
                <ColumnDefinition Width="78*" x:Name="YearColumn" />
              </Grid.ColumnDefinitions>

              <TextBlock x:Name="DayTextBlock" Text="Day" TextAlignment="Center" Padding="0,3,0,5" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" AutomationProperties.AccessibilityView="Raw"/>
              <TextBlock x:Name="MonthTextBlock" Text="Month" TextAlignment="Left" Padding="10,3,0,5" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" AutomationProperties.AccessibilityView="Raw"/>
              <TextBlock x:Name="YearTextBlock" Text="Year" TextAlignment="Center" Padding="0,3,0,5" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" AutomationProperties.AccessibilityView="Raw"/>

              <Rectangle x:Name="FirstPickerSpacing" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="1" />
              <Rectangle x:Name="SecondPickerSpacing" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="3" />

            </Grid>
          </Button>
        </StackPanel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>