system.windows.datepicker 更改标题背景颜色

发布于 2025-01-02 12:56:05 字数 1138 浏览 2 评论 0原文

我一直在尝试更改 wpf 默认日期选择器的背景颜色。现在它是深蓝色和黑色文本,客户希望将其更改为白色。我已经写了很多代码,但似乎没有任何效果。

请帮忙。谢谢

 <Style x:Key="DateStyle" TargetType="{x:Type DatePcker}" BasedOn="{x:Null}">
    <Style.Triggers>
        <Trigger Property="IsFocused" Value="True">
            <Setter Property="Background" Value="Yellow" />
        </Trigger>
        <Trigger Property="IsReadOnly" Value="True">
            <Setter Property="Background" Value="White" />
        </Trigger>
    </Style.Triggers>
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="CharacterCasing" Value="Upper"/>
    <Setter Property="FontFamily" Value="Segoe UI" />
    <Setter Property="FontSize" Value="11" />
</Style>

这是我的日期选择器

 <DatePicker Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="4" Height="25" HorizontalAlignment="Left" TabIndex="3" 
                                                        Name="dpFillingDateFrom" VerticalAlignment="Center" Width="97" Text="12/12/2011" SelectedDateFormat="Short"/>

I have been trying to change the background color of wpf's default datepicker. Right now it is dark blue with black text and client wants it changed to white. I have been coding a lot and nothing seems to work.

Pls help. thanks

 <Style x:Key="DateStyle" TargetType="{x:Type DatePcker}" BasedOn="{x:Null}">
    <Style.Triggers>
        <Trigger Property="IsFocused" Value="True">
            <Setter Property="Background" Value="Yellow" />
        </Trigger>
        <Trigger Property="IsReadOnly" Value="True">
            <Setter Property="Background" Value="White" />
        </Trigger>
    </Style.Triggers>
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="CharacterCasing" Value="Upper"/>
    <Setter Property="FontFamily" Value="Segoe UI" />
    <Setter Property="FontSize" Value="11" />
</Style>

here's my datepicker

 <DatePicker Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="4" Height="25" HorizontalAlignment="Left" TabIndex="3" 
                                                        Name="dpFillingDateFrom" VerticalAlignment="Center" Width="97" Text="12/12/2011" SelectedDateFormat="Short"/>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

乖乖哒 2025-01-09 12:56:05

只需浏览 http://msdn.microsoft.com/en-us/magazine/ dd882520.aspx
更改 wpf 默认日期选择器的背景颜色并不直接,但您可以按照以下步骤操作

1)日期选择器有一个 CalenderStye 属性,因此覆盖 Calender 默认 ControlTemplate

2)在 Calender 控件模板中,有 CalenderItemStyle 您可以在其中覆盖 CalenderItemStyle 默认模板。在这里您可以自定义背景颜色以及标题按钮。

<Style x:Key="ItemStyle" TargetType="primitives:CalendarItem">
                <Setter Property="Template">
                    <Setter.Value>

            <ControlTemplate TargetType="primitives:CalendarItem">
                <ControlTemplate.Resources>
                    <DataTemplate x:Key="DayTitleTemplate">
                        <TextBlock Text="{Binding}"
                                           HorizontalAlignment="Center" />
                    </DataTemplate>
                </ControlTemplate.Resources>

                <DockPanel Name="PART_Root" 
                                   LastChildFill="True">
                    <Button x:Name="PART_PreviousButton" 
                                    DockPanel.Dock="Left"
                                    Content="<"
                                    Focusable="False" />

                    <Button x:Name="PART_NextButton" 
                                    DockPanel.Dock="Right"
                                    Content=">" 
                                    Focusable="False" />

                    <Button x:Name="PART_HeaderButton"                                             
                                    DockPanel.Dock="Top"
                                    FontWeight="Bold"
                                    Focusable="False" />

                    <Grid>
                        <Grid x:Name="PART_MonthView" 
                                      Visibility="Visible">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                        </Grid>

                        <Grid x:Name="PART_YearView" 
                                      Visibility="Hidden">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/> 
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </Grid>
                    <Rectangle x:Name="PART_DisabledVisual" Opacity="0" Visibility="Collapsed" Fill="#A5FFFFFF"/>
                </DockPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="PART_DisabledVisual" Property="Visibility" Value="Visible" />
                    </Trigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type toolkit:Calendar}}, Path=DisplayMode}" Value="Year">
                        <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                        <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type toolkit:Calendar}}, Path=DisplayMode}" Value="Decade">
                        <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                        <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
            </Setter.Value>
            </Setter>
            </Style>
            <Style x:Key="pp" TargetType="toolkit:Calendar">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="toolkit:Calendar">
                            <StackPanel Name="PART_Root" 
                Orientation="Horizontal">
                                <primitives:CalendarItem 
            Name="PART_CalendarItem" 
            Style="{StaticResource ItemStyle}"
            Background="{TemplateBinding Background}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}"
            VerticalAlignment="Center" />
                                <Border BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Margin="4 4 0 4">
                                    <ScrollViewer 
                    VerticalScrollBarVisibility="Auto"
                    Height="{Binding ElementName=PART_CalendarItem,
                                     Path=ActualHeight}"
                    Width="100">
                                        <ItemsControl 
                    ItemsSource=
                        "{Binding RelativeSource={RelativeSource 
                                      AncestorType=toolkit:Calendar}, 
                                  Path=SelectedDates}" />
                                    </ScrollViewer>
                                </Border>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <toolkit:DatePicker CalendarStyle="{StaticResource pp}" Margin="0,0,0,242"></toolkit:DatePicker>

