none
How to take advantage of VSM without re-defining <ControlTemplate>?

    Question

  • Hi,

    I am trying to use visual state manager to change the color of a shape upon clicking a button. Very simple!

    All training materials that I found so far telling me to re-define control’s <ControlTemplate> to be able to specify <vsm:VisualStateManager.VisualStateGroups> state transitions.

    Is there any way to define transition events without specifying the <ControlTemplate>? Creating a copy of control template brings lots of unnecessary clutter in my XAML code.

    Any help would be appreciated,

    Wpf Fan

     

    Wednesday, November 12, 2008 12:28 PM

Answers

  • You can stick the VSM in the UserControl or whatever else you're hosting the rectangle in and then change that state. Here is an example:

    <Canvas>
            <vsm:VisualStateManager.VisualStateGroups>
                <vsm:VisualStateGroup x:Name="BgColor">
                    <vsm:VisualStateGroup.Transitions>
                        <vsm:VisualTransition GeneratedDuration="00:00:00.3000000"/>
                    </vsm:VisualStateGroup.Transitions>
                    <vsm:VisualState x:Name="BgRed">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="myBrush"
                                                Storyboard.TargetProperty="Color"
                                                Duration="0" To="Red" />
                        </Storyboard>
                    </vsm:VisualState>
                    <vsm:VisualState x:Name="BgBlue">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="myBrush"
                                                Storyboard.TargetProperty="Color"
                                                Duration="0" To="Blue" />
                        </Storyboard>
                    </vsm:VisualState>
                </vsm:VisualStateGroup>
            </vsm:VisualStateManager.VisualStateGroups>
            <Rectangle Canvas.Top="100" Canvas.Left="100" Width="100" Height="100" MouseLeftButtonDown="myRect_MouseLeftButtonDown">
                <Rectangle.Fill>
                    <SolidColorBrush x:Name="myBrush" Color="Red" />
                </Rectangle.Fill>
            </Rectangle>
        </Canvas>

    And then the code behind it...

      

    bool clicked = false;
    
            private void myRect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                if (!clicked)
                {
                    VisualStateManager.GoToState(this, "BgBlue", true);
                    clicked = true;
                }
                else
                {
                    VisualStateManager.GoToState(this, "BgRed", true);
                    clicked = false;
                }
            }

    Is that what you're looking for?

     

    Wednesday, November 12, 2008 1:51 PM

All replies

  • You can stick the VSM in the UserControl or whatever else you're hosting the rectangle in and then change that state. Here is an example:

    <Canvas>
            <vsm:VisualStateManager.VisualStateGroups>
                <vsm:VisualStateGroup x:Name="BgColor">
                    <vsm:VisualStateGroup.Transitions>
                        <vsm:VisualTransition GeneratedDuration="00:00:00.3000000"/>
                    </vsm:VisualStateGroup.Transitions>
                    <vsm:VisualState x:Name="BgRed">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="myBrush"
                                                Storyboard.TargetProperty="Color"
                                                Duration="0" To="Red" />
                        </Storyboard>
                    </vsm:VisualState>
                    <vsm:VisualState x:Name="BgBlue">
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="myBrush"
                                                Storyboard.TargetProperty="Color"
                                                Duration="0" To="Blue" />
                        </Storyboard>
                    </vsm:VisualState>
                </vsm:VisualStateGroup>
            </vsm:VisualStateManager.VisualStateGroups>
            <Rectangle Canvas.Top="100" Canvas.Left="100" Width="100" Height="100" MouseLeftButtonDown="myRect_MouseLeftButtonDown">
                <Rectangle.Fill>
                    <SolidColorBrush x:Name="myBrush" Color="Red" />
                </Rectangle.Fill>
            </Rectangle>
        </Canvas>

    And then the code behind it...

      

    bool clicked = false;
    
            private void myRect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                if (!clicked)
                {
                    VisualStateManager.GoToState(this, "BgBlue", true);
                    clicked = true;
                }
                else
                {
                    VisualStateManager.GoToState(this, "BgRed", true);
                    clicked = false;
                }
            }

    Is that what you're looking for?

     

    Wednesday, November 12, 2008 1:51 PM
  • Hi Bryant,Thank you for help. Can I do this task without writing code?

    I understand the promise behind VSM is helping designers do simple event handling tasks without any code.

    I have no problem with writing code, but I am trying to understand the designer aspects of Expression blend and silverlight. Thank you...WpfFan

     

    Wednesday, November 12, 2008 2:21 PM
  • I also am having this problem!  See my thread here:

     http://silverlight.net/forums/p/49069/129857.aspx#129857

    Wednesday, November 12, 2008 4:04 PM
  • I don't think you can get away without writing code. Even the nibbles tutorials use code to do this.

    The seperation between dev/designer here is that the developer is supposed to create the control and setup the visual state as well as the code to switch between the states (which is a coding task). Then the designer can come in and modify how everything looks in these states. This is a much better dev/design story than before where things would just happen in response to events and there was no explicit way to tweak the end state.

    Wednesday, November 12, 2008 7:40 PM