Question

我尝试更改日历图标的大小，但是找不到实现此目的的属性。

Answer 1

如何增加CalendarDatePicker的日历图标大小并使用不同的文本或图像图标[UWP]对其进行自定义？

您可以编辑默认的CalendarDatePicker样式并更改CalendarGlyph FontIcon的FontSize和Glyph属性，如下所示。

<Style 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">

                            <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="{ThemeResource CalendarDatePickerBorderBrushPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBackgroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="Pressed">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBackgroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBorderBrushPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBackgroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerBorderBrushDisabled}" />
                                            </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="{ThemeResource CalendarDatePickerTextForegroundDisabled}" />
                                            </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="{ThemeResource CalendarDatePickerBackgroundFocused}" />
                                            </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="{ThemeResource CalendarDatePickerTextForegroundSelected}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                </VisualStateGroup>
                                <VisualStateGroup x:Name="HeaderStates">
                                    <VisualState x:Name="TopHeader" />
                                    <VisualState x:Name="LeftHeader">
                                        <VisualState.Setters>
                                            <Setter Target="HeaderContentPresenter.(Grid.Row)" Value="1" />
                                            <Setter Target="HeaderContentPresenter.(Grid.Column)" Value="0" />
                                            <Setter Target="HeaderContentPresenter.(Grid.ColumnSpan)" Value="1" />
                                            <Setter Target="HeaderContentPresenter.Margin" Value="{StaticResource CalendarDatePickerLeftHeaderMargin}" />
                                            <Setter Target="HeaderContentPresenter.MaxWidth" Value="{StaticResource CalendarDatePickerLeftHeaderMaxWidth}" />
                                        </VisualState.Setters>
                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            <FlyoutBase.AttachedFlyout>
                                <Flyout Placement="Bottom" ShouldConstrainToRootBounds="False">
                                    <Flyout.FlyoutPresenterStyle>
                                        <Style TargetType="FlyoutPresenter">
                                            <Setter Property="Padding" Value="0" />
                                            <Setter Property="BorderThickness" Value="0" />
                                            <Setter Property="IsDefaultShadowEnabled" Value="True" />
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="FlyoutPresenter">
                                                        <ContentPresenter Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Content="{TemplateBinding Content}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    ContentTransitions="{TemplateBinding ContentTransitions}"
                                    Margin="{TemplateBinding Padding}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Flyout.FlyoutPresenterStyle>
                                    <CalendarView x:Name="CalendarView"
                    Style="{TemplateBinding CalendarViewStyle}"
                    MinDate="{TemplateBinding MinDate}"
                    MaxDate="{TemplateBinding MaxDate}"
                    IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
                    DisplayMode="{TemplateBinding DisplayMode}"
                    FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
                    DayOfWeekFormat="{TemplateBinding DayOfWeekFormat}"
                    CalendarIdentifier="{TemplateBinding CalendarIdentifier}"
                    IsOutOfScopeEnabled="{TemplateBinding IsOutOfScopeEnabled}"
                    IsGroupLabelVisible="{TemplateBinding IsGroupLabelVisible}" />
                                </Flyout>
                            </FlyoutBase.AttachedFlyout>

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="32" />
                            </Grid.ColumnDefinitions>
                            <ContentPresenter x:Name="HeaderContentPresenter"
                x:DeferLoadStrategy="Lazy"
                Grid.Row="0"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                Content="{TemplateBinding Header}"
                ContentTemplate="{TemplateBinding HeaderTemplate}"
                Margin="{StaticResource CalendarDatePickerTopHeaderMargin}"
                TextWrapping="Wrap"
                VerticalAlignment="Top"
                Visibility="Collapsed" />
                            <Border x:Name="Background"
                Grid.Row="1"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{TemplateBinding BorderBrush}"
                Background="{TemplateBinding Background}"
                CornerRadius="{TemplateBinding CornerRadius}"
                Control.IsTemplateFocusTarget="True"
                MinHeight="32"/>
                            <TextBlock x:Name="DateText"
                Grid.Row="1"
                Grid.Column="1"
                HorizontalAlignment="Left"
                Foreground="{ThemeResource CalendarDatePickerTextForeground}"
                Text="{TemplateBinding PlaceholderText}"
                Padding="12, 0, 0, 2"
                VerticalAlignment="Center" />

               <!--Edit the following FontIcon's property-->
                            <FontIcon x:Name="CalendarGlyph"
                Grid.Row="1"
                Grid.Column="2"
                Glyph="&#xE706;"
                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                Foreground="{ThemeResource CalendarDatePickerCalendarGlyphForeground}"
                FontSize="18"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" />
                            <ContentPresenter x:Name="DescriptionPresenter"
                Grid.Row="2"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                Content="{TemplateBinding Description}"
                x:Load="False"
                Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}"
                AutomationProperties.AccessibilityView="Raw" />

                        </Grid>

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

如何增加CalendarDatePicker的日历图标大小并使用不同的文本或图像图标[UWP]自定义它？

1 个答案: