更改 windows DatePicker 的按下状态样式

Posted 2023-02-22

【中文标题】更改 windows DatePicker 的按下状态样式

【英文标题】：Change windows DatePicker's pressed state style

【发布时间】：2016-02-07 08:16:20

【问题描述】：

我正在为 Windows Phone 8.1 开发一个应用程序。我正在尝试编辑 Windows 默认 DatePicker 样式。我已经成功地使用这种样式添加了一个图像来代替DatePicker

<Style x:Key="DatePickerStyle" TargetType="DatePicker">
        <Setter Property="FontFamily" Value="ThemeResource PhoneFontFamilyNormal"/>
        <Setter Property="FontSize" Value="ThemeResource ContentControlFontSize"/>
        <Setter Property="Foreground" Value="ThemeResource DatePickerForegroundThemeBrush"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="DatePicker">
                    <StackPanel x:Name="LayoutRoot" Margin="TemplateBinding Padding">
                        <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="TemplateBinding HeaderTemplate" Content="TemplateBinding Header" Margin="0,0,0,-3" Style="StaticResource HeaderContentPresenterStyle" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
                        <Button x:Name="FlyoutButton" BorderThickness="2.5" HorizontalAlignment="Stretch" HorizontalContentAlignment="TemplateBinding HorizontalContentAlignment" IsEnabled="TemplateBinding IsEnabled" Padding="6.5,0,0,3" BorderBrush="x:Null" Foreground="x:Null" Height="100" Width="100" Content=" ">
                            <Button.Background>
                                <ImageBrush Stretch="Uniform" ImageSource="/Assets/calendaricon.png"/>
                            </Button.Background>
                        </Button>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

但是当按下DatePicker 时，它仍然显示旧的DatePicker 样式而不是我设置的新样式。我试图弄清楚如何设置日期选择器的按下状态样式，但我无法弄清楚。我希望所有状态的日期选择器都使用相同的正常状态样式。我怎样才能做到这一点？

【参考方案1】：

设置按钮的内容模板（FlyoutButton）而不是设置按钮的背景（FlyoutButton）。

代码如下：

<Style x:Key="DatePickerStyle" TargetType="DatePicker">
    <Setter Property="FontFamily" Value="ThemeResource PhoneFontFamilyNormal"/>
    <Setter Property="FontSize" Value="ThemeResource ContentControlFontSize"/>
    <Setter Property="Foreground" Value="ThemeResource DatePickerForegroundThemeBrush"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DatePicker">
                <StackPanel x:Name="LayoutRoot" Margin="TemplateBinding Padding">
                    <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="TemplateBinding HeaderTemplate" Content="TemplateBinding Header" Margin="0,0,0,-3" Style="StaticResource HeaderContentPresenterStyle" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
                    <Button x:Name="FlyoutButton" 
                            BorderThickness="2.5"
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="TemplateBinding HorizontalContentAlignment"
                            IsEnabled="TemplateBinding IsEnabled"
                            Padding="6.5,0,0,3"
                            BorderBrush="x:Null"
                            Foreground="x:Null"
                            Height="100"
                            Width="100"
                            >
                        <Button.ContentTemplate>
                            <DataTemplate>
                               <Grid >
                                   <Image Stretch="Uniform"
                                          Source="/Assets/calendaricon.png"/>
                               </Grid>
                            </DataTemplate>
                        </Button.ContentTemplate>
                    </Button>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>