locked
How do I create a hover frame for a border control in Expression Blend? RRS feed

  • Question

  • I have tried the following:

    <Border x:Name="myBorder" BorderBrush="Transparent" BorderThickness="3" Margin="0,38,0,234" Width="450" Height="200" Background="Transparent">
    	<VisualStateManager.VisualStateGroups>
    		<VisualStateGroup>
    			<Storyboard x:Name="BorderEnter">
    				<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="myBorder">
    					<EasingColorKeyFrame KeyTime="0" Value="Transparent"/>
    					<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFFFFFFF"/>
    				</ColorAnimationUsingKeyFrames>
    			</Storyboard>
    			<Storyboard x:Name="BorderLeave">
    				<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="myBorder">
    					<EasingColorKeyFrame KeyTime="0" Value="#FFFFFFFF"/>
    					<EasingColorKeyFrame KeyTime="0:0:0.2" Value="Transparent"/>
    				</ColorAnimationUsingKeyFrames>
    			</Storyboard>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>
    	<i:Interaction.Triggers>
    		<i:EventTrigger EventName="MouseLeave">
    			<ei:GoToStateAction StateName="BorderLeave" TargetName="myBorder"/>
    		</i:EventTrigger>
    		<i:EventTrigger EventName="MouseEnter">
    			<ei:GoToStateAction StateName="BorderEnter" TargetName="myBorder"/>
    		</i:EventTrigger>
    	</i:Interaction.Triggers>
    	<TextBlock Margin="35,30,35,79" TextWrapping="Wrap" Foreground="White" FontWeight="Bold" FontSize="18.667"><Run Text="Hello"/><LineBreak/><Run Text="I am a textblock that lives inside a border..."/><LineBreak/><Run/><LineBreak/><Run/></TextBlock>
    </Border>
    

    But nothing happens. Any ideas?

    Thanks

    Henrik Skak Pedersen

    Tuesday, March 6, 2012 8:13 AM

Answers

  • The issue may be with activating the states when they are attached to the Border instead of at a top level in your UserControl. You could try adding the states via the Blend UI and activating those states instead, they should be placed in a compatible location.
    Tuesday, March 6, 2012 1:42 PM
    Moderator
  • Ah, I just had to add a level above the border like this:

        <Grid x:Name="LayoutRoot" Background="Red">
        	<VisualStateManager.VisualStateGroups>
        		<VisualStateGroup x:Name="VisualStateGroup">
        			<VisualStateGroup.Transitions>
        				<VisualTransition GeneratedDuration="0" To="VisualState"/>
        			</VisualStateGroup.Transitions>
                    <VisualState x:Name="BorderEnter">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="myBorder">
                                <EasingColorKeyFrame KeyTime="0" Value="Transparent"/>
                                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFFFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="BorderLeave">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="myBorder">
                                <EasingColorKeyFrame KeyTime="0" Value="#FFFFFFFF"/>
                                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="Transparent"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
        	</VisualStateManager.VisualStateGroups>
        	<Grid.RowDefinitions>
        		<RowDefinition Height="0.655*"/>
        		<RowDefinition Height="0.345*"/>
        	</Grid.RowDefinitions>
            <Border x:Name="myBorder" BorderBrush="Transparent"  BorderThickness="3" Margin="0,39,0,70" Width="450" Height="200" Background="Transparent">
                <i:Interaction.Triggers>
                	<i:EventTrigger EventName="MouseEnter">
                		<ei:GoToStateAction StateName="BorderEnter" />
                	</i:EventTrigger>
                	<i:EventTrigger EventName="MouseLeave">
                		<ei:GoToStateAction StateName="BorderLeave" />
                	</i:EventTrigger>
                </i:Interaction.Triggers>
                <TextBlock Margin="35,30,35,79" TextWrapping="Wrap" Foreground="White" FontWeight="Bold" FontSize="18.667"><Run Text="Hello"/><LineBreak/><Run Text="I am a textblock that lives inside a border..."/><LineBreak/><Run/><LineBreak/><Run/></TextBlock>
            </Border>
        </Grid>

    Tuesday, March 6, 2012 2:56 PM

All replies

  • I am btw using Silverlight 5.
    Tuesday, March 6, 2012 8:14 AM
  • The issue may be with activating the states when they are attached to the Border instead of at a top level in your UserControl. You could try adding the states via the Blend UI and activating those states instead, they should be placed in a compatible location.
    Tuesday, March 6, 2012 1:42 PM
    Moderator
  • Ah, I just had to add a level above the border like this:

        <Grid x:Name="LayoutRoot" Background="Red">
        	<VisualStateManager.VisualStateGroups>
        		<VisualStateGroup x:Name="VisualStateGroup">
        			<VisualStateGroup.Transitions>
        				<VisualTransition GeneratedDuration="0" To="VisualState"/>
        			</VisualStateGroup.Transitions>
                    <VisualState x:Name="BorderEnter">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="myBorder">
                                <EasingColorKeyFrame KeyTime="0" Value="Transparent"/>
                                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFFFFFFF"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="BorderLeave">
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="myBorder">
                                <EasingColorKeyFrame KeyTime="0" Value="#FFFFFFFF"/>
                                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="Transparent"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
        	</VisualStateManager.VisualStateGroups>
        	<Grid.RowDefinitions>
        		<RowDefinition Height="0.655*"/>
        		<RowDefinition Height="0.345*"/>
        	</Grid.RowDefinitions>
            <Border x:Name="myBorder" BorderBrush="Transparent"  BorderThickness="3" Margin="0,39,0,70" Width="450" Height="200" Background="Transparent">
                <i:Interaction.Triggers>
                	<i:EventTrigger EventName="MouseEnter">
                		<ei:GoToStateAction StateName="BorderEnter" />
                	</i:EventTrigger>
                	<i:EventTrigger EventName="MouseLeave">
                		<ei:GoToStateAction StateName="BorderLeave" />
                	</i:EventTrigger>
                </i:Interaction.Triggers>
                <TextBlock Margin="35,30,35,79" TextWrapping="Wrap" Foreground="White" FontWeight="Bold" FontSize="18.667"><Run Text="Hello"/><LineBreak/><Run Text="I am a textblock that lives inside a border..."/><LineBreak/><Run/><LineBreak/><Run/></TextBlock>
            </Border>
        </Grid>

    Tuesday, March 6, 2012 2:56 PM