Binding to "this.property" object in VisualStateMenager

Question

I have problems with binding to this object inside VisualStateMenager. I have XAML structure:

<DataTemplate x:Key="MenuItem">
    <Border 
        x:Name="myItem"     
        Background="{StaticResource BackgroundColor}">
        <StackPanel>
            <TextBlock Text="{Binding HeaderText}" />
            <TextBlock Text="{Binding Text}" />
        </StackPanel>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="my">
                <VisualState x:Name="active">
                    <Storyboard>
                        <ColorAnimation 
                            Storyboard.TargetName="myItem" 
                            Storyboard.TargetProperty="Background.Color"
                            To=" --- BIND TO THIS OBJECT COLOR PROPERTY ---"
                            //To="{Binding Color}" NOT WORK
                            //To="{Binding Color, ElementName=myItem}" NOT WORK
                            //To="red" WORKS
                            Duration=" 0:0:0.1"/>
                    </Storyboard>
                </VisualState>
                ...
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>
</DataTemplate>

DataContext for DataTemplate must be correct because Binding expression: {Binding HeaderText} and {Binding Text} works prefect. In the same DataContext I have one more property “Color”:

    public string HeaderText { get; set; }
    public string Text { get; set; }
    public string Color { get; set; }

I want bind "Color" to "ColorAnimation.To" inside animation, but somehow i lost my dataContext, and receive error:

System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=Color; DataItem=null; target element is 'ColorAnimation' (HashCode=60716890); target property is 'To' (type 'Nullable`1')

Also it's worth to mention that everything else is good, especially state changes. Because if I remove Binding from ColorAnimation, for example write To="red". animations works.

Answer 1

You need a converter from string to SolidColorBrush....when you specify "Red" it uses the enumerator

you can use this class

 public class StringToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var strValue = value as string;

        if (string.IsNullOrEmpty(strValue)) return null;

        Color color = Colors.Transparent;

        try
        {
            color = (Color)ColorConverter.ConvertFromString(strValue);
        }
        catch
        {


        }
        return color;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        try
        {
            var color = (Color)value;

            if (color == null) return Colors.Transparent.ToString();

            return color.ToString();
        }
        catch 
        {

            return Colors.Transparent.ToString();
        }

    }
}