Fix: The tag ‘TimeUpDown’ does not exist in XML namespace (Silverlight Toolkit)

If you use TimeUpDown control from Silverlight Toolkit in your XAML like below (copy pasting from CaptionGrid at ClipFlair source):

<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

>

  <DataTemplate x:Key="StartTimeCellTemplate">

    <TextBlock Margin="4" Text="{Binding Begin}" />

  </DataTemplate>



  <DataTemplate x:Key="StartTimeCellEditTemplate">

    <input:TimeUpDown Format="hh:mm:ss"

Value="{Binding Begin, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=true}"

    />

  </DataTemplate>

…


</ResourceDictionary>

then even though it seems to not complain in the XAML designer of Visual Studio 2010, then at Build time, even if you’ve added a reference to System.Windows.Controls.Input.Toolkit assembly (the 5.0.5.0 version for the Silverlight 5 Toolkit [December 2011 release]), you get:

The tag ‘TimeUpDown’ does not exist in XML namespace ‘clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit’

 

Similar bad behaviour occurs if you try to drag-drop the TimeUpDown control from Visual Studio toolbar (assuming you’ve installed the Silverlight Toolkit first) onto the XAML designer, no xml namespace (named xmlns:input above) is added and you just get <TimeUpDown /> in the designer.

 

The solution is to also add to your project a reference to System.Windows.Controls assembly (be sure to select same version DLL as above [e.g. 5.0.5.0]). For some reason the System.Windows.Controls.Input.Toolkit doesn’t seem to pull that together and must have some internal dependency to it (although the error you get is very cryptic).

Below is the Add Reference dialog of Visual Studio 2010, you either use the “Extensions” from the right handside, or type-in “System.Windows.Controls” at the search box to quickly spot those two assemblies.

 

Note that If you have a Silverlight assembly project with some UserControl in it and you apply the workaround I mentioned above, then if you use that UserControl in a Silverlight app (in a Page or other UserControl) you get a RUNTIME error this time at launch saying XamlParserError at the title bar and the exception text:

The type ‘TimeUpDown’ was not found because ‘clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit’ is an unknown namespace

This time the fix is to add a reference to "System.Windows.Controls.Input.Toolkit" to the project.

The funny thing is that this project (that uses a library that hosts a control that uses TimeUpDown itself) DOESN’T NEED to have a reference to "System.Windows.Controls", as the library does need to compile.

The other funny thing is that it does compile OK without adding the "System.Windows.Controls.Input.Toolkit" reference, but it shows runtime error.

 

This issue has been reported for some time now at:

https://connect.microsoft.com/VisualStudio/feedback/details/664106/silverlight-forum-sl5-numericupdown-control-compile-error

but hasn’t yet been fixed.

Update:

This may also be related:

https://zoomicon.wordpress.com/2012/07/02/fix-the-tag-xxx-does-not-exist-in-xml-namespace-clr-namespaceyyy/

I noticed that when I tried to compile on a machine that didn’t have Silverlight 5 Toolkit, it was eventually trying to use the Silverlight 4 Toolkit version of System.Windows.Control.Input from my Debug folder (not sure how that DLL ended up there, probably was brought in automatically via some other library’s dependencies by Visual Studio). So maybe you end up with multiple assemblies with the same name in the project and you have to remove the old ones.

You may also run into this issue if your solution was using Silverlight 5 Toolkit and you try to build the project on another machine that has Silverlight 4 Toolkit only. Solution is to install Silverlight 5 Toolkit too and then make sure the project refers to the 5.0 version of System.Windows.Controls.Input.Toolkit.dll and that the reference doesn’t have a path that points into your solution but to the program files folder instead, where Silverlight Toolkit gets installed.

HowTo: Load a XAML ResourceDictionary from a .NET assembly

Copying here my answer at:

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/11a42336-8d87-4656-91a3-275413d3cc19

