The following forum(s) are migrating to a new home on Microsoft Q&A (Preview): Developing Universal Windows apps!

Ask new questions on Microsoft Q&A (Preview).
Interact with existing posts until December 13, 2019, after which content will be closed to all new and existing posts.

Learn More

 none
Change the background of ListBox item in selected and mouse hover in windows phone 7 RRS feed

  • Question

  • Hi, I am in a situation where i need to display the list of users. I have used ListBox for the purpose with custom template. I wanted to post code for the listbox with template. But in preview mode i could not see the code so i removed it. The listbox is bound to datasource. Now i need to change the background and border of the item in selected and mouse hover state. This is for the page in windows phone 7. I thought i could do this easily with VisualStates but when i edit the template of the ListBox in Expression blend by clicking "Edit a copy". I don't get the visual states like selected and foucused and so on. I only get the visual states related to Validation like "InvalidUnFocused","InvalidFocused" and "Valid". Please suggest me how can i have different background and border for the listbox item in normal,mouse hover and selected states. Thanks,
    Tuesday, November 30, 2010 9:18 AM

Answers

  • To set the selected background color, you can insert the following highlighted lines into the Selected state (example for yellow background)

    <VisualState x:Name="Selected"> 
      <Storyboard>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
          <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
          <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
        </ObjectAnimationUsingKeyFrames>
      </Storyboard>
    </VisualState>

     

    If you're interested in learning more about templating a ListBox, I recommend this video: Templating Controls with Silverlight (Silverlight TV #36)

     

    ListBox doesn't have a state for mouse hover. I assume that you mean a tap-and-hold type of action, because the concept of "hovering" with the finger isn't meaningful in a ListBox on a touchscreen, where touch and drag is also used for scrolling. You can detect a tap-and-hold gesture with the Silverlight for Windows Phone Toolkit, then perform a highlighting effect with your own control inside the item.

    You can insert code in this forum if you open your profile under my dashboard and set the editor to use rich text. If you don't have a paid account, wrap your code in <pre> </pre> tags.


    Richard

    Tuesday, November 30, 2010 9:07 PM

All replies

  • You're trying to edit the wrong template.

    You want the Generated Item Container template. Basically the ItemContainerStyle.
    Tuesday, November 30, 2010 10:49 AM
  • The item container templates has what you need. But apparently the only working state is 'selected'. Use blend, right click on the list > additional templates > item container > edit a copy
    Tuesday, November 30, 2010 10:50 AM
  • Hi, I did even try to edit the template(right click on the list > additional templates > item container > edit a copy) and change the properties of the control in selected visual state using expression blend but nothing happens, not during design time and not during run time. and during design time in expression blend i don't see no control where i can set the corresponding properties of the controls in Selected view state. I guess, if i can post code here you could know the kind of template i have,it is just the default kind of listbox template that we get auto generated during creating panorama application in windows phone 7 in visual studio 2010. Can u please tell me how to post code here? Thanks,
    Tuesday, November 30, 2010 3:04 PM
  • Since i was not able to post code in this forum. I posted the same questions here http://social.msdn.microsoft.com/Forums/en-US/mktplace/thread/6d99b528-1c1b-4deb-b149-cbf879315d1a along with the code. Please take a look. Thanks,
    Tuesday, November 30, 2010 5:33 PM
  • To set the selected background color, you can insert the following highlighted lines into the Selected state (example for yellow background)

    <VisualState x:Name="Selected"> 
      <Storyboard>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
          <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
          <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
        </ObjectAnimationUsingKeyFrames>
      </Storyboard>
    </VisualState>

     

    If you're interested in learning more about templating a ListBox, I recommend this video: Templating Controls with Silverlight (Silverlight TV #36)

     

    ListBox doesn't have a state for mouse hover. I assume that you mean a tap-and-hold type of action, because the concept of "hovering" with the finger isn't meaningful in a ListBox on a touchscreen, where touch and drag is also used for scrolling. You can detect a tap-and-hold gesture with the Silverlight for Windows Phone Toolkit, then perform a highlighting effect with your own control inside the item.

    You can insert code in this forum if you open your profile under my dashboard and set the editor to use rich text. If you don't have a paid account, wrap your code in <pre> </pre> tags.


    Richard

    Tuesday, November 30, 2010 9:07 PM
  • Hi Richard, Thanks for the reply. It did solve my problem. You have changed the property of the LayoutRoot. I have been changing the property of ContentPresenter, that is why it did not work. Your solution, worked perfect. and thanks for the advice on inserting code here.
    Wednesday, December 1, 2010 6:10 PM