CODEWITHSUNDEEP
c#xamlwin-universal-app
TorbenJ
TorbenJ

Reputation: 4582

VisualStateManager not working in Universal App

I'm currently working on a Windows Universal App and I defined a UserControl called IconButton

IconButton.xaml 

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="Common">
        <VisualState x:Name="MouseOver">
            <Storyboard>
                <ColorAnimation To="Red" Storyboard.TargetName="path" Storyboard.TargetProperty="(Fill).(SolidColorBrush.Color)" />
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid>
    <Path x:Name="path" Data="{x:Bind IconPathData, Mode=OneWay}" Stretch="UniformToFill" Fill="White" />
</Grid>

IconButton.xaml.cs

public sealed partial class IconButton : UserControl
{
    public static readonly DependencyProperty IconPathDataProperty = DependencyProperty.Register("IconPathData", typeof(string), typeof(IconButton), new PropertyMetadata(""));

    public string IconPathData
    {
        get { return (string)GetValue(IconPathDataProperty); }
        set { SetValue(IconPathDataProperty, value); }
    }

    public IconButton()
    {
        InitializeComponent();
    }

    private void UserControl_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
    {
        VisualStateManager.GoToState(this, MouseOver.Name, true);
    }
}

According to MSDN the GoToState method expects VisualState with the given name passed to the method. In my case there is a VisualState with x:Name="MouseOver" so GoToState should be able to find this.
Unfortunately GoToState always returns false which should only happen if it cannot find a VisualState with a given name.
I really don't know what to do to solve this. The documentation is quite straight forward and several examples from the web do it the same way as I do but they get it working.
Can you tell me what I'm doing wrong and how to fix it?

Upvotes: 0

Views: 771

Answers (1)

andreask
andreask

Reputation: 4298

Since you don't show the full content of IconButton.xaml, I assume it looks somewhat like:

<UserControl
    x:Class="App1.IconButton"
    ...
    PointerEntered="UserControl_PointerEntered">

    <VisualStateManager.VisualStateGroups>
        ...
    </VisualStateManager.VisualStateGroups>

    <Grid>
        <Path ... />
    </Grid>
</UserControl>

If so, move the VisualStateManager inside the Grid (intead of being a direkt child of UserControl:

<UserControl
    x:Class="App1.IconButton"
    ...
    PointerEntered="UserControl_PointerEntered">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="Common">
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ColorAnimation To="Red" Storyboard.TargetName="path" Storyboard.TargetProperty="(Fill).(SolidColorBrush.Color)" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Path x:Name="path" ... />
    </Grid>
</UserControl>

Upvotes: 3

Related Questions