WP7 Set the Datepicker border color

Question

I'm having trouble setting the border color in a Toolkit Datepicker as it appears on a page. I'm not talking about the DatePickerPage. I can set the background and foreground colors, but the border doesn't take hold.

<toolkit:DatePicker x:Name="dpDeliverBy" Header="Deliver By" Grid.Row="6" 
HeaderTemplate="{StaticResource MyHeaderTemplate}" Margin="-12, 0, 0, -10" Value=""
BorderBrush="Black" Background="White" BorderThickness="2" Foreground="Black" />

The border doesn't seem to take hold and I don't know what other property to use.

Answer 1

It's an interesting thing that you cannot edit the DatePicker template. I found out by looking at the source code that for some reason it occurs because the template is defined in the main control theme - Generic.xaml and it has no BorderBrush property defined per se.

Download the package - you will need it to build a custom control on top of the existing skeleton.

You should open that theme file and if yo look at the template for DatePicker, you can edit the values for BorderBrush and BorderThickness. One thing to remember - once you re-compile the source, you need to make sure that you are using the correct library (when referencing in the main project). By default, when you add a Microsoft.Phone.Controls.Toolkit unit, it will reference the library registered in GAC (assuming that you installed the toolkit) and take the one that is located in the SDK folder - you don't want that. Either change the library name or change the local copy.

If you need a tutorial for this, I just wrote one.

Here is the modified style (modified in the source code for easier reuse):

<Style TargetType="controls:DatePicker">
    <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Azure"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="PickerPageUri" Value="/Microsoft.Phone.Controls.Toolkit;component/DateTimePickers/DatePickerPage.xaml"/>
    <Setter Property="ValueStringFormat" Value="{}{0:d}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:DatePicker">
                <StackPanel>
                    <ContentControl
                        Content="{TemplateBinding Header}"
                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                        Foreground="{StaticResource PhoneSubtleBrush}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Margin="12,0,12,-4"/>
                    <Button
                        x:Name="DateTimeButton"
                        Content="{TemplateBinding ValueString}"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        FontFamily="{TemplateBinding FontFamily}"
                        Foreground="{TemplateBinding Foreground}"
                        Height="72"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

It isn't necessary to rebuild the Silverlight Toolkit isn't necessary to achieve the desired effect. The approach taken by the Toolkit is the same that has been used since XAML's inception: that of "lookless" controls. The control's logic is defined in the class file and the visual appearance is defined in XAML in the Themes\generic.xaml file.

The framework uses the XAML in this file render the control unless you specify a replacement, which is a common thing to do. So, all you need to do is to add the new style in App.xaml, and then you don't need to recompile the Toolkit assembly, because the framework will use your custom style instead of the new one.

There's a good article on VSJ that explains this model if you want to know more.