Exception occurs on EditableTemplate.

[Inseok]

Hi.
I've added a RadComboBox in clean-new project, and Edit Additional Templates > Edit EditableTemplate > Edit a copy.
It's fine. But If I choose Normal State to modify VisualState, then Expression Blend throw the exception follow:

InvalidOperationException: An animation is trying to modify an object named 'MouseOverVisual', but no such object can be found in the Grid.

It's so strange cause I didn't edit anything else.
Here's the XAML.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:Telerik_Windows_Controls_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    mc:Ignorable="d"
    x:Class="RadComboBoxTheming.UserControl1"
    d:DesignWidth="640" d:DesignHeight="480">

    <UserControl.Resources>
        <SolidColorBrush x:Key="PickerBackground_Normal" Color="#FFFFFFFF" />
        <CornerRadius x:Key="SplitButton_LeftPartCornerRadius">1 0 0 1</CornerRadius>
        <CornerRadius x:Key="SplitButton_SpanCornerRadius">1</CornerRadius>
        <SolidColorBrush x:Key="ControlOuterBorder_MouseOver" Color="#FFFFC92B" />
        <telerik:Office_BlackTheme x:Key="Theme" />
        <SolidColorBrush x:Key="ControlOuterBorder_Focused" Color="#FFFFC92B" />
        <SolidColorBrush x:Key="ControlInnerBorder_Focused" Color="Transparent" />
        <CornerRadius x:Key="SplitButton_SpanInnerCornerRadius">0</CornerRadius>
        <CornerRadius x:Key="SplitButton_RightPartCornerRadius">0 1 1 0</CornerRadius>
        <SolidColorBrush x:Key="ButtonIconBackground_Normal" Color="#FFFFFFFF" />
        <SolidColorBrush x:Key="ButtonIconForeground_Normal" Color="#FF000000" />
        <ControlTemplate x:Key="ArrowTemplateEditableCombobox" TargetType="ContentControl">
            <Grid Margin="5 0">
                <Path x:Name="BackgroundIcon" Data="M0,0 L2,0 1,1 Z" Stretch="Fill" Width="5" Height="3" Fill="{TemplateBinding Background}" Margin="0 2 0 0" />
                <Path x:Name="ForegroundIcon" Data="M0,0 L2,0 1,1 Z" Stretch="Fill" Width="5" Height="3" Fill="{TemplateBinding Foreground}" Margin="0 1 0 1" />
            </Grid>
        </ControlTemplate>
        <SolidColorBrush x:Key="PickerPopupBackground" Color="#FFFFFFFF" />

        <SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FF989898" />
        <SolidColorBrush x:Key="PickerForeground_Disabled" Color="#FF8D8D8D" />
        <SolidColorBrush x:Key="ButtonIconForeground_Disabled" Color="#FF8D8D8D" />
        <SolidColorBrush x:Key="ButtonIconBackground_Disabled" Color="#FFFFFFFF" />
        <SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFE0E0E0" />
        <SolidColorBrush x:Key="ButtonIconForeground_MouseOver" Color="#FF000000" />
        <SolidColorBrush x:Key="ButtonIconBackground_MouseOver" Color="#FFFFFFFF" />
        <LinearGradientBrush x:Key="ControlOuterBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF282828"/>
            <GradientStop Color="#FF5F5F5F" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ButtonIconForeground_Pressed" Color="#FF000000" />
        <SolidColorBrush x:Key="ButtonIconBackground_Pressed" Color="#FFFFFFFF" />
