none
Style a listview RRS feed

  • Question

  • I need to style a listview to look and act like the control in the Skype addin on the far right of the attached picture (highlighted in red).  This includes:

    - adding padding to the row in the listview

    - highlighting the entire row on mouse over

    - add a straight line between two rows

    Am I talking a custom WPF control to accomplish this?  Thank you for your guidance.



    • Edited by Screener Thursday, March 15, 2012 2:21 PM
    Thursday, March 15, 2012 2:20 PM

Answers

  • I got pretty close to that format using a DataGridView rather than a ListView.  There is a lot more flexibility in the formatting with a DataGridView.  ListView does not allow word wrap within a cell, for example.

    With a DataGridView , you can set row height, column width, have an image in the column, set the colors, etc.  You can also custom draw in the cells quite a bit, although I ended up not using that.

    Monday, March 19, 2012 6:00 PM

All replies

  • Hi Screener,

    Yes, typically you'd create a WPF user control to simulate the Skype style.  However, the styling itself is best done using MS Expression Blend, which is able to work with your VS project.  The point of that is to create a XAML <style> description that your control will reference. (It's not realistic to create all the XAML style description from within VS itself, although that's theoretically possible.)

    The particular Blend steps  you'd take will require a bit of a learning curve.  You'll likely need to seek out and find 3 or 4 Blend turorials that describe styling WPF listboxes to cover the different style points you've identified.

    Here are a few tutorials you could look at based on searching for "Expression blend listbox styling":

    http://expressioniq.com/?p=60

    http://www.uxpassion.com/2008/09/styling-wpf-listbox-highlight-color/

    You'll need a few more. 

    The good news is that once you've invested in learning how this is done, you'll have a good set of skills to apply in the future to creating nifty looking WPF controls.

    Good luck!

    Anonymous9748

    Thursday, March 15, 2012 5:37 PM
  • Thank you, that was very helpful!

    Unfortunately, I cannot afford a copy of Blend.  I will try to find some tutorials for styling a listbox starting with a WpfApplication project within VS.

    • Edited by Screener Thursday, March 15, 2012 7:17 PM
    Thursday, March 15, 2012 6:53 PM

  • If you're a student, check out dreamspark as a way to get Expression for free.
    Sunday, March 18, 2012 12:56 AM
  • I am a student, but not by their definition :).
    Sunday, March 18, 2012 1:39 AM
  • I got pretty close to that format using a DataGridView rather than a ListView.  There is a lot more flexibility in the formatting with a DataGridView.  ListView does not allow word wrap within a cell, for example.

    With a DataGridView , you can set row height, column width, have an image in the column, set the colors, etc.  You can also custom draw in the cells quite a bit, although I ended up not using that.

    Monday, March 19, 2012 6:00 PM
  • Hi Screener,

    It seems that you have found work round. I'm glad to hear that, thanks for sharing you experience here. It's very beneficial for other community members who have similar problem to see how you solved your issue.

    Have a good day,

    Tom


    Tom Xu [MSFT]
    MSDN Community Support | Feedback to us

    Tuesday, March 20, 2012 5:08 AM
    Moderator