If you create something that contains the new VisualStateManager with Blend 2.5 June preview, the VS2008 with SL2B2 Tools cannot compile it.
You get the error message "The attachable property 'VisualStateGroups' was not found in type 'VisualStateManager'.".

Workaround: You can compile the project with Blend.

There are just to many new adopters to the technology to hide behind the "this is a beta" argument.
I personally expect more from Microsoft.

I played around last night to try and find some workable solution to this.

What I came up with was this.

Create your user control in a control library.
Use blend to define all visuals for this control library.
You can code in Visual studio but don't think you are going to see anything in their rendering view.
You should be able to build in visual studio. if you get a error build again else build in blend.

In visual studio you should be able to see the control render right when you use it from an assembly.
This is certainly not ideal or even close to being so, but it's a workable solution for now.

We're sorry for the inconvenience. This is a known issue that our Visual Studio team is investigating. For now, you can use Expression Blend to design the UI. Expression Blend should be able to handle VisualState very well.

shanaolanxing - I'll transfer to the Windows Azure team, and will have limited time to participate in the Silverlight forum. Apologize if I don't answer your questions in time.

Yi-Lun Luo - MSFT:

We're sorry for the inconvenience. This is a known issue that our Visual Studio team is investigating. For now, you can use Expression Blend to design the UI. Expression Blend should be able to handle VisualState very well.

Will there be a patch fix for this?  I'm trying to updates styles in App.xaml and Templates in generic.xaml and am getting the same error. 

On another note, can styles and templates in these two files be edited in Expression Blend?   I don't create UserControls that are part & parcel with the xaml attached, all examples I've seen of Blend are based on creating a UserControl with xaml and code file combined.

codism:

I think your old styles and templates are no longer good any more. It's better to recreate them in expression. I see the code generated by blend, almost everything related to style and template is under vsm namespace.

It seems the only real change is that the state storyboards have moved from resources to vsm namespace.  rather simple change to the styles.  you're correct the old styles don't work, however the vsm namespace doesn't work either.

vsm works for me. I do get the Xaml underlined on the VisualStateGroups line with that , but it compiles and works. Warning level of 4 on our Silverlight project.

Example code...

 Here is my Style from App.xaml.  The vsm namespace is defined in the Application header.  As soon as I use the vsm library in the style, my page no longer displays.