<!--EditableComboBox-->
        <ControlTemplate x:Key="RadComboBoxControlTemplate1" TargetType="telerik:RadComboBox">

            <Grid x:Name="VisualRoot">

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Disabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity">
                                    <LinearDoubleKeyFrame KeyTime="0:0:0.050" Value="0" />
                                </DoubleAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.050">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonChrome" Storyboard.TargetProperty="RenderEnabled">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <System:Boolean>False</System:Boolean>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource PickerForeground_Disabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconForeground_Disabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconBackground_Disabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlBackground_Disabled}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity">
                                    <LinearDoubleKeyFrame KeyTime="0:0:0.150" Value="0" />
                                </DoubleAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.150">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonChrome" Storyboard.TargetProperty="RenderActive">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <System:Boolean>True</System:Boolean>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity">
                                    <LinearDoubleKeyFrame KeyTime="0:0:0.115" Value="1" />
                                </DoubleAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconForeground_MouseOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconBackground_MouseOver}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="DropDownOpen">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Pressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity">
                                    <LinearDoubleKeyFrame KeyTime="0:0:0.050" Value="0" />
                                </DoubleAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.050">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconForeground_Pressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconBackground_Pressed}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonChrome"
                                    Storyboard.TargetProperty="RenderFocused">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <System:Boolean>True</System:Boolean>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"
                                    Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unfocused" />
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="ValidationStates">
                        <VisualState x:Name="Valid"/>
                        <VisualState x:Name="InvalidUnfocused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationTooltip"
                                    Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="InvalidFocused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="ValidationTooltip"
                                    Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetName="ValidationTooltip"
                                    Storyboard.TargetProperty="IsOpen">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <System:Boolean>True</System:Boolean>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="WatermarkStates">
                        <VisualState x:Name="WatermarkVisible">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Watermark" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="WatermarkInvisible" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>


                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Border x:Name="Background" Grid.Column="0" IsHitTestVisible="False" Background="{StaticResource PickerBackground_Normal}" CornerRadius="{StaticResource SplitButton_LeftPartCornerRadius}" />
                <Border Grid.ColumnSpan="2" IsHitTestVisible="False" Background="{TemplateBinding Background}" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" />
                <Border x:Name="Border" Grid.ColumnSpan="2" IsHitTestVisible="False" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" />
                <Border x:Name="MouseOverVisual" Grid.ColumnSpan="2" IsHitTestVisible="False" BorderBrush="{StaticResource ControlOuterBorder_MouseOver}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" Visibility="Collapsed" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" />

                <telerik:PickerTextBox x:Name="PART_EditableTextBox"
                    Grid.Column="0"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}"
                    Background="{TemplateBinding Background}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    IsReadOnly="{TemplateBinding IsReadOnly}"
                    telerik:StyleManager.Theme="{StaticResource Theme}" />

                <Border x:Name="FocusVisual" Visibility="Collapsed" Grid.ColumnSpan="2" IsHitTestVisible="False" BorderBrush="{StaticResource ControlOuterBorder_Focused}" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" BorderThickness="{TemplateBinding BorderThickness}" >
                    <Border BorderBrush="{StaticResource ControlInnerBorder_Focused}" CornerRadius="{StaticResource SplitButton_SpanInnerCornerRadius}" BorderThickness="{TemplateBinding BorderThickness}" />
                </Border>

                <telerik:RadToggleButton x:Name="PART_DropDownButton" Margin="0" Padding="0"
                    Grid.Column="1" IsTabStop="False" ClickMode="Press" telerik:StyleManager.Theme="{StaticResource Theme}">

                    <telerik:RadToggleButton.Template>
                        <ControlTemplate TargetType="telerik:RadToggleButton">
                            <ContentPresenter />
                        </ControlTemplate>
                    </telerik:RadToggleButton.Template>

                    <Grid>
                        <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ButtonChrome"
                            telerik:StyleManager.Theme="{StaticResource Theme}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            RenderPressed="{TemplateBinding IsDropDownOpen}"
                            RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}"
                            CornerRadius="{StaticResource SplitButton_RightPartCornerRadius}"

                            RenderFocused="{TemplateBinding IsFocused}"

                             />

                        <ContentControl x:Name="DropDownIcon"
                            Grid.Column="1" IsTabStop="False"
                            Foreground="{StaticResource ButtonIconForeground_Normal}"
                            Background="{StaticResource ButtonIconBackground_Normal}"
                            Template="{StaticResource ArrowTemplateEditableCombobox}" />
                    </Grid>
                </telerik:RadToggleButton>

                <TextBlock x:Name="Watermark" Text="{TemplateBinding EmptyText}" Opacity=".5" IsHitTestVisible="False"
                    VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0" Visibility="Collapsed" />


                <Telerik_Windows_Controls_Chromes:ValidationTooltip x:Name="ValidationTooltip"
                    Grid.ColumnSpan="2" Visibility="Collapsed"
                    telerik:StyleManager.Theme="{StaticResource Theme}"
                    TooltipPlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" TooltipContent="{Binding (Validation.Errors), RelativeSource={RelativeSource TemplatedParent}}"/>




                <telerik:Popup Owner="{Binding RelativeSource={RelativeSource TemplatedParent}}" CloseOnOutsideClick="True"
                    IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">


                    <Grid x:Name="PopupRoot">
                        <Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}" Margin="0 0 0 3" />

                        <Border BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            MinWidth="{TemplateBinding MinDropDownWidth}"
                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
                            Background="{StaticResource PickerPopupBackground}"
                            CornerRadius="{StaticResource SplitButton_SpanCornerRadius}"
                            Margin="0 0 0 3"
                         >

                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>

                                <telerik:RadButton x:Name="PART_ClearButton" Grid.Row="0"
                                    Margin="-1 -1 -1 0"
                                    Visibility="{TemplateBinding ClearSelectionButtonVisibility}"
                                    Content="{TemplateBinding ClearSelectionButtonContent}"
                                    telerik:StyleManager.Theme="{StaticResource Theme}" />

                                <ScrollViewer x:Name="PART_ScrollViewer" Grid.Row="1"
                                    Padding="0 1 0 0" BorderThickness="0"
                                    VerticalScrollBarVisibility="Auto"
                                    telerik:StyleManager.Theme="{StaticResource Theme}"

                                    telerik:ScrollViewerExtensions.EnableMouseWheel="True"

                                 >

                                    <ItemsPresenter />

                                </ScrollViewer>
                            </Grid>
                        </Border>

                    </Grid>



                </telerik:Popup>

            </Grid>


        </ControlTemplate>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <telerik:RadComboBox HorizontalAlignment="Left" VerticalAlignment="Top" Width="259" Margin="19,33,0,0" EditableTemplate="{StaticResource RadComboBoxControlTemplate1}"/>
    </Grid>
</UserControl>

I'm currently using Q1 SP1(2011.1.419.1040).
Is there any chance to get the things right? 

Regards,
Inseok

[Dani]

Hi Inseok,

We were able to reproduce the design-time issue. I believe this is an Expression Blend issue, since the Border in question is present in the control template:

<Border x:Name="MouseOverVisual" Grid.ColumnSpan="2"
               IsHitTestVisible="False" BorderBrush="{StaticResource ControlOuterBorder_MouseOver}"
                BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" Visibility="Collapsed"
                CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" />

That is why I suggest that you manually make any customizations to the MouseOver state of RadComboBox. The state basically animates the visibility of this Border, so to customize the state you simply need to customize the Border by changing the Background or BorderBrush brushes or any other property of the Brush.

I hope this helps.

Greetings,
Dani
the Telerik team