What seems to work for me is the following (copying from the source code of http://ClipFlair.codeplex.com [check out the FlipPanel project under “Client” subfolder])

note

I’m using Build Action = "Page" and Custom Tool="MSBuild:Compile" at the properties of Themes\DropDownTheme.xml and Themes\RotateHorizontalTheme.xaml, as was for Themes\Generic.xaml. Seems to work OK (probably this is faster at runtime compared to setting Build Action to Resource and telling it to not build it)

according to http://stackoverflow.com/questions/145752/what-are-the-various-build-action-settings-in-vs-net-project-properties-and-wh the Build Action = "Page" compiles the XAML into BAML (this seems to also apply to Silverlight 5)

* FlipPanel project, Themes\Generic.xaml

<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:FlipPanel;assembly=FlipPanel">
 
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary 
             Source="/FlipPanel;component/Themes/RotateHorizontalTheme.xaml" />
  </ResourceDictionary.MergedDictionaries>
 
  <Style TargetType="local:FlipPanel">
    <Setter Property="Template" 
            Value="{StaticResource FlipPanel_RotateHorizontalTemplate}"/>
  </Style>
 
</ResourceDictionary>

* FlipPanel Project, Themes\RotateHorizontalTheme.xaml

<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:FlipPanel;assembly=FlipPanel">
 
  <ControlTemplate x:Key="FlipPanel_RotateHorizontalTemplate" 
                             TargetType="local:FlipPanel">
    <Grid>
     ... 
    </Grid>
  </ControlTemplate>
 
  <Style x:Key="FlipPanel_RotateHorizontalStyle" TargetType="local:FlipPanel">
    <Setter Property="Template" 
            Value="{StaticResource FlipPanel_RotateHorizontalTemplate}"/>
  </Style>
 
</ResourceDictionary>
  

* FlipPanel Project, Themes\DropDownTheme.xaml

<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:FlipPanel;assembly=FlipPanel">
 
  <ControlTemplate x:Key="FlipPanel_DropDownTemplate" 
                         TargetType="local:FlipPanel">
    <Grid>
     ... 
    </Grid>
  </ControlTemplate>
 
  <Style x:Key="FlipPanel_DropDownStyle" TargetType="local:FlipPanel">
    <Setter Property="Template" 
            Value="{StaticResource FlipPanel_DropDownTemplate}"/>
  </Style>
 
</ResourceDictionary>
  

* FlipPanel.Silverlight.Demo project, FlipPanelTest.xaml

<UserControl x:Class="FlipPanelTest.FlipPanelTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:flip="clr-namespace:FlipPanel;assembly=FlipPanel" >
 
  <UserControl.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary 
             Source="/FlipPanel;component/Themes/RotateHorizontalTheme.xaml" />
        <ResourceDictionary 
                     Source="/FlipPanel;component/Themes/DropDownTheme.xaml" />        
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </UserControl.Resources>
 
  <Grid x:Name="LayoutRoot" Background="White" Width="400">
 
    <Grid.RowDefinitions>
      <RowDefinition Height="300"></RowDefinition>
      <RowDefinition Height="300"></RowDefinition>
    </Grid.RowDefinitions>
 
    <flip:FlipPanel x:Name="panel1" Grid.Row="0" BorderBrush="DarkOrange"
         BorderThickness="3"
         CornerRadius="4" Margin="10" Background="White" 
         Template="{StaticResource FlipPanel_DropDownTemplate}" > 
                <!-- Style="{StaticResource FlipPanel_DropDownStyle}" -->
      <flip:FlipPanel.FrontContent>
        <StackPanel Margin="6">
          <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" 
            Foreground="DarkOrange"
            >This is the front side of the FlipPanel.</TextBlock>
          <Button Margin="3" Padding="3" Content="Button One"></Button>
          <Button Margin="3" Padding="3" Content="Button Two"></Button>
          <Button Margin="3" Padding="3" Content="Button Three"></Button>
          <Button Margin="3" Padding="3" Content="Button Four"></Button>
        </StackPanel>
      </flip:FlipPanel.FrontContent>
      <flip:FlipPanel.BackContent>
        <Grid Margin="6">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition></RowDefinition>
          </Grid.RowDefinitions>
          <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" 
                  Foreground="DarkMagenta"
                >This is the back side of the FlipPanel.</TextBlock>
          <Button Grid.Row="2" Margin="3" Padding="10" 
              Content="Flip Back to Front" HorizontalAlignment="Center" 
              VerticalAlignment="Center" Click="cmdFlip1_Click"></Button>
        </Grid>
      </flip:FlipPanel.BackContent>
    </flip:FlipPanel>
 
    <flip:FlipPanel x:Name="panel2" Grid.Row="1" BorderBrush="DarkOrange" 
         BorderThickness="3"
         CornerRadius="4" Margin="10" Background="White" 
         Template="{StaticResource FlipPanel_RotateHorizontalTemplate}" >
              <!-- Style="{StaticResource FlipPanel_RotateHorizontalStyle}" -->
      <flip:FlipPanel.FrontContent>
        <StackPanel Margin="6">
          <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" 
                   Foreground="DarkOrange"
                    >This is the front side of the FlipPanel.</TextBlock>
          <Button Margin="3" Padding="3" Content="Button One"></Button>
          <Button Margin="3" Padding="3" Content="Button Two"></Button>
          <Button Margin="3" Padding="3" Content="Button Three"></Button>
          <Button Margin="3" Padding="3" Content="Button Four"></Button>
        </StackPanel>
      </flip:FlipPanel.FrontContent>
      <flip:FlipPanel.BackContent>
        <Grid Margin="6">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition></RowDefinition>
          </Grid.RowDefinitions>
          <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" 
                  Foreground="DarkMagenta"
                      >This is the back side of the FlipPanel.</TextBlock>
          <Button Grid.Row="2" Margin="3" Padding="10" 
                  Content="Flip Back to Front" HorizontalAlignment="Center" 
                  VerticalAlignment="Center" Click="cmdFlip2_Click"></Button>
        </Grid>
      </flip:FlipPanel.BackContent>
    </flip:FlipPanel>

    <flip:FlipPanel x:Name="panel3" Grid.Row="2" BorderBrush="DarkOrange" 
         BorderThickness="3"
         CornerRadius="4" Margin="10" Background="White" > 
                   <!-- using default style here -->
      <flip:FlipPanel.FrontContent>
        <StackPanel Margin="6">
          <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" 
                   Foreground="DarkOrange"
                    >This is the front side of the FlipPanel.</TextBlock>
          <Button Margin="3" Padding="3" Content="Button One"></Button>
          <Button Margin="3" Padding="3" Content="Button Two"></Button>
          <Button Margin="3" Padding="3" Content="Button Three"></Button>
          <Button Margin="3" Padding="3" Content="Button Four"></Button>
        </StackPanel>
      </flip:FlipPanel.FrontContent>
      <flip:FlipPanel.BackContent>
        <Grid Margin="6">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition></RowDefinition>
          </Grid.RowDefinitions>
          <TextBlock TextWrapping="Wrap" Margin="3" FontSize="16" 
                  Foreground="DarkMagenta"
                      >This is the back side of the FlipPanel.</TextBlock>
          <Button Grid.Row="2" Margin="3" Padding="10" 
                  Content="Flip Back to Front" HorizontalAlignment="Center" 
                  VerticalAlignment="Center" Click="cmdFlip2_Click"></Button>
        </Grid>
      </flip:FlipPanel.BackContent>
    </flip:FlipPanel>




</Grid>
</UserControl>

 

Note that I decided to prefix names with "FlipPanel_", not sure if there’s some better way (using XAML namespaces somehow) to avoid any conflicts when merging the dictionaries and resolving the resouces with "{StaticResource …}"

Also note that in each theme file I also provide a Style (that sets the corresponding Template property of the FlipPanel conrol) that one can use instead of using the Template directly. At that Style more FlipPanel control properties could be set to values appropriate for that template (the template defines a skeleton and the style dresses the pirate [skeleton] as somebody cleverly pointed out).

Note that Generic.xaml merges and uses the templat from one of the themes. Couldmake copies of files similar to Generic.xaml and reference the same template but with different values in the Style for other properties to make variations without resorting to Copy/Paste when multiple Themes use the same Template but restyle it a bit.

Another important note is that at Generic.xaml you must not use x:Key="FlipPanel_DefaultStyle" or anyother key at the default style, or the command

        public FlipPanel()
        {
            DefaultStyleKey = typeof(FlipPanel);
        }

won’t load the default style (which is needed when you don’t provide a Template or Style value at the consumer XAML (FlipPanelTest.xaml). Probably one can modify it to load a style by name instead of just by type (probably the issue was that it found multiple named styles applying to that type [both FlipPanel_RotateHorizontalStyle and FlipPanel_DefaultStyle] in the Generic.xaml), but removing the Key and using an unnamed style seems to do the trick.