Legend | Infragistics Forums

110

Legend

Pierre-Yves posted over 16 years ago

Hello,

I'm trying to customize the legend but I'm stuck, is there anyway to move the legend under the chart? How can I apply styles/templates to legend items?

Thanks,

Pierre-Yves Troel

28496

Offline David Negley posted over 14 years ago in reply to Yang

creating a DataTemplate in C# code is a bit tricky, but it is possible: http://stackoverflow.com/questions/248362/how-do-i-build-a-datatemplate-in-c-code
Cancel
Reply

Cancel
45

Yang posted over 14 years ago in reply to Goran S [Infragistics]

Can I do this in code behind?

My xamCharts are dynamically created, if I position the legend in code behind it seems not work.

<

UserControl x:Class
="ADAPTModule_TransHistory_NS.UserControl1"

xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:igCA
="http://infragistics.com/Chart"

Height="300" Width
="450">

<UserControl.Resources
>

<ControlTemplate x:Key="LegendTemplate" TargetType="{x:Type igCA:Legend
}">

<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" Background="{x:Null}" BorderBrush="{x:Null}"

ItemsSource="{Binding Series, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type igCA:XamChart
}}}">

<ListBox.ItemsPanel
>

<ItemsPanelTemplate
>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment
="Bottom"/>

</ItemsPanelTemplate
>

</ListBox.ItemsPanel
>

<ListBox.ItemTemplate
>

<DataTemplate
>

<Border Height="20" Width
="Auto">

<StackPanel Orientation="Horizontal" VerticalAlignment
="Center">

<Rectangle Fill="{Binding Fill}" Width="15" Height="3" Margin="4" VerticalAlignment
="Center"/>

<TextBlock Text="{Binding Label}" VerticalAlignment="Center" FontSize="10"/>

</StackPanel
>

</Border
>

</DataTemplate
>

</ListBox.ItemTemplate
>

</ListBox
>

</ControlTemplate
>

</UserControl.Resources
>

<Grid
>



<igCA:XamChart x:Name
="ColumnChart2D" >











<igCA:XamChart.Series
>

<igCA:
Series

Label
="Cars"

ChartType
="line"

StrokeThickness
="4"

Fill
="#FFD70005">

<igCA:Series.DataPoints
>

<igCA:DataPoint Value="8" Label
="Febrary"/>

<igCA:DataPoint Value="4" Label
="March"/>

<igCA:DataPoint Value="6" Label
="April"/>

<igCA:DataPoint Value="7" Label
="May"/>

</igCA:Series.DataPoints
>

<igCA:Series.Marker
>

<igCA:Marker
/>

</igCA:Series.Marker
>

<igCA:Series.Animation
>

<igCA:Animation BeginTime="00:00:0.75" Duration
="00:00:02"/>

</igCA:Series.Animation
>

</igCA:Series
>

<igCA:
Series

Label
="Trucks"

ChartType
="line"

StrokeThickness
="4"

Fill
="#FF6CA224">

<igCA:Series.DataPoints
>

<igCA:DataPoint Value="3" Label
="March"/>

<igCA:DataPoint Value="5" Label
="April"/>

<igCA:DataPoint Value
="4" />

<igCA:DataPoint Value="6" Label
="March"/>

<igCA:DataPoint Value="8" Label
="March"/>

</igCA:Series.DataPoints
>

<igCA:Series.Marker
>

<igCA:Marker
/>

</igCA:Series.Marker
>

<igCA:Series.Animation
>

<igCA:Animation BeginTime="00:00:0.75" Duration
="00:00:02"/>

</igCA:Series.Animation
>

</igCA:Series
>

</igCA:XamChart.Series
>



<igCA:XamChart.Axes
>

<igCA:
Axis

AxisType
="PrimaryX"/>

<igCA:
Axis

AxisType
="PrimaryY">

</igCA:Axis
>

</igCA:XamChart.Axes
>

</igCA:XamChart
>

</Grid
>
</

UserControl>

public partial class UserControl1 : UserControl

{

public UserControl1()
{

InitializeComponent();

ColumnChart2D.Legend =

new Legend();
ColumnChart2D.Legend.MarginType = Infragistics.Windows.Chart.

MarginType.Percent;
ColumnChart2D.Legend.Margin =

new Thickness(5, 85, 5, 5);

//ColumnChart2D.Legend.Template = ct; // FindResource("MyControlTemplate") as ControlTemplate;

//ControlTemplate ct = new ControlTemplate(this.Resources["LegendTemplate"].GetType());

}

}
Cancel
Reply

