Search code examples
expression-blend

Icons in an Expression Blend tree view

I'm getting settled in with using Expression Blend, and there is one thing I am trying to do that I can not figure out for the life of me.

I want to have a tree where each text item has an icon before the text (trying to create something like a folder tree view). I created a sample data source and each item has two properties. An image and a line of text. the problem is that rather than the icon being before the text, the icon is really big and has a new line before the text. How do I correct this? Thanks for your help!

You can see what I'm getting here: https://i.sstatic.net/V6TGJ.png

Edit:

The solution I came to involved editing the MainWindow.xaml. I set the property names in the data tab to 'TreeIcon' and 'TreeLabel', then I added an orientation attribute to the stackpanel and changed the icon height/width to something more agreeable:

<StackPanel Orientation="Horizontal">
  <Image Source="{Binding TreeIcon}" HorizontalAlignment="Left" Height="24" Width="32"/>
  <TextBlock Text="{Binding TreeLabel}"/>
</StackPanel>

Without the 'Orientation' attribute, it defaulted to vertical, so setting it to 'Horizontal' got the icon and text positioned properly. Setting the image height to 24 makes the icon roughly a good size for the text it's next to. The width is set to 32 because when it was at 24, the icon and the text were directly next to each other, with no padding at all. Upping the width to 32 padded some padding to the left.

Solution

  • Is this silverlight or WPF? Have you looked at your style template to find the content controls and see if they're set with a maxheight or maxwidth property and perhaps a stackpanel with Horizontal orientation?