Skip to main content
Home Forums Silverlight Programming Silverlight Controls and Silverlight Toolkit Bug: Default DatePicker Template
5 replies. Latest Post by Yi-Lun Luo - MSFT on July 17, 2008.
(0)
GuptaAtul
Member
17 points
16 Posts
07-10-2008 5:05 AM |
I took the DatePicker control template from MSDN (http://msdn.microsoft.com/en-us/library/cc278067(VS.95).aspx). However when I use it as a style for DatePicker control in my code and run the application, I get a System.Stack.OverflowException.
<System_Windows_Controls:DatePicker HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource newDatePickerStyle}"/>
And the newDatePickerStyle is as obtained from msdn. If I open the XAML in Blend, it points out the error saying that the name "Disabled" has been used twice. When I checked the XAML, I found out that it is being used for a Rectangle and for one of states managed by VSM.
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Disabled" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</vsm:VisualState>
and
<Rectangle x:Name="Disabled" RadiusX="2" RadiusY="2" Fill="{StaticResource DisabledBrush}" Opacity="0" />
I changed the name for Rectangle to rDisabled, and it worked fine after that. Surprisingly, this error isn't shown at design time in VS, but only in Blend. There are few other errors shown in VS at design time, but somehow they dont' cause issue at runtime.
Yi-Lun L...
All-Star
25052 points
2,747 Posts
07-14-2008 7:26 AM |
Hello, I believe this is a document error. In the real template, the Rectangle's name is DisabledVisual.
07-16-2008 9:07 AM |
There is another rectangle with that name, i have pasted a snippet from the template below and bold faced the two rectangles. The one where i faced the error and other which is already called as DisabledVisual
<Rectangle x:Name="Disabled" RadiusX="2" RadiusY="2" Fill="{StaticResource DisabledBrush}" Opacity="0" /> </Grid> </ControlTemplate> <Storyboard Name="Normal State"/> <Storyboard Name="Disabled State"> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="1"/> </Storyboard> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <!--If DatePickerTextBox template needs to be updated, "System.Windows.Controls.DatePicker.DatePickerTextBox.xaml" file should be updated!--> <local:DatePickerTextBox x:Name="TextBox" Width="{TemplateBinding Width}" Grid.Column="0" Padding="5,4,6,3"/> <Button x:Name="Button" Template="{StaticResource DropDownButtonTemplate}" Grid.Column="1" Width="20.5" Margin="-21,0,0,0"/> <Rectangle x:Name="DisabledVisual" Grid.ColumnSpan="2" Fill="{StaticResource DisabledBrush}" Opacity="1" Visibility="Visible"/>
07-17-2008 7:34 AM |
The document is a bit different from the real template. If you use Reflect to view the actual ControlTemplate for DatePicker, you'll see this:
<Style TargetType="local:DatePicker"> <!-- DatePicker properties --> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:DatePicker"> <Grid x:Name="Root"> <Grid.Resources> <!-- Main DatePicker Brushes --> <SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF" />
<!-- Start: Down button template --> <ControlTemplate x:Key="DropDownButtonTemplate" TargetType="Button"> <Grid> <Grid.Resources> <!-- Visual constants used by the template --> <Color x:Key="BaseColor">#FF003255</Color> <Color x:Key="LinearBevelLightStartColor">#FCFFFFFF</Color> <Color x:Key="LinearBevelLightEndColor">#F4FFFFFF</Color> <Color x:Key="LinearBevelDarkStartColor">#E0FFFFFF</Color> <Color x:Key="LinearBevelDarkEndColor">#B2FFFFFF</Color> <Color x:Key="MouseOverLinearBevelDarkEndColor">#7FFFFFFF</Color> <Color x:Key="HoverLinearBevelLightStartColor">#FCFFFFFF</Color> <Color x:Key="HoverLinearBevelLightEndColor">#EAFFFFFF</Color> <Color x:Key="HoverLinearBevelDarkStartColor">#D8FFFFFF</Color> <Color x:Key="HoverLinearBevelDarkEndColor">#4CFFFFFF</Color> <Color x:Key="CurvedBevelFillStartColor">#B3FFFFFF</Color> <Color x:Key="CurvedBevelFillEndColor">#3CFFFFFF</Color> <SolidColorBrush x:Key="BorderBrush" Color="#FF000000" /> <SolidColorBrush x:Key="IconColor" Color="#FF000000" /> <SolidColorBrush x:Key="AccentBrush" Color="#FFFFFFFF" /> <SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF" /> </Grid.Resources> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualStateGroup.Transitions> <vsm:VisualTransition Duration="0" /> <vsm:VisualTransition To="MouseOver" Duration="0:0:0.2" /> <vsm:VisualTransition To="Pressed" Duration="0:0:0.1" /> </vsm:VisualStateGroup.Transitions> <vsm:VisualState x:Name="Normal" /> <vsm:VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Storyboard.TargetName="LinearBevelDarkEnd" Storyboard.TargetProperty="Color" To="{StaticResource MouseOverLinearBevelDarkEndColor}" Duration="0" /> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimation Storyboard.TargetName="LinearBevelLightEnd" Storyboard.TargetProperty="Offset" To=".2" Duration="0" /> <ColorAnimation Storyboard.TargetName="LinearBevelLightStart" Storyboard.TargetProperty="Color" To="{StaticResource HoverLinearBevelLightEndColor}" Duration="0" /> <ColorAnimation Storyboard.TargetName="LinearBevelLightEnd" Storyboard.TargetProperty="Color" To="{StaticResource HoverLinearBevelLightEndColor}" Duration="0" /> <ColorAnimation Storyboard.TargetName="LinearBevelDarkStart" Storyboard.TargetProperty="Color" To="{StaticResource HoverLinearBevelDarkStartColor}" Duration="0" /> <ColorAnimation Storyboard.TargetName="LinearBevelDarkEnd" Storyboard.TargetProperty="Color" To="{StaticResource HoverLinearBevelDarkEndColor}" Duration="0" /> <DoubleAnimation Storyboard.TargetName="DownStroke" Storyboard.TargetProperty="Opacity" To="1" Duration="0" /> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" /> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups>
<Rectangle RadiusX="1" RadiusY="1" Margin="1,2,1.5,2" StrokeThickness="1"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0.7,0" EndPoint="0.7,1"> <GradientStop x:Name="LinearBevelLightStart" Color="{StaticResource LinearBevelLightStartColor}" Offset="0" /> <GradientStop x:Name="LinearBevelLightEnd" Color="{StaticResource LinearBevelLightEndColor}" Offset="0.35" /> <GradientStop x:Name="LinearBevelDarkStart" Color="{StaticResource LinearBevelDarkStartColor}" Offset="0.35" /> <GradientStop x:Name="LinearBevelDarkEnd" Color="{StaticResource LinearBevelDarkEndColor}" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Grid x:Name="CurvedBevelScale" Margin="2"> <Grid.RowDefinitions> <RowDefinition Height="7*" /> <RowDefinition Height="3*" /> </Grid.RowDefinitions> <Path x:Name="CurvedBevel" Stretch="Fill" Margin="1.5,1,1.5,2" Data="F1 M0,0.02 L0,0.15 C0.15,0.22 0.3,0.25 0.5,0.25 0.7,0.25 0.85,0.22 1,0.15 L1,0.02 1,0 0.02,0 0,0.02 z"> <Path.Fill> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop x:Name="CurvedBevelFillStart" Color="{StaticResource CurvedBevelFillStartColor}" Offset="0" /> <GradientStop x:Name="CurvedBevelFillEnd" Color="{StaticResource CurvedBevelFillEndColor}" Offset="1" /> </LinearGradientBrush> </Path.Fill> </Path> </Grid> <Grid x:Name="DownStroke" Opacity="0"> <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1" RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2.5,1.5,1.5" /> <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1" RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2.25,1.5,1.5" /> <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1" RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,2,1.5,1.5" /> <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1" RadiusY="1" StrokeThickness="1" Opacity="0.05" Margin="1.5,1.75,1.5,1.5" /> <Rectangle Stroke="{TemplateBinding Background}" RadiusX="1" RadiusY="1" StrokeThickness="1" Opacity="1" Margin="1" /> <Rectangle RadiusX="1" RadiusY="1" StrokeThickness="1" Margin="1"> <Rectangle.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#A5FFFFFF" Offset="0" /> <GradientStop Color="#FFFFFFFF" Offset="1" /> </LinearGradientBrush> </Rectangle.Stroke> </Rectangle> </Grid> <Grid> <Path Width="12" Height="11" Stretch="Fill" Stroke="#FF313131" StrokeThickness=".7" Data="M1,2 C1,1.4477153 1.4477153,1 2,1 L56,1 C56.552285,1 57,1.4477153 57,2 L57,42.75 C57,43.302285 56.552285,43.75 56,43.75 L2,43.75 C1.4477153,43.75 1,43.302285 1,42.75 z M1.5,21 L57.25,21 M1.5,33 L57.25,33 M15,9.4479447 L15,42.75 M29.5,9.4479447 L29.5,42.75 M44,9.4479447 L44,42.75"/> <Rectangle Width="12" Height="2.15" Fill="#FF313131" Stroke="#FF313131" StrokeThickness=".7" VerticalAlignment="Top" Margin="0,5.15,0,0"/> </Grid> <Rectangle x:Name="DisabledVisual" RadiusX="2" RadiusY="2" Fill="{StaticResource DisabledBrush}" Opacity="0" /> </Grid> </ControlTemplate> <Storyboard Name="Normal State"/> <Storyboard Name="Disabled State"> <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="1"/> </Storyboard> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <!--If DatePickerTextBox template needs to be updated, "System.Windows.Controls.DatePicker.DatePickerTextBox.xaml" file should be updated!--> <local:DatePickerTextBox x:Name="TextBox" Width="{TemplateBinding Width}" Grid.Column="0" Padding="5,4,6,3"/> <Button x:Name="Button" Template="{StaticResource DropDownButtonTemplate}" Grid.Column="1" Width="20.5" Margin="-21,0,0,0"/> <Rectangle x:Name="DisabledVisual" Grid.ColumnSpan="2" Fill="{StaticResource DisabledBrush}" Opacity="1" Visibility="Visible"/> </Grid> </ControlTemplate>
</Setter.Value> </Setter> </Style>
There's no Rectangle named Disabled. But even there is, it should not cause problem at runtime. Visual States have their own name scope. Currently there're some problem regarding the vsm prefix which will be fixed in a future build.
07-17-2008 9:25 AM |
Thanks again and one final query before we can close this. Isn't there a need to have the x:Name values unique in a XAML as mentioned here - http://msdn.microsoft.com/en-us/library/ms752290.aspx?
In the template you have mentioned above, there are two rectangles with the same x:Name as DisabledVisual?
07-17-2008 11:56 PM |
There's a concept called name scope. With in a scope, each name must be unique. But you can have same names in different scopes. Please refer to http://msdn.microsoft.com/en-us/library/ms746659.aspx. Basically, each ControlTemplate has a name scope. In the above sample, the first DisabledVisual is in the ControlTemplate of DropDownButtonTemplate, while the second is in the ControlTemplate of the DatePicker. They're in different ControlTemplates, so they're in different name scopes, and thus the names can be the same.
Bug: Default DatePicker Template