Downward Plotting Silverlight Chart

Previously I had finally figured out how to reverse a chart without having to use any C# code behind (which I was VERY happy about). Unfortunately, I needed the chart to actually graph top to bottom - and that solution was not working. The lines were very choppy and the points were not being connected in order. 

No one was happy about that at all.

One of my co-workers (ty Hank) noticed that all of the Silverlight charts defaulted to plotting all of the series from left to right, so the actual plotting area of the chart needed to be rotated by 90 degrees.

By going into the control template of the chart, I was able to rotate the plotting area containing the series (and the axis too).

Below is an example of the default chart, and to the right of it is the styled chart that now flows from top to bottom. 

The styles (and there are 3, one for each axis and one for the chart itself). All XAML though :D

 

The code below is for the right chart only. The one on the left is the default Silverlight styling

 

<toolkit:Chart Canvas.Left="472" Canvas.Top="-4" Height="487" Width="494" Style="{StaticResource FlippedChartStyle}" Background="Ivory">
                <toolkit:Chart.Axes>
                    <chartingToolkit:LinearAxis x:Name="This1"
                                                Minimum="0"
                                                Maximum="12"
                                                Interval="2" Style="{StaticResource SideAxisStyle}"
                                                Orientation="X">
                    </chartingToolkit:LinearAxis>

                    <!-- Focusing on the Y Axis to reverse -->
                    <chartingToolkit:LinearAxis x:Name="This2"
                                                Minimum="0" Maximum="25"
                                                Orientation="Y"
                                                RenderTransformOrigin="0.5,0.5"
                                                Style="{StaticResource BottomAxisStyle}">

                    </chartingToolkit:LinearAxis>
                </toolkit:Chart.Axes>

                <toolkit:Chart.Series>
                    <toolkit:LineSeries Title="Reversed"
                                        x:Name="ReversedLine2"
                                        IndependentValuePath="X"
                                        DependentValuePath="Y"
                                        RenderTransformOrigin="0.5,0.5">
                        <toolkit:LineSeries.ItemsSource>
                            <PointCollection>
                                <Point>0,1</Point>
                                <Point>2,2</Point>
                                <Point>3,4</Point>
                                <Point>5,8</Point>
                                <Point>8,18</Point>
                                <Point>9,22</Point>
                                <Point>12,25</Point>
                            </PointCollection>
                        </toolkit:LineSeries.ItemsSource>
                    </toolkit:LineSeries>
                </toolkit:Chart.Series>
            </toolkit:Chart> 

Below are the styles that were used to create the chart on the right. These are in the ResourceDictionary for this project/solution.

