locked
DatePicker: How to get a fixed, cultur-independent order of the year, month, day combo boxes

    Question

  • Hi,

    I need a DatePicker with a fixed, culture-independent format: “yy MM dd”. The xaml allows to define the format of the items year, month, and day easily:

    <DatePicker Grid.Row="1"  Grid.Column="0" x:Name="_fromDatePicker"  BorderThickness="2"        
                       Margin="0,0,5,10" FontSize="{Binding PageNormalFontSize}" TabIndex="24"       
                       DayFormat="{}{day.integer(2)}" MonthFormat="{}{month.integer(2)}"           
                       YearFormat="{}{year.abbreviated(2)}" 
                       Style="{StaticResource MyDatePickerStyle}"            
                       DateChanged="FromDatePicker_DateChanged"/>

    To fix the order: year, month, day I wrote MyDatePickerStyle based on the default. My first idea was to simple change the order of the named combo boxes: YearPicker, MonthPicker, and DayPicker in the template. Unfortunately, this does not work. The control always uses the content of ThirdPickerHost for the year, SecondPickerHost for the day (with culture “en-US”)
    or for the month (with culture “de-DE”), and FirstPickerHost for the month (with culture “en-US”) or for the day (with culture “de-DE”).

    My second try was to fix the language and to change the order of the PickerHosts. But, the control seams to ignore the property Language=”en-US”.

    My final solution is to write MyDatePickerStyleForEn, MyDatePickerStyleForDe, etc. and to change the style programmatically depending on the current culture.

    Please, tell me any better
    solution!
    Best Regards, Paul

    PaulBiz


    • Edited by PaulBiz Thursday, September 11, 2014 3:48 PM formatting
    Thursday, September 11, 2014 3:45 PM

