Uwp CalendarDatePicker 日期控件【透明樣式】

效果截圖：

頁面Page：

<CalendarDatePicker  Style="{StaticResource CalendarDatePickerStyle1}"/>

資源字典CalendarDatePickerStyle1：

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="CalendarDatePickerStyle1" TargetType="CalendarDatePicker">

        <Setter Property="Foreground" Value="{ThemeResource CalendarDatePickerForeground}"/>

        <Setter Property="Background" Value="{ThemeResource CalendarDatePickerBackground}"/>

        <Setter Property="BorderBrush" Value="{ThemeResource CalendarDatePickerBorderBrush}"/>

        <Setter Property="BorderThickness" Value="{ThemeResource CalendarDatePickerBorderThemeThickness}"/>

        <Setter Property="HorizontalAlignment" Value="Left"/>

        <Setter Property="VerticalAlignment" Value="Center"/>

        <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="CalendarDatePicker">

                    <Grid x:Name="Root">

                        <FlyoutBase.AttachedFlyout>

                            <Flyout Placement="Bottom">

                                <Flyout.FlyoutPresenterStyle>

                                    <Style TargetType="FlyoutPresenter">

                                        <Setter Property="Padding" Value="0"/>

                                        <Setter Property="BorderThickness" Value="0"/>

                                        <Setter Property="Template">

                                            <Setter.Value>

                                                <ControlTemplate TargetType="FlyoutPresenter">

                                                    <ContentPresenter BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                                                        <ContentPresenter.Background>

                                                            <SolidColorBrush Opacity="0.2" Color="Black"></SolidColorBrush>

                                                        </ContentPresenter.Background>

                                                    </ContentPresenter>

                                                </ControlTemplate>

                                            </Setter.Value>

                                        </Setter>

                                    </Style>

                                </Flyout.FlyoutPresenterStyle>

                                <CalendarView Foreground="#2775B6"  BlackoutForeground="#2775B6" CalendarItemForeground="#2775B6" PressedBorderBrush="#2177B8"

                                              x:Name="CalendarView"  CalendarIdentifier="{TemplateBinding CalendarIdentifier}" DisplayMode="{TemplateBinding DisplayMode}" DayOfWeekFormat="{TemplateBinding DayOfWeekFormat}" FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}" IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}" IsOutOfScopeEnabled="{TemplateBinding IsOutOfScopeEnabled}" IsGroupLabelVisible="{TemplateBinding IsGroupLabelVisible}" MinDate="{TemplateBinding MinDate}" MaxDate="{TemplateBinding MaxDate}" Style="{TemplateBinding CalendarViewStyle}">

                                    <CalendarView.Background>

                                        <SolidColorBrush Opacity="0.2" Color="Black"></SolidColorBrush>

                                    </CalendarView.Background>

                                    <CalendarView.BorderBrush>

                                        <SolidColorBrush Opacity="0.2" Color="Black"></SolidColorBrush>

                                    </CalendarView.BorderBrush>

                                    <CalendarView.TodayForeground>

                                        <AcrylicBrush  TintColor="#D8E3E7"/>

                                    </CalendarView.TodayForeground>

                                    <CalendarView.OutOfScopeBackground>

                                        <SolidColorBrush Opacity="0.4" Color="#144A74"></SolidColorBrush>

                                    </CalendarView.OutOfScopeBackground>

                                    <CalendarView.OutOfScopeForeground>

                                        <SolidColorBrush Color="#93B5CF"></SolidColorBrush>

                                    </CalendarView.OutOfScopeForeground>

                                </CalendarView>

                            </Flyout>

                        </FlyoutBase.AttachedFlyout>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="*"/>

                            <ColumnDefinition Width="32"/>

                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto"/>

                            <RowDefinition Height="32"/>

                        </Grid.RowDefinitions>

                        <VisualStateManager.VisualStateGroups>

                            <VisualStateGroup x:Name="CommonStates">

                                <VisualState x:Name="Normal"/>

                                <VisualState x:Name="PointerOver">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#1661AB"/>

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="black"/>

                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>

                                </VisualState>

                                <VisualState x:Name="Pressed">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="black"/>

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#1661AB"/>

                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>

                                </VisualState>

                                <VisualState x:Name="Disabled">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="black"/>

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#1661AB"/>

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerHeaderForegroundDisabled}"/>

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DateText" Storyboard.TargetProperty="Foreground">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#4E7CA1"/>

                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CalendarGlyph" Storyboard.TargetProperty="Foreground">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerCalendarGlyphForegroundDisabled}"/>

                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>

                                </VisualState>

                            </VisualStateGroup>

                            <VisualStateGroup x:Name="FocusStates">

                                <VisualState x:Name="Unfocused"/>

                                <VisualState x:Name="PointerFocused"/>

                                <VisualState x:Name="Focused">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="black"/>

                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>

                                </VisualState>

                            </VisualStateGroup>

                            <VisualStateGroup x:Name="SelectionStates">

                                <VisualState x:Name="Unselected"/>

                                <VisualState x:Name="Selected">

                                    <Storyboard>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DateText" Storyboard.TargetProperty="Foreground">

                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#4E7CA1"/>

                                        </ObjectAnimationUsingKeyFrames>

                                    </Storyboard>

                                </VisualState>

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>

                        <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Margin="{ThemeResource ComboBoxHeaderThemeMargin}" TextWrapping="Wrap" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>

                        <Border x:Name="Background"  BorderThickness="1" BorderBrush="#1661AB" Grid.ColumnSpan="2" Control.IsTemplateFocusTarget="True" Grid.Row="1">

                            <Border.Background>

                                <SolidColorBrush Color="Black" Opacity="0.4"></SolidColorBrush>

                            </Border.Background>

                        </Border>

                        <TextBlock x:Name="DateText" Foreground="#66A9C9" FontSize="15" HorizontalAlignment="Left" Padding="12, 0, 0, 2" Grid.Row="1" Text="{TemplateBinding PlaceholderText}" VerticalAlignment="Center"/>

                        <FontIcon x:Name="CalendarGlyph" Grid.Column="1" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="#1661AB" FontSize="16" Glyph="&#xE787;" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Center"/>

                    </Grid>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</ResourceDictionary>