Button Style works at runtime but Visual Studio shows errors at design time

Question

I'm using the following Class and DependencyProperty to allow a style to set an image for a Button:

public static class ImageButton
{
    public static readonly DependencyProperty ImageProperty = 
                  DependencyProperty.RegisterAttached("Image", typeof(ImageSource), typeof(ImageButton),
                                                                                                    new FrameworkPropertyMetadata((ImageSource)null));
    public static ImageSource GetImage(DependencyObject obj)
    {
        return (ImageSource)obj.GetValue(ImageProperty);
    }

    public static void SetImage(DependencyObject obj, ImageSource value)
    {
        obj.SetValue(ImageProperty, value);
    }
}

I've defined the following Style (in ImageButton.xaml):

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:vcontrols="clr-namespace:Vialis.Led.LedControl5.Controls">

    <ControlTemplate x:Key="ImageButtonTemplate" TargetType="Button">
        <Image  Source="{Binding Path=(vcontrols:ImageButton.Image),
                                 RelativeSource={RelativeSource FindAncestor,
                                 AncestorType={x:Type Button}}}"
                Width="{TemplateBinding Width}" 
                Height="{TemplateBinding Height}" 
                Stretch="Fill"
                RenderTransformOrigin="0.5, 0.5">
            <Image.Resources>
                <Storyboard x:Key="ShrinkStoryboard">
                    <DoubleAnimation Storyboard.TargetName="ImageScale" 
                                                Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                                To="0.8"
                                                Duration="0:0:0.15"
                                                AutoReverse="False"/>
                    <DoubleAnimation Storyboard.TargetName="ImageScale" 
                                                Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                                To="0.8"
                                                Duration="0:0:0.15"
                                                AutoReverse="False"/>
                </Storyboard>
                <Storyboard x:Key="GrowStoryboard">
                    <DoubleAnimation Storyboard.TargetName="ImageScale" 
                                                Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                                To="1.0"
                                                Duration="0:0:0.15"
                                                AutoReverse="False"/>
                    <DoubleAnimation Storyboard.TargetName="ImageScale" 
                                                Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                                To="1.0"
                                                Duration="0:0:0.15"
                                                AutoReverse="False"/>
                </Storyboard>
            </Image.Resources>
            <Image.RenderTransform>
                <ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1" CenterX="1" CenterY="1"/>
            </Image.RenderTransform>

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Pressed" Storyboard="{StaticResource ShrinkStoryboard}"/>
                    <VisualState x:Name="MouseOver" Storyboard="{StaticResource GrowStoryboard}"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Image>
    </ControlTemplate>

    <Style x:Key="ImageButtonStyle" TargetType="Button">
        <Setter Property="Opacity" Value="0.5"/>
        <Setter Property="Template" Value="{StaticResource ImageButtonTemplate}"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Opacity" Value="1"/>
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>

And finally in order to use it I have something like this:

<Button Width="32"
        Height="32"
        Style="{StaticResource ImageButtonStyle}"
        vcontrols:ImageButton.Image="/Images/someimage.png"/>

When I compile and execute the application everything works just fine. The button gets an image and uses the animations defined in the Style.

At design time however, Visual Studio cannot seem to visualize it and the XAML editor shows squiggly lines under the entire button definition.

The error information says:

Prefix 'vcontrols' does not map to a namespace.

It's refering to the use of vcontrols in the Style. If you change the name there, the error will change as well, so it's not related to the name chosen in the Window/UserControl that is using the Button.

What might be causing this and is there a way to fix it so it works at design time as well?

Answer 1

Update 2:

This issue was only with VS2012 designer (in VS2010 it works fine) and it is already fixed in Visual Studio 2012 Update 3 patch.