【问题标题】:system.windows.datepicker change header background colorsystem.windows.datepicker 更改标题背景颜色
【发布时间】:2012-02-02 11:02:50
【问题描述】:

我一直在尝试更改 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"/>

【问题讨论】:

标签: wpf datepicker styles


【解决方案1】:

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

1) 日期选择器有一个 CalenderStye 属性,所以覆盖日历默认 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="&lt;"
                                    Focusable="False" />

                    <Button x:Name="PART_NextButton" 
                                    DockPanel.Dock="Right"
                                    Content="&gt;" 
                                    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>

【讨论】:

  • 这是有效的(cal 的外观发生了变化),但我不能只更改标题。我只想更改标题颜色。我不知道如何处理 xaml,我尝试进行实验,但最终得到了看起来很奇怪的 cal。请注意我没有工具包
  • 我现在可以更改标题,但现在我无法更改所选日期的 hi light 颜色。请问选择的日期在什么属性/标签下?
猜你喜欢
  • 1970-01-01
  • 2010-11-19
  • 1970-01-01
  • 2021-04-15
  • 2021-02-24
  • 2019-10-07
  • 2022-01-15
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多