Just go through http://msdn.microsoft.com/en-us/magazine/dd882520.aspx.
Its not straight forward to change the background color of wpf's default datepicker but you can follow below steps

1) Date picker has a CalenderStye Property so override Calender Default ControlTemplate

2) In Calender control template, there is CalenderItemStyle where you can override CalenderItemStyle defaulttemplate. In this you can customize the background colors as well as header buttons.

<Style x:Key="ItemStyle" TargetType="primitives:CalendarItem">
                <Setter Property="Template">
                    <Setter.Value>

            <ControlTemplate TargetType="primitives:CalendarItem">
                <ControlTemplate.Resources>
                    <DataTemplate x:Key="DayTitleTemplate">
                        <TextBlock Text="{Binding}"
                                           HorizontalAlignment="Center" />
                    </DataTemplate>
                </ControlTemplate.Resources>

                <DockPanel Name="PART_Root" 
                                   LastChildFill="True">
                    <Button x:Name="PART_PreviousButton" 
                                    DockPanel.Dock="Left"
                                    Content="<"
                                    Focusable="False" />

                    <Button x:Name="PART_NextButton" 
                                    DockPanel.Dock="Right"
                                    Content=">" 
                                    Focusable="False" />

                    <Button x:Name="PART_HeaderButton"                                             
                                    DockPanel.Dock="Top"
                                    FontWeight="Bold"
                                    Focusable="False" />

                    <Grid>
                        <Grid x:Name="PART_MonthView" 
                                      Visibility="Visible">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                        </Grid>

                        <Grid x:Name="PART_YearView" 
                                      Visibility="Hidden">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/> 
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </Grid>
                    <Rectangle x:Name="PART_DisabledVisual" Opacity="0" Visibility="Collapsed" Fill="#A5FFFFFF"/>
                </DockPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="PART_DisabledVisual" Property="Visibility" Value="Visible" />
                    </Trigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type toolkit:Calendar}}, Path=DisplayMode}" Value="Year">
                        <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                        <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type toolkit:Calendar}}, Path=DisplayMode}" Value="Decade">
                        <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                        <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
            </Setter.Value>
            </Setter>
            </Style>
            <Style x:Key="pp" TargetType="toolkit:Calendar">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="toolkit:Calendar">
                            <StackPanel Name="PART_Root" 
                Orientation="Horizontal">
                                <primitives:CalendarItem 
            Name="PART_CalendarItem" 
            Style="{StaticResource ItemStyle}"
            Background="{TemplateBinding Background}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}"
            VerticalAlignment="Center" />
                                <Border BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Margin="4 4 0 4">
                                    <ScrollViewer 
                    VerticalScrollBarVisibility="Auto"
                    Height="{Binding ElementName=PART_CalendarItem,
                                     Path=ActualHeight}"
                    Width="100">
                                        <ItemsControl 
                    ItemsSource=
                        "{Binding RelativeSource={RelativeSource 
                                      AncestorType=toolkit:Calendar}, 
                                  Path=SelectedDates}" />
                                    </ScrollViewer>
                                </Border>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <toolkit:DatePicker CalendarStyle="{StaticResource pp}" Margin="0,0,0,242"></toolkit:DatePicker>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文