Answers

  • Hi PaulBiz,

    I found an interest thing. The problem is caused by the x: Name property of Border markup. When I remove that property, the app works as expect. I think we don’t need to follow the default style in template, change anything you want.

    At last, the code looks like the following.

    <Style x:Key="MyDatePickerStyleDayMonthYear" TargetType="DatePicker">
    
                <Setter Property="Orientation" Value="Horizontal"/>
    
                <Setter Property="IsTabStop" Value="False"/>
    
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    
                <Setter Property="Foreground" Value="{ThemeResource DatePickerForegroundThemeBrush}"/>
    
                <Setter Property="HorizontalAlignment" Value="Left"/>
    
                <Setter Property="VerticalAlignment" Value="Center"/>
    
                <Setter Property="Template">
    
                    <Setter.Value>
    
                        <ControlTemplate TargetType="DatePicker">
    
                            <Border x:Name="LayoutRoot"
    
                                     Background="{TemplateBinding Background}"
    
                                     BorderBrush="{TemplateBinding BorderBrush}"
    
                                     BorderThickness="{TemplateBinding BorderThickness}">
    
                                <Grid Margin="{TemplateBinding Padding}">
    
                                    <Grid.RowDefinitions>
    
                                        <RowDefinition Height="Auto" />
    
                                        <RowDefinition Height="Auto" />
    
                                    </Grid.RowDefinitions>
    
                                    <ContentPresenter x:Name="HeaderContentPresenter"
    
                                                  Foreground="{ThemeResource DatePickerHeaderForegroundThemeBrush}"
    
                                                  Margin="{ThemeResource DatePickerHeaderThemeMargin}"
    
                                                  FlowDirection="{TemplateBinding FlowDirection}"
    
                                                  Content="{TemplateBinding Header}"
    
                                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
    
                                                  FontWeight="{ThemeResource DatePickerHeaderThemeFontWeight}" />
    
                                    <StackPanel Grid.Row="1" Orientation="{TemplateBinding Orientation}">
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="YearPicker" 
    
                                            MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                            FontWeight="{TemplateBinding FontWeight}"
    
                                            FontSize="{TemplateBinding FontSize}"
    
                                            FontFamily="{TemplateBinding FontFamily}"
    
                                             Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="MonthPicker"
    
                                            MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                            FontWeight="{TemplateBinding FontWeight}"
    
                                            FontSize="{TemplateBinding FontSize}"
    
                                            FontFamily="{TemplateBinding FontFamily}"
    
                                            Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="DayPicker"  
    
                                             MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                             FontWeight="{TemplateBinding FontWeight}"
    
                                             FontSize="{TemplateBinding FontSize}"
    
                                             FontFamily="{TemplateBinding FontFamily}"
    
                                              Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                    </StackPanel>
    
                                </Grid>
    
                            </Border>
    
                        </ControlTemplate>
    
                    </Setter.Value>
    
                </Setter>
    
            </Style>
    
            <Style x:Key="MyDatePickerStyleMonthDayYear" TargetType="DatePicker">
    
                <Setter Property="Orientation" Value="Horizontal"/>
    
                <Setter Property="IsTabStop" Value="False"/>
    
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    
                <Setter Property="Foreground" Value="{ThemeResource DatePickerForegroundThemeBrush}"/>
    
                <Setter Property="HorizontalAlignment" Value="Left"/>
    
                <Setter Property="VerticalAlignment" Value="Center"/>
    
                <Setter Property="Template">
    
                    <Setter.Value>
    
                        <ControlTemplate TargetType="DatePicker">
    
                            <Border x:Name="LayoutRoot"
    
                                     Background="{TemplateBinding Background}"
    
                                     BorderBrush="{TemplateBinding BorderBrush}"
    
                                     BorderThickness="{TemplateBinding BorderThickness}">
    
                                <Grid Margin="{TemplateBinding Padding}">
    
                                    <Grid.RowDefinitions>
    
                                        <RowDefinition Height="Auto" />
    
                                        <RowDefinition Height="Auto" />
    
                                    </Grid.RowDefinitions>
    
                                    <ContentPresenter x:Name="HeaderContentPresenter"
    
                                                  Foreground="{ThemeResource DatePickerHeaderForegroundThemeBrush}"
    
                                                  Margin="{ThemeResource DatePickerHeaderThemeMargin}"
    
                                                  FlowDirection="{TemplateBinding FlowDirection}"
    
                                                  Content="{TemplateBinding Header}"
    
                                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
    
                                                  FontWeight="{ThemeResource DatePickerHeaderThemeFontWeight}" />
    
                                    <StackPanel Grid.Row="1" Orientation="{TemplateBinding Orientation}">
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="DayPicker"
    
                                            MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                            FontWeight="{TemplateBinding FontWeight}"
    
                                            FontSize="{TemplateBinding FontSize}"
    
                                            FontFamily="{TemplateBinding FontFamily}"
    
                                            Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="YearPicker" 
    
                                            MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                            FontWeight="{TemplateBinding FontWeight}"
    
                                            FontSize="{TemplateBinding FontSize}"
    
                                            FontFamily="{TemplateBinding FontFamily}"
    
                                            Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="MonthPicker"
    
                                             MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                             FontWeight="{TemplateBinding FontWeight}"
    
                                             FontSize="{TemplateBinding FontSize}"
    
                                             FontFamily="{TemplateBinding FontFamily}"
    
                                             Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                    </StackPanel>
    
                                </Grid>
    
                            </Border>
    
                        </ControlTemplate>
    
                    </Setter.Value>
    
                </Setter>
    
            </Style>
    

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by PaulBiz Tuesday, September 23, 2014 8:17 AM
    Tuesday, September 23, 2014 2:51 AM
    Moderator