<Style x:Key="BottomAxisStyle" TargetType="toolkit:LinearAxis">
        <Setter Property="ShowGridLines" Value="True"/>
        <Setter Property="Orientation" Value="Y"/>
        <Setter Property="Foreground" Value="Gray"/>
        <Setter Property="FontSize" Value="8"/>
        <Setter Property="Location" Value="Left"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="MajorTickMarkStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="Gray"/>
                    <Setter Property="StrokeThickness" Value="0.5"/>
                    <Setter Property="X2" Value="2"/>
                    <Setter Property="Y2" Value="2"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="GridLineStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="Gray"/>
                    <Setter Property="StrokeThickness" Value="0.5"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="AxisLabelStyle">
            <Setter.Value>
                <Style TargetType="toolkit:AxisLabel">
                    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                    <Setter Property="FontFamily" Value="Arial"/>
                    <Setter Property="Foreground" Value="Gray"/>
                    <Setter Property="FontSize" Value="8"/>
                    <Setter Property="Margin" Value="0,0,3,0"/>
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <CompositeTransform Rotation="90" />
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SideAxisStyle" TargetType="toolkit:LinearAxis">
        <Setter Property="Orientation" Value="X"/>
        <Setter Property="FontSize" Value="8"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="ShowGridLines" Value="True"/>
        <Setter Property="MajorTickMarkStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="Transparent"/>
                    <Setter Property="X2" Value="0.5"/>
                    <Setter Property="Y2" Value="0.5"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="GridLineStyle">
            <Setter.Value>
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="Gray"/>
                    <Setter Property="StrokeThickness" Value="0.5"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="AxisLabelStyle">
            <Setter.Value>
                <Style TargetType="toolkit:AxisLabel">
                    <Setter Property="FontSize" Value="8"/>
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <CompositeTransform ScaleY="1" />
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Foreground" Value="Blue"/>
                    <Setter Property="Margin" Value="5"/>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>


    <Style x:Key="FlippedChartStyle" TargetType="toolkit:Chart">
        <Setter Property="Palette">
        <Setter.Value>
        <toolkit:ResourceDictionaryCollection>
        <ResourceDictionary>
            <RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
                <GradientStop Color="#FF9DC2B3"/>
                <GradientStop Color="#FF1D7554" Offset="1"/>
            </RadialGradientBrush>
            <Style x:Key="DataPointStyle" TargetType="Control">
                <Setter Property="Background" Value="{StaticResource Background}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Control">
                            <Grid Height="0" Width="0"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="DataShapeStyle" TargetType="Shape">
                <Setter Property="Stroke" Value="{StaticResource Background}"/>
                <Setter Property="StrokeThickness" Value="1"/>
                <Setter Property="StrokeMiterLimit" Value="1"/>
                <Setter Property="Fill" Value="{StaticResource Background}"/>
            </Style>
        </ResourceDictionary>
        </toolkit:ResourceDictionaryCollection>
        </Setter.Value>
        </Setter>       
        <Setter Property="LegendStyle">
            <Setter.Value>
                <Style TargetType="toolkit:Legend">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </Style>
            </Setter.Value>
        </Setter>       
        <Setter Property="TitleStyle">
            <Setter.Value>
                <Style TargetType="toolkit:Title">
                    <Setter Property="FontSize" Value="6"/>
                    <Setter Property="FontFamily" Value="Arial"/>
                    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                </Style>
            </Setter.Value>
        </Setter>       
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:Chart">
                    <Grid x:FieldModifier="PlottedCharts" HorizontalAlignment="Center" VerticalAlignment="Center"
                          Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">                       
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>                       
                        <Grid.RowDefinitions>
                            <RowDefinition />
                        </Grid.RowDefinitions>                                              
                            <chartingPrimitives:EdgePanel Margin="30" x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}"
                                                          RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" Background="Ivory"
                                                          VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <chartingPrimitives:EdgePanel.RenderTransform>
                                    <!--<CompositeTransform ScaleX="1" ScaleY="-1"/>-->
                                <CompositeTransform Rotation="90"/>
                            </chartingPrimitives:EdgePanel.RenderTransform>                                                      
                                <Grid x:Name="PlotArea" Canvas.ZIndex="-1" Background="Ivory" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left"/>
                                <Border Canvas.ZIndex="10" BorderBrush="Gray" BorderThickness="0.25" Margin="0"/>
                            </chartingPrimitives:EdgePanel>                          
                    </Grid>
                 </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Floating Window Default Styles - Extracted Using Blend

I wanted to customize the style for the Floating Window (you can find it here... it allows Silverlight to have a "modeless" window). Will post more information on using this control when I know more about what I am doing.

Below are the styles and templates that Blend Extracted when I chose "Edit Template > Edit A Copy"

