How to get a Chart Title with Centered Text and Right Aligned buttons?

[Rodney Foley]

Okay I am trying to get my Chart's title to be centered and have some buttons that are right aligned.  However everything I try ends up having everything centered.  Below the code sample that when it is not in the chart title it works as expected (for example just in the main layout for a control). It is acting as if the ChartTitle wraps its contents inside of a StackPanel or something that prevents the expected behavior of a Grid.  

I could swear I saw an example in the Silverlight demo page for the Chart that had a "Reload" button right aligned with a centered title but I couldn't find it when I went through them again. It must have been in a  forum post with sample code related to something else. If someone could help me work this out I would be grateful.  Thanks.

<telerik:ChartDefaultView.ChartTitle>
    <telerik:ChartTitle>
        <Grid Margin="-6">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock TextAlignment="Center"
                        VerticalAlignment="Center"
                        Grid.Row="0"
                        Grid.Column="0">
                Item Summary
            </TextBlock>
            <StackPanel Orientation="Horizontal"
                        HorizontalAlignment="Right"
                        Grid.Row="0"
                        Grid.Column="1">
                <telerik:RadButton Name="exportToPng"
                                    Click="exportToPng_Click">
                    <ToolTipService.ToolTip>
                        <ToolTip Content="Export to PNG"/>
                    </ToolTipService.ToolTip>
                    <Image Height="16"
                            Margin="1"
                            Source="png_16x16.png"/>
                </telerik:RadButton>

                <telerik:RadButton Name="exportToExcel"
                                    Click="exportToExcel_Click">
                    <ToolTipService.ToolTip>
                        <ToolTip Content="Export to Excel"/>
                    </ToolTipService.ToolTip>
                    <Image Height="16"
                            Margin="1"
                            Source="excel_16x16.png"/>
                </telerik:RadButton>

                <telerik:RadButton Name="exportToHtml"
                                    Click="exportToHtml_Click">
                    <ToolTipService.ToolTip>
                        <ToolTip Content="Export to Html"/>
                    </ToolTipService.ToolTip>
                    <Image Height="16"
                            Margin="1"
                            Source="html_16x16.png"/>
                </telerik:RadButton>
            </StackPanel>
        </Grid>
    </telerik:ChartTitle>
</telerik:ChartDefaultView.ChartTitle>

[Evgeni "Zammy" Petrov]

Hello Rodney Foley,

 Thank you for pointing out this problem. We have fixed it internally but we missed the Q3 release, it will be out for SP1. Retemplating of the ChartTitle is needed for this to work. 

First add this namespace:

xmlns:mscorlib="clr-namespace:System;assembly=mscorlib"

Put this in your control resources:

<mscorlib:Double x:Key="ChartTitleFontSize">11</mscorlib:Double>
<FontWeight x:Key="ChartTitleFontWeight">Bold</FontWeight>
<SolidColorBrush x:Key="ChartTitleForeground" Color="White" />
<Thickness x:Key="ChartTitlePadding">7</Thickness>
<LinearGradientBrush x:Key="ChartTitleBackground"  EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF5B5B5B" Offset="1"/>
    <GradientStop Color="#FF868686"/>
    <GradientStop Color="#FF4F4F4F" Offset="0.42"/>
    <GradientStop Color="#FF0E0E0E" Offset="0.43"/>
</LinearGradientBrush>
<Thickness x:Key="ChartTitleBorderThickness">1</Thickness>
<SolidColorBrush x:Key="ChartTitleBorderBrush" Color="#FFB5B5B5" />
<Thickness x:Key="ChartTitleOuterBorderThickness">1</Thickness>
<SolidColorBrush x:Key="ChartTitleOuterBorderBrush" Color="Black" />

<Style  x:Key="CustomTitle2" TargetType="telerik:ChartTitle">
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="Background" Value="{StaticResource ChartTitleBackground}" />
    <Setter Property="BorderBrush" Value="{StaticResource ChartTitleBorderBrush}" />
    <Setter Property="OuterBorderBrush" Value="{StaticResource ChartTitleOuterBorderBrush}" />
    <Setter Property="BorderThickness" Value="{StaticResource ChartTitleBorderThickness}" />
    <Setter Property="OuterBorderThickness" Value="{StaticResource ChartTitleOuterBorderThickness}" />
    <Setter Property="Padding" Value="{StaticResource ChartTitlePadding}" />
    <Setter Property="Foreground" Value="{StaticResource ChartTitleForeground}" />
    <Setter Property="FontSize" Value="{StaticResource ChartTitleFontSize}" />
    <Setter Property="FontWeight" Value="{StaticResource ChartTitleFontWeight}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:ChartTitle">
                <Border BorderThickness="{TemplateBinding OuterBorderThickness}"
                      BorderBrush="{TemplateBinding OuterBorderBrush}">
                    <Border
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}">
                        <ContentControl HorizontalContentAlignment="Stretch"
                                    VerticalContentAlignment="Stretch"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding Content}"
                            Margin="{TemplateBinding Padding}"
                            Foreground="{TemplateBinding Foreground}"
                            FontSize="{TemplateBinding FontSize}"
                            FontStyle="{TemplateBinding FontStyle}"
                            FontWeight="{TemplateBinding FontWeight}"
                            FontFamily="{TemplateBinding FontFamily}" />
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

after that just change the ChartTitle xaml to this:

<telerik:ChartTitle HorizontalContentAlignment="Stretch" Style="{StaticResource CustomTitle2}">

I hope this gets you started properly.

Best wishes,
Evgeni "Zammy" Petrov
the Telerik team

[Rodney Foley]

Hi Zammy,

That is great news that it will be fixed in Q3 SP1.  Also thanks for putting together a style workaround, unfortunately it is not working for me.  I placed it in the UserControl.Resources and added the static reference to it as you specified, and nothing changed.  Do I need to change how I use the Grid in the title or switch to something else as well?  I looked through the style and I am not sure where the fix is within it, it doesn't look like it is changing the type of container, just trying to change the container settings. However if the container is not one that is designed to fill space like a StackPanel then until it is changed to be a different container there is no style that can fix it.  At least that I can come up with, using my limited knowledge of styles.

Any additional help on a work around would be appreciated.

Kind Regards,

-Rodney

[Rodney Foley]

I resolved the issue without overriding the style.  (I still can't wait for the fix to make this easier.)

Basically I reverted the title to just be text instead of a series of controls.  I then moved the stack panel of buttons out and put it under the Chart in the XAML to give it a higher Z-Order than the chart, I then put the stack panel in to the same Grid Cell (same row/column) and positioned at the top right.  This overlays it right where I want, and it hugs this location on resizing and looks good.

Kind Regards,

-Rodney

[Grégory]

Hello,

I had the same issue. With Q1 2011, is resolved. Thank you!