topic Re: Default DatePicker style for dark mode compatability in ArcGIS Pro SDK Questions

topic Re: Default DatePicker style for dark mode compatability in ArcGIS Pro SDK Questions https://community.esri.com/t5/arcgis-pro-sdk-questions/default-datepicker-style-for-dark-mode/m-p/1636073#M13072 <P>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.</P><LI-CODE lang="markup"><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></LI-CODE><P> </P> Thu, 24 Jul 2025 18:32:55 GMT ScottDickison1 2025-07-24T18:32:55Z Default DatePicker style for dark mode compatability https://community.esri.com/t5/arcgis-pro-sdk-questions/default-datepicker-style-for-dark-mode/m-p/781273#M1146 <HTML><HEAD></HEAD><BODY><P>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:</P><P>Style="{DynamicResource RegularText}"</P><P></P><P>Is there something similar for a DatePicker?</P></BODY></HTML> Fri, 24 Jul 2020 18:36:43 GMT https://community.esri.com/t5/arcgis-pro-sdk-questions/default-datepicker-style-for-dark-mode/m-p/781273#M1146 DanielL 2020-07-24T18:36:43Z Re: Default DatePicker style for dark mode compatability https://community.esri.com/t5/arcgis-pro-sdk-questions/default-datepicker-style-for-dark-mode/m-p/781274#M1147 <HTML><HEAD></HEAD><BODY><P>Hi Daniel,</P><P>Set background and foreground of DatePicker to esri colors:</P><P>Background="{DynamicResource Esri_TextStyleDisabledBrush}"  Foreground="{DynamicResource Esri_TextSelectionHighlightBrush}"</P><P>I copied code from my progress dialog, but you can find right values here:</P><P><A href="http://esri.github.io/arcgis-pro-sdk/content/brushescolors/brushes.html">http://esri.github.io/arcgis-pro-sdk/content/brushescolors/brushes.html</A></P></BODY></HTML> Mon, 27 Jul 2020 07:44:04 GMT https://community.esri.com/t5/arcgis-pro-sdk-questions/default-datepicker-style-for-dark-mode/m-p/781274#M1147 GKmieliauskas 2020-07-27T07:44:04Z Re: Default DatePicker style for dark mode compatability https://community.esri.com/t5/arcgis-pro-sdk-questions/default-datepicker-style-for-dark-mode/m-p/1636073#M13072 <P>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.</P><LI-CODE lang="markup"><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></LI-CODE><P> </P> Thu, 24 Jul 2025 18:32:55 GMT https://community.esri.com/t5/arcgis-pro-sdk-questions/default-datepicker-style-for-dark-mode/m-p/1636073#M13072 ScottDickison1 2025-07-24T18:32:55Z