All replies

  • Hi PaulBiz,

    Have you tried to order combobox control together with border XAML like this? I would like to see if the problem persists.

    <Border x:Name="ThirdPickerHost">
    
                                            <ComboBox x:Name="YearPicker" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"/>
    
                                        </Border>
    
                                        <Rectangle x:Name="FirstPickerSpacing" Height="{ThemeResource DatePickerSpacingThemeHeight}" Width="{ThemeResource DatePickerSpacingThemeWidth}"/>
    
                                        <Border x:Name="SecondPickerHost">
    
                                            <ComboBox x:Name="MonthPicker" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"/>
    
                                        </Border>
    
                                        <Rectangle x:Name="SecondPickerSpacing" Height="{ThemeResource DatePickerSpacingThemeHeight}" Width="{ThemeResource DatePickerSpacingThemeWidth}"/>
    
                                        <Border x:Name="FirstPickerHost">
    
                                            <ComboBox x:Name="DayPicker" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"/>
    
                                        </Border>
    

    Setting language property on UI Element is only a small part of what you might do to prepare an app for globalization. I would recommend you read the reference for Globalizaing app. http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh965328.aspx.

    You have mentioned that there were two cultures in the DatePicker control. As I know, however, DatePicker used DefaultUICulture to formats the displayed date by default and DefaultLanguage was set in Package.appxmanifest file. Can you post MyDatePickerStyleForEn style and MyDatePickerStyleForDe style here? I would like to see the differences between them to understand better.

    Regards.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, September 12, 2014 9:59 AM
    Moderator
  • Thank you for your answer. The ordering of the Combo boxes in your template was my first try: I works fine with the language setting "de-DE". But after changing the language to "en-EN", the control uses the FirstPickerHost content for the month and SecondPickerHost content for the day independently from the name of the combo boxes. The names of the combo boxes are completely irrelevant. For me, this is an error of the implementation.

    Regards, Paul


    PaulBiz

    Friday, September 12, 2014 7:35 PM
  • Hi PaulBiz,

    Can you share a repro project, I cannot see the issue when changing language.

    If you still have problem, please provide more information.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, September 17, 2014 5:07 AM
    Moderator
  • Here is a repro project:

    https://onedrive.live.com/redir?resid=6BFC1BB252611F3F!16008&authkey=!AHwqcU4zpRqvWmY&ithint=file%2czip

    It contains a single DatePicker and two combo boxes to change the style and the language.

    Goal was to have the date format ""yy MM dd" fixed for all languages on the DatePicker.

    If you run it with "en-US" as desktop language (middle endian date format) and the default style "MyDatePickerStyleDayMonthYear", the month is shown in the last combo box instead of the middle combo box. If you change the style with the right style combo box to "MyDatePickerStyleMonthDayYear", the month is shown in the middle.

    If you run it with a desktop language like "de-DE" (little endian date format) and the default style, the result is the reverse.

    With the left language combo box you can change the language property of the DatePicker only. Unfortunately, this does not have any effect.

    In my opinion the DataPicker should have an additional property "Endianess" with values for "ddMMyy", "MMddyy", and "yyMMdd". Alternatively, the language property should allow to fix the language of the control.

    My bad solution is to change the style programmatically depending on the Windows.Globalization.ApplicationLanguages.Languages[0].

    See also http://en.wikipedia.org/wiki/Date_format_by_country

    Regards, Paul


    PaulBiz


    • Edited by PaulBiz Monday, September 22, 2014 2:20 PM corr
    Friday, September 19, 2014 12:01 PM
  • Hi PaulBiz,

    I found an interest thing. The problem is caused by the x: Name property of Border markup. When I remove that property, the app works as expect. I think we don’t need to follow the default style in template, change anything you want.

    At last, the code looks like the following.

    <Style x:Key="MyDatePickerStyleDayMonthYear" TargetType="DatePicker">
    
                <Setter Property="Orientation" Value="Horizontal"/>
    
                <Setter Property="IsTabStop" Value="False"/>
    
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    
                <Setter Property="Foreground" Value="{ThemeResource DatePickerForegroundThemeBrush}"/>
    
                <Setter Property="HorizontalAlignment" Value="Left"/>
    
                <Setter Property="VerticalAlignment" Value="Center"/>
    
                <Setter Property="Template">
    
                    <Setter.Value>
    
                        <ControlTemplate TargetType="DatePicker">
    
                            <Border x:Name="LayoutRoot"
    
                                     Background="{TemplateBinding Background}"
    
                                     BorderBrush="{TemplateBinding BorderBrush}"
    
                                     BorderThickness="{TemplateBinding BorderThickness}">
    
                                <Grid Margin="{TemplateBinding Padding}">
    
                                    <Grid.RowDefinitions>
    
                                        <RowDefinition Height="Auto" />
    
                                        <RowDefinition Height="Auto" />
    
                                    </Grid.RowDefinitions>
    
                                    <ContentPresenter x:Name="HeaderContentPresenter"
    
                                                  Foreground="{ThemeResource DatePickerHeaderForegroundThemeBrush}"
    
                                                  Margin="{ThemeResource DatePickerHeaderThemeMargin}"
    
                                                  FlowDirection="{TemplateBinding FlowDirection}"
    
                                                  Content="{TemplateBinding Header}"
    
                                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
    
                                                  FontWeight="{ThemeResource DatePickerHeaderThemeFontWeight}" />
    
                                    <StackPanel Grid.Row="1" Orientation="{TemplateBinding Orientation}">
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="YearPicker" 
    
                                            MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                            FontWeight="{TemplateBinding FontWeight}"
    
                                            FontSize="{TemplateBinding FontSize}"
    
                                            FontFamily="{TemplateBinding FontFamily}"
    
                                             Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="MonthPicker"
    
                                            MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                            FontWeight="{TemplateBinding FontWeight}"
    
                                            FontSize="{TemplateBinding FontSize}"
    
                                            FontFamily="{TemplateBinding FontFamily}"
    
                                            Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="DayPicker"  
    
                                             MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                             FontWeight="{TemplateBinding FontWeight}"
    
                                             FontSize="{TemplateBinding FontSize}"
    
                                             FontFamily="{TemplateBinding FontFamily}"
    
                                              Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                    </StackPanel>
    
                                </Grid>
    
                            </Border>
    
                        </ControlTemplate>
    
                    </Setter.Value>
    
                </Setter>
    
            </Style>
    
            <Style x:Key="MyDatePickerStyleMonthDayYear" TargetType="DatePicker">
    
                <Setter Property="Orientation" Value="Horizontal"/>
    
                <Setter Property="IsTabStop" Value="False"/>
    
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    
                <Setter Property="Foreground" Value="{ThemeResource DatePickerForegroundThemeBrush}"/>
    
                <Setter Property="HorizontalAlignment" Value="Left"/>
    
                <Setter Property="VerticalAlignment" Value="Center"/>
    
                <Setter Property="Template">
    
                    <Setter.Value>
    
                        <ControlTemplate TargetType="DatePicker">
    
                            <Border x:Name="LayoutRoot"
    
                                     Background="{TemplateBinding Background}"
    
                                     BorderBrush="{TemplateBinding BorderBrush}"
    
                                     BorderThickness="{TemplateBinding BorderThickness}">
    
                                <Grid Margin="{TemplateBinding Padding}">
    
                                    <Grid.RowDefinitions>
    
                                        <RowDefinition Height="Auto" />
    
                                        <RowDefinition Height="Auto" />
    
                                    </Grid.RowDefinitions>
    
                                    <ContentPresenter x:Name="HeaderContentPresenter"
    
                                                  Foreground="{ThemeResource DatePickerHeaderForegroundThemeBrush}"
    
                                                  Margin="{ThemeResource DatePickerHeaderThemeMargin}"
    
                                                  FlowDirection="{TemplateBinding FlowDirection}"
    
                                                  Content="{TemplateBinding Header}"
    
                                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
    
                                                  FontWeight="{ThemeResource DatePickerHeaderThemeFontWeight}" />
    
                                    <StackPanel Grid.Row="1" Orientation="{TemplateBinding Orientation}">
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="DayPicker"
    
                                            MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                            FontWeight="{TemplateBinding FontWeight}"
    
                                            FontSize="{TemplateBinding FontSize}"
    
                                            FontFamily="{TemplateBinding FontFamily}"
    
                                            Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="YearPicker" 
    
                                            MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                            FontWeight="{TemplateBinding FontWeight}"
    
                                            FontSize="{TemplateBinding FontSize}"
    
                                            FontFamily="{TemplateBinding FontFamily}"
    
                                            Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                        <Border Margin=" 5 0 0 0">
    
                                            <ComboBox x:Name="MonthPicker"
    
                                             MinWidth="{ThemeResource DatePickerSelectorThemeMinWidth}"
    
                                             FontWeight="{TemplateBinding FontWeight}"
    
                                             FontSize="{TemplateBinding FontSize}"
    
                                             FontFamily="{TemplateBinding FontFamily}"
    
                                             Foreground="{TemplateBinding Foreground}" Language="{TemplateBinding Language}"/>
    
                                        </Border>
    
                                    </StackPanel>
    
                                </Grid>
    
                            </Border>
    
                        </ControlTemplate>
    
                    </Setter.Value>
    
                </Setter>
    
            </Style>
    

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by PaulBiz Tuesday, September 23, 2014 8:17 AM
    Tuesday, September 23, 2014 2:51 AM
    Moderator
  • Perfect! Thank you very much.

    I think it would be helpful if the default template would be without the x:Name="...PickerHost" attributes in the future.

    Best Regards, Paul


    PaulBiz

    Tuesday, September 23, 2014 8:23 AM