How would go about setting the x and y axis titles. These are captions below the ticks (ie. Years)?
Thanks,
Steve
axis titles are not yet a feature of the xamchart. you can request features here: http://devcenter.infragistics.com/protected/requestfeature.aspx
here's how you can override the control template to include textblocks at the left and bottom of the control. you can use these as your axis titles.
<igCA:XamChart Height="300" Width="300">
<igCA:XamChart.Template>
<ControlTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<ContentPresenter Name="PART_Default_Chart" Grid.Row="0" Grid.Column="1" />
<TextBlock Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" TextAlignment="Center">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90" />
</TextBlock.LayoutTransform>
Left Title
</TextBlock>
<TextBlock Grid.Row="1" Grid.ColumnSpan="2" TextAlignment="Center">Bottom Title</TextBlock>
</Grid>
</ControlTemplate>
</igCA:XamChart.Template>
</igCA:XamChart>
how can I do this with C# code?
thanks, I got it working.
Three questions:1. At the moment the template somehow overwrites the theme of the XamGraph. How can change that?2. How can I change the text of the textblocks after loading in the template?3. Unfortunately the Caption of the XamGraph is not visible anymore. What do I have to do?
Thanks for helping out!
Gawain
Here's an example of how you can make the axis titles more dynamic, through the use of attached properties:
The Xaml:
<Window.Resources> <ControlTemplate x:Key="chartTemplate" TargetType="igChart:XamChart"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <ContentPresenter Name="PART_Default_Chart" Grid.Row="0" Grid.Column="1" /> <TextBlock Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" TextAlignment="Center" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:AxisInfo.YAxisTitle)}"> <TextBlock.LayoutTransform> <RotateTransform Angle="90" /> </TextBlock.LayoutTransform> </TextBlock> <TextBlock Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:AxisInfo.XAxisTitle)}" TextAlignment="Center" /> </Grid> </ControlTemplate> </Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <igChart:XamChart x:Name="theChart" Template="{StaticResource chartTemplate}" local:AxisInfo.XAxisTitle="XAxis" local:AxisInfo.YAxisTitle="YAxis"> </igChart:XamChart> <Button x:Name="changeTitles" Content="Change Titles" Click="changeTitles_Click" Grid.Row="1"/> </Grid>
And the code behind:
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void changeTitles_Click(object sender, RoutedEventArgs e) { AxisInfo.SetXAxisTitle(theChart, "Another X title"); AxisInfo.SetYAxisTitle(theChart, "Another Y title"); } } public static class AxisInfo { public static readonly DependencyProperty XAxisTitleProperty = DependencyProperty.RegisterAttached( "XAxisTitle", typeof(string), typeof(AxisInfo), new PropertyMetadata("X Axis")); public static string GetXAxisTitle( DependencyObject target) { return (string)target.GetValue(XAxisTitleProperty); } public static void SetXAxisTitle( DependencyObject target, string title) { target.SetValue(XAxisTitleProperty, title); } public static readonly DependencyProperty YAxisTitleProperty = DependencyProperty.RegisterAttached( "YAxisTitle", typeof(string), typeof(AxisInfo), new PropertyMetadata("Y Axis")); public static string GetYAxisTitle( DependencyObject target) { return (string)target.GetValue(YAxisTitleProperty); } public static void SetYAxisTitle( DependencyObject target, string title) { target.SetValue(YAxisTitleProperty, title); } }
When I change the theme, it seems to work. The axis labels aren't effected by the change, because they are just in the static template that we are setting. Changing the theme works by changing the control templates of the Infragistics controls. But you are setting a template manually that has a static text styling on the labels. You may have to make multiple versions of this template and swap them as the theme changes to make the axis labels style change appropriately along with the theme.
for 3. I see the caption in this example, do you?
-Graham
Hi,
thank you very much for the example. I got it working. Unfortunately I still have the problem with the theme of the XamGraph. As you can see in the attached image, it's not really the Neon theme. In the second image it's a bit like the neon theme, but the backgroundcolor is not correct.
Because of the white background, I cannot see the caption. Of cause I can set the color of it manually, but I would like to have the background just like the neon theme.
As I am no expert in Templates, maybe you can give me an hint how to place the axis information more near to the axis. I would like to have the x-axis info on the bottom right and the y-axis on the top left of the graph.
Thanks a lot!
When you set the chart's template the theme change is not allowed to override the chart's template, so some details of the neon theme at the level of the chart are lost. You can adjust for this by reconciling the template you are specifying with the neon theme's template. Here's the modified version:
<Window.Resources> <SolidColorBrush x:Key="CaptionForegroundBrush" Color="#FFFFFFFF"/> <Style x:Key="captionStyle" TargetType="TextBlock"> <Setter Property="Foreground" Value="{StaticResource CaptionForegroundBrush}"/> <Setter Property="FontFamily" Value="/xamFeatureBrowserResources;Component/fonts/#Avenir"/> <Setter Property="FontSize" Value="16"/> <Setter Property="FontWeight" Value="Bold" /> </Style> <ControlTemplate x:Key="chartTemplate" TargetType="igChart:XamChart"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,0,0,0"> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <ContentPresenter Name="PART_Default_Chart" Grid.Row="0" Grid.Column="1" /> <TextBlock Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" TextAlignment="Center" Style="{StaticResource captionStyle}" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:AxisInfo.YAxisTitle)}"> <TextBlock.LayoutTransform> <RotateTransform Angle="90" /> </TextBlock.LayoutTransform> </TextBlock> <TextBlock Grid.Row="1" Grid.ColumnSpan="2" Style="{StaticResource captionStyle}" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:AxisInfo.XAxisTitle)}" TextAlignment="Center" /> </Grid> </Border> </ControlTemplate> </Window.Resources>
Hope this helps!
thanks, now it really looks nice.
This should obviously be a native feature of the XamChart
Why aren't such labels provided in the xamchart? A caption is provided, why not these labels?