<!-- For the FloatingWindowHost styles and controls-->
                    <Style x:Key="BootstrapButtonStyle" TargetType="my:BootstrapButton">
                        <Setter Property="Width" Value="24"/>
                        <Setter Property="Height" Value="24"/>
                        <Setter Property="BorderBrush" Value="#FFA2ADB8"/>
                        <Setter Property="Background" Value="#FF4E4E4E"/>
                        <Setter Property="VerticalAlignment" Value="Top"/>
                        <Setter Property="IsTabStop" Value="false"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="my:BootstrapButton">
                                    <Grid Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0.5" Width="{TemplateBinding Width}">
                                        <Grid.RenderTransform>
                                            <CompositeTransform/>
                                        </Grid.RenderTransform>
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualStateGroup.Transitions>
                                                    <VisualTransition GeneratedDuration="0"/>
                                                </VisualStateGroup.Transitions>
                                                <VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Arrow"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Normal"/>
                                                <VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Arrow"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                        <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="PART_Arrow"/>
                                                        <DoubleAnimation By="1" Duration="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="PART_Arrow"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                            <VisualStateGroup x:Name="ButtonStates">
                                                <VisualState x:Name="Open">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="PART_Arrow">
                                                            <DoubleAnimation.EasingFunction>
                                                                <CubicEase EasingMode="EaseOut"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Close">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0:0:0.4" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="PART_Arrow">
                                                            <DoubleAnimation.EasingFunction>
                                                                <CubicEase EasingMode="EaseOut"/>
                                                            </DoubleAnimation.EasingFunction>
                                                        </DoubleAnimation>
                                                        <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="PART_Arrow"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Ellipse>
                                            <Ellipse.Fill>
                                                <LinearGradientBrush EndPoint="0.691,0.972" StartPoint="0.307,0.037">
                                                    <GradientStop Color="#FFA2ADB8"/>
                                                    <GradientStop Color="White" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Ellipse.Fill>
                                        </Ellipse>
                                        <Ellipse Margin="1">
                                            <Ellipse.Fill>
                                                <LinearGradientBrush EndPoint="0.631,1" MappingMode="RelativeToBoundingBox" StartPoint="0.29,0.045">
                                                    <GradientStop Color="#FFB8C3C8" Offset="1"/>
                                                    <GradientStop Color="#FFE7EBED" Offset="0.27"/>
                                                </LinearGradientBrush>
                                            </Ellipse.Fill>
                                        </Ellipse>
                                        <Path x:Name="PART_Arrow" Data="M27.671843,6 L31.333334,2 L35.02343,6 z" Fill="#FF686D76" HorizontalAlignment="Center" Height="4" RenderTransformOrigin="0.5,0.5" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="8">
                                            <Path.RenderTransform>
                                                <CompositeTransform TranslateY="-1"/>
                                            </Path.RenderTransform>
                                        </Path>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                    <Style x:Key="BottomBarStyle" TargetType="Border">
                        <Setter Property="Height" Value="24"/>
                        <Setter Property="Background" Value="#FFE7EBED"/>
                        <Setter Property="BorderThickness" Value="0,1,0,0"/>
                        <Setter Property="BorderBrush" Value="#FFFEFEFE"/>
                    </Style>
                    <Style x:Key="FloatingWindowHostOne" TargetType="my:FloatingWindowHost">
                        <Setter Property="Width" Value="Auto"/>
                        <Setter Property="Height" Value="Auto"/>
                        <Setter Property="SnapinEnabled" Value="True"/>
                        <Setter Property="SnapinDistance" Value="5"/>
                        <Setter Property="SnapinMargin" Value="0"/>
                        <Setter Property="ShowMinimizedOnlyInIconbar" Value="False"/>
                        <Setter Property="HorizontalAlignment" Value="Stretch"/>
                        <Setter Property="VerticalAlignment" Value="Stretch"/>
                        <Setter Property="OverlayBrush" Value="#90202030"/>
                        <Setter Property="Background" Value="#FF7ED2E9"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="my:FloatingWindowHost">
                                    <Grid x:Name="PART_Root" Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="OverlayStates">
                                                <VisualState x:Name="VisibleOverlay">
                                                    <Storyboard>
                                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Overlay">
                                                            <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_Overlay">
                                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                                <DiscreteObjectKeyFrame.Value>
                                                                    <Visibility>Visible</Visibility>
                                                                </DiscreteObjectKeyFrame.Value>
                                                            </DiscreteObjectKeyFrame>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="HiddenOverlay">
                                                    <Storyboard>
                                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Overlay">
                                                            <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_Overlay">
                                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                                                                <DiscreteObjectKeyFrame.Value>
                                                                    <Visibility>Collapsed</Visibility>
                                                                </DiscreteObjectKeyFrame.Value>
                                                            </DiscreteObjectKeyFrame>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Grid x:Name="PART_ContentRoot">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
                                            <Canvas x:Name="PART_HostCanvas"/>
                                            <Grid x:Name="PART_IconBarContainer" VerticalAlignment="Bottom">
                                                <my:IconBar x:Name="PART_IconBar"/>
                                            </Grid>
                                            <Border Visibility="Collapsed" x:Name="PART_BottomBar" Grid.Row="1" Style="{StaticResource BottomBarStyle}">
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto"/>
                                                        <ColumnDefinition Width="*"/>
                                                    </Grid.ColumnDefinitions>
                                                    <my:BootstrapButton x:Name="PART_BootstrapButton" IsOpen="{Binding IsOpen, ElementName=PART_IconBar}" Margin="10,-4,10,0" Style="{StaticResource BootstrapButtonStyle}"/>
                                                    <Border Grid.Column="1">
                                                        <ContentControl x:Name="PART_BarContent" Content="{TemplateBinding Bar}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
                                                    </Border>
                                                </Grid>
                                            </Border>
                                        </Grid>
                                        <Grid x:Name="PART_Overlay" Background="{TemplateBinding OverlayBrush}" Opacity="0" />
                                        <Canvas x:Name="PART_ModalCanvas"/>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>