locked
Problem with setting background image for different states of a button RRS feed

  • Question

  • Hello,

    I want to put different images(png) for the different normal and clicked and disabled state.But every time i try to edit the button template to put the different images, the background is set to only one of them.

    Ie the image does not change for the pressed state. Though the same thing is possible when i try with colors. Im able to set different colors for the different state but not images.

    Could someone give me step by step guidance this? May be Im goin wrong some where while setting the images. Every time a state is pressed i see the recording status and i put a differnt image using the tile brush. Is this how we do it??


    Or should i try setting it by code.

    Alfah


    Alfahisham
    • Edited by Alfahisham Wednesday, November 30, 2011 9:50 AM
    Wednesday, November 30, 2011 6:30 AM

All replies

  • Silverlight or WPF?  Could you post the xaml of what you tried?
    Wednesday, November 30, 2011 4:20 PM
    Moderator
  • Have you added all your images then gone through (with recording on) and set the visibility for each image based on its state so they aren't all visible on all states?

    e.g.

    Normal State = Img1 (Visible), Img2 (Collapsed), Img3 (Collapsed), Img4 (Collapsed)

    Mouseover State = Img1 (Collapsed), Img2 (Visible), Img3 (Collapsed), Img4 (Collapsed)

    etc?

    Wednesday, November 30, 2011 4:35 PM
  • KS BlendDesigner

     

    No i havn done the collapsing thing. How do i add all the three images as background for a button template. I can add only one of them right?

     


    Alfahisham
    Thursday, December 1, 2011 5:46 AM
  • The process is different for Silverlight and WPF, so which platform are you targeting?
    Thursday, December 1, 2011 5:54 AM
    Moderator
  • Chuck,

    The app is for windows phone Mango. Ive done most of the coding through Silverlight. And for those design tweekin I use blend. eg, for applyin custum fonts, applyin font size, background for some elements are set dynammically through code but for the rest of them, Blend was easier :)

     

     

     


    Alfahisham
    Thursday, December 1, 2011 5:59 AM
  • Basically you want to open your template up in Blend.  Put all the images you want to use in the container.

    The image you want to be visible for the normal button state, set to "Visible".  Set the rest to collapsed.

    Then in your states panel highlight the state you want to edit.  Example... "Pressed".  Then just change the image you want to show to Visible and the others to Collapsed.

    If you'd rather do it in the code behind, I'm sure you could change the image source for the image in the button template based on the current state the button is in.  But the Blend way is much easier.

    Oh and right-click the button in your Objects and Timeline panel and then Edit Template to... well... edit the template. :)  I always do edit a copy unless it is already a template I've made.

    Sample xaml...

    <Style x:Key="myButtonStyle" TargetType="Button">
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="Button">
    						<Grid>
    							<VisualStateManager.VisualStateGroups>
    								<VisualStateGroup x:Name="CommonStates">
    									<VisualState x:Name="Disabled"/>
    									<VisualState x:Name="Normal"/>
    									<VisualState x:Name="MouseOver"/>
    									<VisualState x:Name="Pressed">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Collapsed</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Visible</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<Image x:Name="image" Source="images/btnImage1.png" Stretch="Fill"/>
    							<Image x:Name="image1" Margin="0" Source="images/btnImage2.png" Stretch="Fill" Width="50" Height="50" Visibility="Collapsed"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>

     

    Good Luck.  Hope it all works effortlessly for you.

    ~Christine




    • Edited by Christine L. _ Friday, December 2, 2011 1:26 AM Grabbed the wrong button style.
    • Proposed as answer by Brian Hilstrom Monday, December 5, 2011 1:57 PM
    Friday, December 2, 2011 1:20 AM