<Style x:Key="MenuButton" TargetType="Button">
    <Setter Property="Background" Value="Blue"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Width" Value="100"/>
    <Setter Property="Height" Value="40"/>
    <Setter Property="Margin" Value="10"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootElement">
                    <Grid.Resources>
                        <!--Add the constant resources here.-->
                        <LinearGradientBrush x:Key="ReflectionGradient" StartPoint="0,1" EndPoint="0,0">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="#80FFFFFF" Offset="0" />
                                <GradientStop Color="#50FFFFFF" Offset="0.5" />
                                <GradientStop Color="#80FFFFFF" Offset="0.5" />
                                <GradientStop Color="#C0FFFFFF" Offset="1" />
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>

                        <RadialGradientBrush x:Key="HighlightGradient">
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Color="#FFFFFF" Offset="0" />
                                <GradientStop Color="#AAFFFFFF" Offset="0.3" />
                                <GradientStop Color="#55FFFFFF" Offset="0.6" />
                                <GradientStop Color="Transparent" Offset="1" />
                            </RadialGradientBrush.GradientStops>
                        </RadialGradientBrush>

                        <LinearGradientBrush x:Key="FocusedStrokeBrush" StartPoint="0.5,0" EndPoint="0.5,1">
                            <GradientStop Color="#B2FFFFFF" Offset="0" />
                            <GradientStop Color="#51FFFFFF" Offset="1" />
                            <GradientStop Color="#66FFFFFF" Offset="0.325" />
                            <GradientStop Color="#1EFFFFFF" Offset="0.325" />
                        </LinearGradientBrush>

                        <SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF" />
                        <SolidColorBrush x:Key="AccentBrush" Color="#FFFFFFFF" />

                    </Grid.Resources>

                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition To="MouseOver" Duration="0:0:0.1"/>
                                <vsm:VisualTransition To="Pressed" Duration="0:0:0.1"/>
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Normal"/>
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="Highlight" Storyboard.TargetProperty="Opacity" To="1"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="Reflection" Storyboard.TargetProperty="Opacity" To="0"/>
                                    <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Highlight" Storyboard.TargetProperty="Opacity" To="1"/>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:0" Storyboard.TargetName="Disabled" Storyboard.TargetProperty="Opacity" To="1" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

                    <!--Main color of the button-->
                    <Rectangle x:Name="Base" RadiusY="9" RadiusX="2" Fill="{TemplateBinding Background}" />

                    <!--Reflection effect-->
                    <Rectangle x:Name="Reflection" RadiusY="2" RadiusX="2" Fill="{StaticResource ReflectionGradient}" />

                    <!--3D Effect-->
                    <Rectangle x:Name="BlurBorder" RadiusY="2" RadiusX="2" Stroke="#60000000" StrokeThickness="1.5" />
                    <Rectangle x:Name="ThinBorder" RadiusY="2" RadiusX="2" Stroke="#90000000" StrokeThickness="0.5" />

                    <!--Rectangles used as the FocusVisual-->
                    <Grid x:Name="FocusVisualElement" Visibility="Collapsed">
                        <Rectangle RadiusX="3" RadiusY="3" Margin="2" Stroke="{StaticResource AccentBrush}" StrokeThickness="1" />
                        <Rectangle RadiusX="3" RadiusY="3" Stroke="{TemplateBinding Background}" StrokeThickness="2" />
                    </Grid>

                    <!--Rectangle used for the MouseOver State-->
                    <Rectangle x:Name="Highlight" Opacity="0" Fill="{StaticResource HighlightGradient}" />

                    <ContentPresenter
                          Content="{TemplateBinding Content}"
                          ContentTemplate="{TemplateBinding ContentTemplate}"
                          FontFamily="{TemplateBinding FontFamily}"
                          FontSize="{TemplateBinding FontSize}"
                          FontStretch="{TemplateBinding FontStretch}"
                          FontStyle="{TemplateBinding FontStyle}"
                          FontWeight="{TemplateBinding FontWeight}"
                          Foreground="{TemplateBinding Foreground}"
                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Padding="{TemplateBinding Padding}"
                          TextAlignment="{TemplateBinding TextAlignment}"
                          TextDecorations="{TemplateBinding TextDecorations}"
                          TextWrapping="{TemplateBinding TextWrapping}"
                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                          Margin="4,5,4,4" />

                    <Rectangle x:Name="Disabled" RadiusX="4" RadiusY="4" Fill="{StaticResource DisabledBrush}" Opacity="0" IsHitTestVisible="false" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 Never fear, I found the error of my ways.  My disbaled rectange now has the same x:Name as the disabled visual state.  Rectified and fixed.  

Simlar to Harlequin, I got it working today too.  The VisualStateGroups line in the Xaml was underlined in Visual Studio with a compiler warning, but it runs and works as expected. 

To upgrade from Beta1 Control Templates to Beta2 Control Templates, I just moved the code from the "Grid.Resources" Storyboards to the "vsm" code.  Check out the SDK help file - they provide examples that you should be able to follow.  Once I understood how to wire up the "vsm" XAML, it was a fairly simple, yet annoying, conversion. 

There was some slight change in behavior with more complicated control templates, like the ToggleButton... but still, it was straightforward enough to figure out.

Steve Nyholm "snyhol"
blog: http://www.AListForEverything.com

 Hi,

 I've found another workaround to avoid the warning/error and the broken Design View inside Studio :

1. Design everything you need with Blend.
2. Comment out the VisualStateManager Part in the XAML file.
3. Create the VisualStateManager dynamically inside your code behind class

Regards,
Stefan

This is my XAML:
---------------------------

<vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="MouseOverStates">
                <vsm:VisualState x:Name="MouseEnter">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(UIElement.Opacity)">
                            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="MouseLeave">
                    <Storyboard/>
                </vsm:VisualState>
</vsm:VisualStateGroup>

