views:

29

answers:

0

Hi, I am totally lost and I would really appreciate your help on this.

My final goal is to create a user control that will contain two control templates. Square and a Circle. Based on a type the control will display one or the other. When the mouse enters the shape the Opacity will change to 0.2.

The first part works but the Opacity does not change. The event is triggered and a GoToState is called, but with no result. The Opacity stays 1.

My XAML:

<UserControl.Resources>

    <ControlTemplate x:Key="TemplateSquare" TargetType="{x:Type local:KeyControl}">

        <Canvas x:Name="MainCanvas" VerticalAlignment="Center" HorizontalAlignment="Center">

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="CenterRectangle" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0" To=".2"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Rectangle x:Name="CenterRectangle" Fill="Red" Width="100" Height="100"></Rectangle>

        </Canvas>

    </ControlTemplate>    
</UserControl.Resources> 
<!-- IF I MOVE THE CANVAS HERE THE OPACITY CHANGES ON MOUSE OVER -->

Codebehind:

public partial class KeyControl : UserControl
{
    private bool _isPressed = false;
    private bool _isMouseOver = false;

    public KeyControl()
    {
        InitializeComponent();

        this.Loaded += new RoutedEventHandler(KeyControl_Loaded);
    }


    private void KeyControl_Loaded(object sender, RoutedEventArgs e)
    {
        //this will be set in the Type setter
        this.Template = this.FindResource("TemplateSquare") as ControlTemplate;

        this.MouseEnter += new MouseEventHandler(CorePart_MouseEnter);
        this.MouseLeave += new MouseEventHandler(CorePart_MouseLeave);

        GoToState(false);
    }

    private void GoToState(bool useTransitions)
    {
        if (_isPressed)
            VisualStateManager.GoToState(this, "Pressed", useTransitions);
        else if (_isMouseOver)
            VisualStateManager.GoToState(this, "MouseOver", useTransitions);
        else
            VisualStateManager.GoToState(this, "Normal", useTransitions);
    }

    private void CorePart_MouseLeave(object sender, MouseEventArgs e)
    {
        _isMouseOver = false;
        GoToState(true);
    }

    private void CorePart_MouseEnter(object sender, MouseEventArgs e)
    {
        _isMouseOver = true;
        GoToState(true);
    }
}

Can somebody please tell me where the problem could be?

Thank You