Default DatePicker style for dark mode compatability

[DanielL]

Is there a default dynamic resource I can set on a DatePicker so it styles correctly in dark mode?  For example, I can use this for a TextBlock and it automatically changes to dark mode styling in dark mode:

Style="{DynamicResource RegularText}"

Is there something similar for a DatePicker?

[GKmieliauskas]

Hi Daniel,

Set background and foreground of DatePicker to esri colors:

Background="{DynamicResource Esri_TextStyleDisabledBrush}"  Foreground="{DynamicResource Esri_TextSelectionHighlightBrush}"

I copied code from my progress dialog, but you can find right values here:

http://esri.github.io/arcgis-pro-sdk/content/brushescolors/brushes.html

[ScottDickison1]

I know this one is very old but I thought I'd share my solution to this. I ended up completely templating the DatePicker controller using the ESRI Brushes and a custom image for the button. It's not perfect but it does make the DatePicker's appearance in XAML-based forms look better.

<Style x:Key="LOJIC_DatePicker_Style" TargetType="{x:Type DatePicker}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DatePicker">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <DatePickerTextBox x:Name="PART_TextBox"
                               Grid.Column="0"
                               Margin="0"
                               Background="{DynamicResource  Esri_ControlBackgroundBrush}"
                               Foreground="{DynamicResource Esri_TextStyleDefaultBrush}"
                               BorderBrush="DarkGray"
                               BorderThickness="1"
                               Padding="1"
                               FontSize="9"
                               VerticalContentAlignment="Center"
                               IsReadOnly="True"/>

                    <Button x:Name="PART_Button"
                            Grid.Column="1"
                            Focusable="False"
                            IsTabStop="False"
                            Margin="3,0,0,0"
                            Padding="1"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Image Source="/MetroBOZAS;component/Images/CalendarIcon.png"
                                  Width="20"
                                  Height="20"
                                  Stretch="Uniform"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
                    </Button>
                    <Popup x:Name="PART_Popup"
                       Placement="Bottom"
                       IsOpen="{TemplateBinding IsDropDownOpen}"
                       AllowsTransparency="True"
                       Focusable="False"
                       PopupAnimation="Slide">
                        <Border BorderBrush="Gray" BorderThickness="1" Background="White">
                            <Calendar x:Name="PART_Calendar"
                              IsTodayHighlighted="True"
                              SelectedDate="{Binding SelectedDate, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
                        </Border>
                    </Popup>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="DatePickerTextBox">
    <Setter Property="Background" Value="{DynamicResource Esri_ControlBackgroundBrush}" />
    <Setter Property="Foreground" Value="{DynamicResource Esri_TextStyleDefaultBrush}" />
    <Setter Property="BorderBrush" Value="DarkGray" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Padding" Value="1" />
    <Setter Property="FontSize" Value="9" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="DatePickerTextBox">
                <Grid>
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer x:Name="PART_ContentHost"
                                    Margin="0"
                                    VerticalScrollBarVisibility="Hidden"
                                    HorizontalScrollBarVisibility="Hidden" />
                </Border>
                <TextBlock x:Name="PART_Watermark"
                       Text="Select a date"
                       Foreground="Gray"
                       Margin="4,0,0,0"
                       VerticalAlignment="Center"
                       IsHitTestVisible="False"
                       Visibility="Collapsed" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Text" Value="">
                        <Setter TargetName="PART_Watermark" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>