This is my code:
------------------------

  Friend WithEvents vsMouseOverStates As System.Windows.VisualStateGroup

  Friend WithEvents vsMouseEnter As System.Windows.VisualState

  Friend WithEvents vsMouseLeave As System.Windows.VisualState

  Public Sub New()
    InitializeComponent()

    vsMouseOverStates = New VisualStateGroup
    vsMouseEnter = New VisualState
    vsMouseLeave = New VisualState
 
    Dim vsStoryboard As New Storyboard
    vsMouseOverStates.SetValue(NameProperty, "MouseOverStates")
    vsMouseEnter.SetValue(NameProperty, "MouseEnter")
    vsMouseLeave.SetValue(NameProperty, "MouseLeave")
    vsMouseOverStates.States.Add(vsMouseEnter)
    vsMouseOverStates.States.Add(vsMouseLeave)
    vsMouseEnter.Storyboard = vsStoryboard
    VisualStateManager.GetVisualStateGroups(LayoutRoot).Add(vsMouseOverStates)

    Dim vsDoubleAnimationUsingKeyFrames As New DoubleAnimationUsingKeyFrames
    vsDoubleAnimationUsingKeyFrames.BeginTime = New TimeSpan(0)
    vsDoubleAnimationUsingKeyFrames.Duration = New Duration(New TimeSpan(0, 0, 0, 0, 10))
    vsDoubleAnimationUsingKeyFrames.SetValue(Storyboard.TargetNameProperty, "LayoutRoot")
    vsDoubleAnimationUsingKeyFrames.SetValue(Storyboard.TargetPropertyProperty, New PropertyPath("Opacity"))
    vsStoryboard.Children.Add(vsDoubleAnimationUsingKeyFrames)

    Dim vsSplineDoubleKeyFrame As New SplineDoubleKeyFrame
    vsSplineDoubleKeyFrame.Value = 0.5
    vsSplineDoubleKeyFrame.KeyTime = KeyTime.FromTimeSpan(New TimeSpan(0))
    vsDoubleAnimationUsingKeyFrames.KeyFrames.Add(vsSplineDoubleKeyFrame)
  End Sub

Stefan

This is a interesting concept.
In theory you could then reuse the visual state you create in code in other places also.

 This was my original idea. We'll use a lot of UserControls which should have the same look & feel.

 I use a GetStateManage function to reuse my states.

Stefan

it's the same for me ..

Deep zoom does not  work very well in blend and visual studio ...

It's very strange!

Best regards, MrBean de Parisssssssssssssssss

Hi Everyone, Just wanted to clarify....

The VisualStateManager.VisualStateGroups tag does give a compile-time warning in VisualStateManager.  This error is a known tools issue, and does not affect actual compilation or runtime behavior.   (If you attempt to compile the XAML with the VisualStateManager.VisualStateGroups tag in VS, it will compile successfully and  run as expected.)

Thanks!

Karen

Hi Karen,

I see an error in the error list instead of a compile time warning:

Error 3 The attachable property 'VisualStateGroups' was not found in type 'VisualStateManager'. c:\tst\ModuleButton.xaml 8 7 CPWerxSilverlightPrototype

But you are right. Compilation and runtime behavior isn't affected. 

Thanks

Stefan

Karen Corby - MSFT:

he VisualStateManager.VisualStateGroups tag does give a compile-time warning in VisualStateManager.  This error is a known tools issue, and does not affect actual compilation or runtime behavior.   (If you attempt to compile the XAML with the VisualStateManager.VisualStateGroups tag in VS, it will compile successfully and  run as expected.)

 Not strictly true - I created a new Control Template for a button using blend, and saved it as a Button resource.

The resulting code not only had errors in VS before compiling, but after compiling they resulted in runtime errors.  Aside from the VSM issue, the reference :

<Button...>
<Button.Template><StaticResource ResourceKey="myTemplateName" /></Button.Template></Button>

Caused it to crash because the StaticResource wasn't found.

I was able to move all my ControlTemplate code into a style as one of the other posters indicated, but that's way too much work to do on a regular basis.  The code output from Blend needs to compile and run as is or Blend's utility is limited.  I hope this will be fixed before the version goes gold.

--
Anye Mercy
AnyeDotNet.blogspot.com

 sorry for necroing the thread

does RC0  fix this problem? I had huge problems upgrading to RC0, and now im back to Beta 2 w/ June Preview of expression blend

Yes, it's fixed in RC0

Stefan