Retemplating ChartView to add title bar

2 posts, 0 answers
  1. Hafsa
    Hafsa avatar
    8 posts
    Member since:
    Mar 2013

    Posted 22 Apr 2013 Link to this post

    We've extended the RadCartesianChart to add custom features and behaviors. Adding a title bar (a WPF Label) to a new row above the re-templated ChartView seems to push it slightly beyond the boundaries of the containing element. How do I get the chart to fit into a smaller area within the template?

    Thanks!

    <ControlTemplate>
         <Grid Name="ParentGrid" >
              <Grid.RowDefinitions>
                   <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
               </Grid.RowDefinitions>
               <Label Grid.Row="0" Name="TitleBar"  Background="WhiteSmoke" VerticalAlignment="Top"
                              HorizontalContentAlignment="Center"
                              Content="{Binding Title, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                <!--CartesianChart template-->
           <Border Grid.Row="1" x:Name="layoutRoot"
                 BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}"
                 Background="{TemplateBinding Background}">
                    <Grid>
                          <ContentPresenter x:Name="emptyContent"
                          ContentTemplate="{TemplateBinding EmptyContentTemplate}"
                          Content="{TemplateBinding EmptyContent}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          IsHitTestVisible="False"
                          Visibility="Collapsed"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                           <Canvas x:Name="adornerContainer"
                              Background="Transparent"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch">
                          <Canvas x:Name="labelContainer"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch">
                        <Canvas x:Name="renderSurface"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch">
                      <Border x:Name="plotAreaDecoration" Style="{TemplateBinding PlotAreaStyle}"/>
                   </Canvas>
                 </Canvas>
                </Canvas>
             </Grid>
            </Border>
         </Grid>
    </ControlTemplate>
  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 25 Apr 2013 Link to this post

    Hi Hafsa,

     Unfortunately RadChartView was not designed to be customized this way. It uses its ActualHeight for any inner representations of the containing elements. When you add your own element to the visual tree, you extend the Height of the whole control and those which does not fit the space left,  are visualized outside the visible area of the chart.

    What I can suggest as a workaround is that you add your Title element inside the first grid of the Cartesian Chart (see the image attached):

        <!--CartesianChart template-->
                                <Border  x:Name="layoutRoot"
                                 BorderBrush="{TemplateBinding BorderBrush}"
                                 BorderThickness="{TemplateBinding BorderThickness}"
                                 Background="{TemplateBinding Background}">
                                    <Grid>
                                        <Label Name="TitleBar" Background="WhiteSmoke" VerticalAlignment="Top" 
                                          HorizontalContentAlignment="Center" Content="My Title Here" ClipToBounds="False"/>
                                        <ContentPresenter x:Name="emptyContent"
                                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                         IsHitTestVisible="False"
                                         Visibility="Collapsed"
                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    ...

    On the other side, you may add the Border that wraps the Label outside the template of the RadCartesianChart. This way it will appear above the Chart Area (everything will be visible and not overlapping).

    All the best,
    Evgenia
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top