Cancel
110

Pierre-Yves posted over 16 years ago in reply to Goran S [Infragistics]

Thank you so much for the quick reply!
Pierre-Yves Troel
Cancel
Reply

Cancel
739

Verified Answer
Goran S [Infragistics] posted over 16 years ago
USING A DATATEMPLATE TO STYLE THE LEGEND:

Before You Begin:

LegendItem has a LegendItemTemplate object associated with it. The LegendItemTemplate object exposes properties that you can use within a DataTemplate to create a customized look for your LegendItems.

What You Will Accomplish:

You will create a simple DataTemplate to style the LegendItems in the Legend.

Follow these Steps:

Add a Legend to xamChart.

Add tags for the Legend property within the xamChart control tags.
Add a Legend within the Legend property tags.
Set the Legend's UseDataTemplate property to True.
When you set the UseDataTemplate property to True, the xamChart control will not use the default visual tree for its LegendItems. You must supply a DataTemplate that defines the visual tree for the LegendItems; otherwise, xamChart will just display the fully qualified namespace of the LegendItemTemplate object.

In XAML:
… <igCA:XamChart.Legend> <igCA:Legend UseDataTemplate="True" /> </igCA:XamChart.Legend> …

Create a Resources sections in your Window or Page.

In XAML:
… <Window.Resources>  </Window.Resources> …

Add a DataTemplate to the Resources section.
Set the DataTemplate’s DataType property to '{x:Type igCA:LegendItemTemplate}'. By setting the DataType property to LegendItemTemplate, the DataTemplate will apply to all LegendItems.

Add a Border to the DataTemplate.
Set the BorderBrush property to a binding expression that binds to the Fill property of the LegendItemTemplate object. This will keep the BorderBrush property of the Border bound to the Fill property of the DataPoint.

Add a TextBlock to the Border.
Set the Text property to a binding expression that binds to the Text property of the LegendItemTemplate object. This will keep the Text property of the LegendItem bound to the Label property of the Series or DataPoint.

In XAML:
… <DataTemplate DataType="{x:Type igCA:LegendItemTemplate}"> <Border VerticalAlignment="Center" HorizontalAlignment="Stretch" BorderThickness="4" CornerRadius="4" BorderBrush="{Binding Path=Fill}" > <TextBlock Text="{Binding Path=Text}" /> </Border> </DataTemplate> …

Run the project and you will see the LegendItems using the DataTemplate you defined.
Cancel
Reply

Reject Answer

Cancel
739

Verified Answer
Goran S [Infragistics] posted over 16 years ago
MOVING AND POSITIONING LEGEND:

The xamChart™ control automatically places the Legend on the right-hand side of the chart Scene; however, you can also position the Legend manually.

You must set the MarginType property to Percent instead of the default value of Auto if you want to position the Legend manually. When you set the MarginType property to Percent, the bounding rectangle of the Legend will stretch to fill the entire xamChart client area. You can then set the Margin property to determine the amount of space between the edges of the Legend’s bounding rectangle and the corresponding edges of xamChart’s client area.

For example, let’s assume that you have a xamChart control with a width of 800 and a height of 600. If you set the Legend’s MarginType property to Percent, the Legend’s bounding rectangle will stretch to fill up the entire 800 x 600 area. If you set the left and bottom margins to 75, the left and bottom edges of the Legend’s bounding rectangle are pushed in by 75 percent relative to the bounding rectangle of the whole xamChart client area. The Legend’s bounding rectangle now has a new width of 200 and height of 150.

Note: The left, top, right, and bottom of the Margin property must be set to a value between 0 and 100. The sum of the left and right values as well as the sum of the top and bottom values cannot exceed 100.
The following screen shots show the Legend’s bounding rectangle (red border) before and after setting the left and bottom margins to 75. Notice that the LegendItems always stay horizontally aligned to the left and vertically aligned to the center within the Legend.

The following example code demonstrates how to position the Legend:

In XAML:
… <igCA:XamChart.Legend> <igCA:Legend MarginType="Percent" Margin="75, 10, 0, 10" /> </igCA:XamChart.Legend> …
Regards, GoranS
Cancel
Reply

Reject Answer

Cancel