locked
Changing imagesource of a button by states (animation) RRS feed

  • Question

  • Hi,

    Is there anyway to change the background of a button by a storyboard?

    So far, i'm setting the border background of a button with a imagebrush, and the rest of the button is transperant, but the problem occurs when I want to change (and animate the change) changing imagebrush...

    So far my code looks like this:

    		<Style x:Key="ButtonStyle1" TargetType="Button">
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="Button">
    						<Grid>
    							<vsm:VisualStateManager.VisualStateGroups>
    								<vsm:VisualStateGroup x:Name="CommonStates">
    									<vsm:VisualState x:Name="Normal">
    										<Storyboard/>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="MouseOver">
    										<Storyboard>
    											<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="borderbg" Storyboard.TargetProperty="(Border.Background).(ImageBrush.ImageSource)">
    												<SplineColorKeyFrame KeyTime="00:00:00" Value="Images/arrow-nohover.png"/>
    												<SplineColorKeyFrame KeyTime="00:00:00.6000000" Value="Images/arrow-hover.png"/>
    											</ColorAnimationUsingKeyFrames>
    
    										</Storyboard>
    									</vsm:VisualState>
    									<vsm:VisualState x:Name="Pressed">
    										<Storyboard>
    											
    										</Storyboard>
    									</vsm:VisualState>
    									
    								</vsm:VisualStateGroup>
    							</vsm:VisualStateManager.VisualStateGroups>
    							<Border x:Name="borderbg" CornerRadius="3">
                                    <Border.Background>
                                        <ImageBrush ImageSource="Images/arrow-nohover.png" />
                                    </Border.Background>
                                    <Grid Margin="1" x:Name="grid" Height="20"/>
                                </Border>
    							<Rectangle x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Fill="#FFFFFFFF" RadiusX="3" RadiusY="3"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    --
    <Button x:Name="btnBlogShow" Height="20" Style="{StaticResource ButtonStyle1}"/>

     

    I get an error when i try to hover the image, and it looks like this:
    Error: Unhandled Error in Silverlight 2 Application ClientBin/TestProject.xap
    Code: 4001   
    Category: ImageError      
    Message: AG_E_NETWORK_ERROR  

    Thanks in advance,

    Deani

    Tuesday, November 11, 2008 3:38 AM

Answers

  •  I have edited the previous Post. :).When You use ColorAnimation it need to be applied to a Color.

    The alternate way is to have tow images present all the time but change the opacity of them accordingly.

    Tuesday, November 11, 2008 3:54 AM

All replies

  • You can not change your image in that way from the animation. What you can do is to have two borders with different images and change the opacity of the borders accordingly.

    Tuesday, November 11, 2008 3:46 AM
  • What is the alternative? Can it be done without backend (C#?)??

    Tuesday, November 11, 2008 3:49 AM
  • Hi, once got that error because the image location that was set in style was throwing it. Remove the image and see if the error goes away or not.

    If this post was helpful then please 'Mark as Answer'

    Sharker Khaleed Mahmud (MCPD)

    Tuesday, November 11, 2008 3:52 AM
  •  I have edited the previous Post. :).When You use ColorAnimation it need to be applied to a Color.

    The alternate way is to have tow images present all the time but change the opacity of them accordingly.

    Tuesday, November 11, 2008 3:54 AM