How to lay out legend items horizontally instead of vertically

615

cgreenberg posted over 12 years ago

I have a legend whereby the legend items are stacked vertically. I want to lay them out horizontally. When I use Snoop, I can identify a StackPanel and change the orientation to horizontal to achieve the look I want.

But I cannot find that StackPanel in code anywhere.

How can I change this StackPanel layout in code?

Parents

17475

Verified Answer
Offline Maria Tsvyatkova posted over 12 years ago

Hello Carol,

Thank you for contacting Infragistics.

I have been looking into your case. What I could suggest you here is setting the Orientation property of the Legend to “Horizontal” to achieve the look you want instead of using StackPanel control.

<ig:XamDataChart Legend="{Binding ElementName=Legend}">

…

<ig:Legend Orientation="Horizontal" x:Name="Legend"/>

Please do not hesitate to contact me if you have any other questions or concerns.
Cancel
Reply

Reject Answer

Cancel
17475

Offline Maria Tsvyatkova posted over 12 years ago in reply to Maria Tsvyatkova

Hello,

I am checking if my last reply was helpful for you.

If you require any further assistance please do not hesitate to ask.
Cancel
Reply

Cancel

Reply

615

cgreenberg posted over 12 years ago in reply to Maria Tsvyatkova

Hi,

Yes, that answer was what I was looking for. I have two questions related to the horizontal layout:

1. How can I add spacing between the legend items. In horizontal layout, they run together as one long row.

2. I want to set a maximum width for the legend box. Is there a way to wrap the legend items to go down to the next line? Currently a horizontal scrollbar appears.

Thank you for your time.
Cancel
Reply

Cancel

Children

17475

Offline Maria Tsvyatkova posted over 12 years ago in reply to Maria Tsvyatkova

Hello,

I am just checking if you require any further assistance on the matter.
Cancel
Reply

Cancel
17475

Offline Maria Tsvyatkova posted over 12 years ago in reply to cgreenberg
Hello,

What I can suggest you here is:

1. Using DataTemplate and setting its Margin property to a preferred value. You need to bind the LegendItemTemplate property of the Series to this DataTemplate. This will add some space between the items.

2. In a legend the ContentPresenter's content is a StackPanel. In order to wrap the items of the legend you need to change it to a WrapPanel. This could be done programmatically by handling the XamDataChart's Loaded event. After setting a ControlTemplate for the legend which has ContentPresenter named "ContentPresenter" you could search the visual tree in the XamDataChart's Loaded event for that element. Every StackPanel's child should be added to the WrapPanel and deleted from the StackPanel.

I attached a sample project that represents my suggestions.

Please let me know if it helps you resolve your issue.
Cancel
Reply

Cancel