In the course of my building our ROI app, I was trying to figure out how to wrap the legends of charts when the text gets too long.

This is what I get with the default chart.

You’ll see here, there’s a lot of waste of space for the legend when what I really want to see is more of the chart.  So first thing we’ll do is fix the width of the chart. To do that, Right Click on the chart, Edit Template then depending on whether you’ve already been fiddling with your chart template, either Edit Current or Edit a Copy

When you expand the template, you’ll see a grid within the grid that contains both the chart and the legend.

You’ll notice that the grid is split into two, a star sized column and an auto sized one. Since autosizing will adapt the column size to the content, we’ll need to change this to star sized as well. You can do that by clicking on the icon and change it to the unlocked lock symbol.

Now, you should be able to click on the triangle and resize the columns to your desired width ratios.

You’ll notice that when you do this, your legend area won’t have as much space as before and since the legend items aren’t formatted to wrap by default, the text gets cropped if you have long lines of text.

Return to the scope of the user control by clicking on this icon in your Objects and Timeline panel

Find one of your ColumnSeries (or whatever data series your chart is using) Right-click->Edit Additional Templates –> Edit LegendItemStyle –> Edit a Copy

Give your style a name, and choose where to define this style. This depends on where you will be using this style, if it’s only in this page, then you can choose document. If there are other pages, you think you’ll be using this style in, choose Application. If you want to be able to reuse this style in other applications ,choose Resource Dictionary, choose an existing one or create a new one if you don’t have one yet. This stores the style in a separate file which you can then later on import to your other projects.

Clicking on OK should then bring your designer to to the LegendItem template designer. If you expand the StackPanel, you’ll see that we have the Rectangle and Title elements. If you look into the xaml code, you’ll see that the Title element is template-bound to a property called Content.

In my case, since I know that the legend will only represent text content, I can simple delete the title element, replace it with a Textblock object and apply the same bindings. I can do that by first selecting the textbox, search for the text property in the search box of the Properties panel, then clicking on the small square beside the property to access advanced options.

We select Template Binding –> Content

One last thing to do is set the width of the TextBox since it’s currently auto sized and we can’t currently set the width to take up the rest of the unoccupied horizontal stackpanel space. If you want your legend to scale dynamically, you’ll need to change the stackpanel into a grid. To do this, right-click on the StackPanel in your Objects and Timeline panel –> Change Layout Type –> and select Grid

After this step, check on your Rectangle, most likely, the Width and Height properties will be reset to auto so you’ll want to give this a size.

-

For the grid itself, it’s Height and Width gets fixed so we’ll want to reset this to auto so the grid is free to resize as it’s content or container feels necessary.

Now we can add a grid line by clicking on the top portion of our grid, and right after where the Rectangle ends:

then toggle the grid property (by clicking on the lock icon) until we get Pixel sized.

We can leave the other column at star sized so it’ll take up the rest of the available space.

With the TextBox selected, make sure the Width and Height  is set to auto (if there is a value, you can use the button on the right of the field to set to auto), the HorizontalAlignment and VerticalAlignment are set to Justified and the margins are set to the distance you want.

Now when you go back up to the UserControl scope, you’ll see the TextWrap in effect. Looking at this though, I might want to change the alignment/margins so that the rectangle is aligned to top instead of in the middle just to make it look nicer.

To go back to editing the template, right click on the ColumnSeries –> Edit Additional Templates –> Edit Current –> Edit LegendItemStyle

In my case, I chose top aligned with a bit of a top margin.

Going back out to the UserControl scope, we’ll be able to see the effect.

You can play around with how you want your legend to look and once your satisfied, it’s time to apply the style to the other series’. No you don’t to do that whole set of steps for each of them so don’t worry. Right click on the other column series-> Edit Additional Templates –> Edit LegendItemStyle –> and this time select ApplyResource and you should see the style you created in the previous steps and click on that. In my case, I named the style LegendItemStyle.

You’ll notice your legend automatically format itself the same way the previous column series did.

And that’s it!