Click here to Skip to main content
15,885,435 members
Articles / Desktop Programming / WPF

OpenWPFChart: Assembling Charts from Components. Part II - Controls

Rate me:
Please Sign up or sign in to vote.
4.90/5 (14 votes)
26 Mar 2009CPOL10 min read 69.7K   2.2K   52  
Chart controls composed from Chart Parts
<!--
OpenWPFChart library Basic Sample: Chart with two axes composed in MainWindow.
Copyright © Oleg V. Polikarpotchkin 2008-2009
-->
<!--revision $Id: MainWindow.xaml 19130 2009-03-21 16:58:26Z unknown $-->

<Window x:Class="BasicSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:parts="clr-namespace:OpenWPFChart.Parts;assembly=OpenWPFChart.Parts"
	xmlns:local="clr-namespace:BasicSample"
	Name="mainWindow"
    Title="Basic CurveChart Sample" MinWidth="300" MinHeight="300" SizeToContent="WidthAndHeight"
		>

	<Window.InputBindings>
		<KeyBinding Key="Add" Modifiers="Control" CommandParameter="1.2" Command="NavigationCommands.Zoom" />
		<KeyBinding Key="Subtract" Modifiers="Control" CommandParameter="-1.2" Command="NavigationCommands.Zoom" />
	</Window.InputBindings>
	<Window.CommandBindings>
		<CommandBinding Command="ApplicationCommands.Open" Executed="OpenExecutedCommandHandler"/>
		<CommandBinding Command="NavigationCommands.Zoom" Executed="ZoomExecutedCommandHandler"/>
		<CommandBinding Command="ApplicationCommands.Properties" Executed="PropertiesExecutedCommandHandler"/>
	</Window.CommandBindings>

	<Window.Resources>
		<ContextMenu x:Key="chartItemCtxMnu">
			<MenuItem Header="Properties" Command="ApplicationCommands.Properties"/>
		</ContextMenu>
		
		<!-- Curve templates -->
		<DataTemplate x:Key="polylineTemplate">
			<parts:PolylineSampledCurve ItemDataView="{Binding}"
				ToolTip="{Binding ItemData.ItemName}"
				ContextMenu="{StaticResource chartItemCtxMnu}"/>
		</DataTemplate>
		<DataTemplate x:Key="bezierTemplate">
			<parts:BezierSampledCurve ItemDataView="{Binding}"
				ToolTip="{Binding ItemData.ItemName}"
				ContextMenu="{StaticResource chartItemCtxMnu}"/>
		</DataTemplate>
		<DataTemplate x:Key="splineTemplate">
			<parts:SplineSampledCurve ItemDataView="{Binding}"
				ToolTip="{Binding ItemData.ItemName}"
				ContextMenu="{StaticResource chartItemCtxMnu}"/>
		</DataTemplate>
		<DataTemplate x:Key="scatteredPointsTemplate">
			<parts:ScatteredPoints ItemDataView="{Binding}"
				ToolTip="{Binding ItemData.ItemName}"
				ContextMenu="{StaticResource chartItemCtxMnu}"/>
		</DataTemplate>
		
		<!-- Chart Items Template Selector -->
		<parts:GenericDataTemplateSelector x:Key="chartItemsTemplateSelector">
			<parts:GenericDataTemplateSelectorItem
				PropertyName="VisualCue" 
				Value="{x:Type parts:PolylineSampledCurve}"
				Template="{StaticResource polylineTemplate}"
				TemplatedType="{x:Type parts:SampledCurveDataView}"
				Description="Polyline Sampled Curve"/>
			<parts:GenericDataTemplateSelectorItem
				PropertyName="VisualCue" 
				Value="{x:Type parts:BezierSampledCurve}"
				Template="{StaticResource bezierTemplate}"
				TemplatedType="{x:Type parts:SampledCurveDataView}"
				Description="Bezier Sampled Curve"/>
			<parts:GenericDataTemplateSelectorItem
				PropertyName="VisualCue" 
				Value="{x:Type parts:SplineSampledCurve}"
				Template="{StaticResource splineTemplate}"
				TemplatedType="{x:Type parts:SampledCurveDataView}"
				Description="Spline Sampled Curve"/>
			<parts:GenericDataTemplateSelectorItem
				PropertyName="VisualCue" 
				Value="{x:Type parts:ScatteredPoints}"
				Template="{StaticResource scatteredPointsTemplate}"
				TemplatedType="{x:Type parts:ScatteredPointsDataView}"
				Description="Scattered points cloud"/>
		</parts:GenericDataTemplateSelector>

		<!-- Chart Style -->
		<Style x:Key="chartAreaStyle" TargetType="{x:Type ListBox}">
			<Setter Property="ItemsPanel">
				<Setter.Value>
					<ItemsPanelTemplate>
						<Canvas />
					</ItemsPanelTemplate>
				</Setter.Value>
			</Setter>
			
			<Setter Property="ItemContainerStyle">
				<Setter.Value>
					<Style TargetType="{x:Type ListBoxItem}">
						<Setter Property="Template">
							<Setter.Value>
								<ControlTemplate TargetType="{x:Type ListBoxItem}">
									<ContentPresenter x:Name="ContentHost"/>
									<ControlTemplate.Triggers>
										<Trigger Property="Selector.IsSelected" Value="True">
											<Setter TargetName="ContentHost" Property="BitmapEffect">
												<Setter.Value>
													<DropShadowBitmapEffect Color="Black" Direction="320" 
																		ShadowDepth="5" Softness="0.2" 
																		Opacity="0.8"/>
												</Setter.Value>
											</Setter>
										</Trigger>
									</ControlTemplate.Triggers>
								</ControlTemplate>
							</Setter.Value>
						</Setter>
					</Style>
				</Setter.Value>
			</Setter>
			
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type ListBox}">
						<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
							Padding="{TemplateBinding Control.Padding}"
							BorderBrush="{TemplateBinding Border.BorderBrush}"
							Background="{TemplateBinding Panel.Background}"
							SnapsToDevicePixels="True">
							<Grid>
								<parts:Grid Name="vGrid"
									HorizontalScale="{Binding ElementName=mainWindow, Path=HorizontalScale}"
									VerticalScale="{Binding ElementName=mainWindow, Path=VerticalScale}"
								/>
								<parts:Grid Name="hGrid" Orientation="Horizontal"
									HorizontalScale="{Binding ElementName=mainWindow, Path=HorizontalScale}"
									VerticalScale="{Binding ElementName=mainWindow, Path=VerticalScale}"
								/>
								<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
							</Grid>
						</Border>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		
		<!-- Legend Items Templates -->
		<DataTemplate x:Key="legendSampledCurve">
			<Grid Margin="3" ShowGridLines="False">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto" SharedSizeGroup="ItemName"/>
					<ColumnDefinition Width="30"/>
					<ColumnDefinition Width="Auto" SharedSizeGroup="PointMarker"/>
				</Grid.ColumnDefinitions>
				
				<TextBlock Text="{Binding Path=ItemData.ItemName}" VerticalAlignment="Center"/>
				<Rectangle Grid.Column="1" 
						Fill="{Binding Path=Pen.Brush}" Height="2"
						VerticalAlignment="Center" HorizontalAlignment="Stretch"
						Margin="5"/>
				<Image Grid.Column="2" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Center">
					<Image.Source>
						<DrawingImage>
							<DrawingImage.Drawing>
								<Binding Path="PointMarker"/>
							</DrawingImage.Drawing>
						</DrawingImage>
					</Image.Source>
				</Image>
			</Grid>
		</DataTemplate>
		<DataTemplate x:Key="legendScatteredPoints">
			<Grid Margin="3" ShowGridLines="False">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto" SharedSizeGroup="ItemName"/>
					<ColumnDefinition Width="Auto" SharedSizeGroup="PointMarker"/>
				</Grid.ColumnDefinitions>
				
				<TextBlock Text="{Binding Path=ItemData.ItemName}" VerticalAlignment="Center"/>
				<Image Grid.Column="1" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="3">
					<Image.Source>
						<DrawingImage>
							<DrawingImage.Drawing>
								<Binding Path="PointMarker"/>
							</DrawingImage.Drawing>
						</DrawingImage>
					</Image.Source>
				</Image>
			</Grid>
		</DataTemplate>
		<DataTemplate x:Key="legendCurve">
			<Grid Margin="3" ShowGridLines="False">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto" SharedSizeGroup="ItemName"/>
					<ColumnDefinition Width="30"/>
				</Grid.ColumnDefinitions>
				
				<TextBlock Text="{Binding Path=ItemData.ItemName}" VerticalAlignment="Center"/>
				<Border Grid.Column="1" 
						BorderBrush="{Binding Path=Pen.Brush}" BorderThickness="2"
						VerticalAlignment="Center" HorizontalAlignment="Stretch"
						Margin="5"/>
			</Grid>
		</DataTemplate>
		<DataTemplate x:Key="legendItem">
			<TextBlock Text="{Binding Path=ItemData.ItemName}" VerticalAlignment="Center" Margin="3"/>
		</DataTemplate>

		<!-- Legend Items Template Selector -->
		<parts:GenericDataTemplateSelector x:Key="legendItemsTemplateSelector">
			<parts:GenericDataTemplateSelectorItem
				PropertyName="VisualCue" 
				Value="{x:Type parts:PolylineSampledCurve}"
				Template="{StaticResource legendSampledCurve}"
				TemplatedType="{x:Type parts:SampledCurveDataView}"
				Description="Polyline Sampled Curve"/>
			<parts:GenericDataTemplateSelectorItem
				PropertyName="VisualCue" 
				Value="{x:Type parts:BezierSampledCurve}"
				Template="{StaticResource legendSampledCurve}"
				TemplatedType="{x:Type parts:SampledCurveDataView}"
				Description="Bezier Sampled Curve"/>
			<parts:GenericDataTemplateSelectorItem
				PropertyName="VisualCue" 
				Value="{x:Type parts:SplineSampledCurve}"
				Template="{StaticResource legendSampledCurve}"
				TemplatedType="{x:Type parts:SampledCurveDataView}"
				Description="Spline Sampled Curve"/>
			<parts:GenericDataTemplateSelectorItem
				PropertyName="VisualCue" 
				Value="{x:Type parts:ScatteredPoints}"
				Template="{StaticResource legendScatteredPoints}"
				TemplatedType="{x:Type parts:ScatteredPointsDataView}"
				Description="Scattered Points cloud"/>
		</parts:GenericDataTemplateSelector>
	
		<local:ItemCountToBoolConverter x:Key="ItemCountToBool"/>
		<local:ItemCountToVisibilityConverter x:Key="ItemCountToVisibility"/>
	</Window.Resources>
	
	<DockPanel>
		<!-- Menu -->
		<Menu DockPanel.Dock="Top">
			<MenuItem Header="_File">
				<MenuItem Command="Open" Name="mnuFileOpen"/>
				<Separator/>
				<MenuItem Header="_Recent Files" Name="mnuRecentFiles"/>
				<Separator/>
				<MenuItem Header="_Print" Click="mnuFilePrint_Click"/>
				<Separator/>
				<MenuItem Header="_Exit" Click="mnuFileExit_Click"/>
			</MenuItem>
			<MenuItem Header="_View" IsEnabled="{Binding ElementName=chart, Path=Items.Count,
				Converter={StaticResource ItemCountToBool}}">
				<MenuItem Header="_Horizontal Axis Properties" Name="hAxisPropertiesMnuItem" Click="mnuViewAxisProperties_Click"/>
				<MenuItem Header="_Vertical Axis Properties" Name="vAxisPropertiesMnuItem" Click="mnuViewAxisProperties_Click"/>
				<Separator/>
				<MenuItem Header="Swap Horizontal Scale"
						  Command="{Binding ElementName=mainWindow, Path=SwapLinLogScaleCommand}"/>
				<MenuItem Header="Swap Vertical Scale"
						  Command="{Binding ElementName=mainWindow, Path=SwapLinLogScaleCommand}"
						  CommandParameter="Vertical"/>
				<Separator/>
				<MenuItem Header="_Interpolator">
					<MenuItem Header="_Polyline" Click="mnuViewInterpolator_Click"/>
					<MenuItem Header="_Bezier" Click="mnuViewInterpolator_Click"/>
					<MenuItem Header="_Spline" Click="mnuViewInterpolator_Click"/>
				</MenuItem>
				<Separator/>
				<MenuItem Header="Zoom_In (Ctrl+NumPad+)" Command="Zoom" CommandParameter="1.2"/>
				<MenuItem Header="Zoom_Out (Ctrl+NumPad-)" Command="Zoom" CommandParameter="-1.2"/>
			</MenuItem>
		</Menu>
		
		<Border BorderBrush="Cornsilk" BorderThickness="10">
			<!-- Chart -->
			<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
				<Grid Name="panel" HorizontalAlignment="Left" Margin="10">
					<Grid.Style>
						<Style TargetType="Grid">
							<Style.Triggers>
								<!--Shouldn't show the Grid if Scales properties aren't set.-->
								<DataTrigger Binding="{Binding ElementName=mainWindow, Path=HorizontalScale}" Value="{x:Null}">
									<Setter Property="Visibility" Value="Collapsed"/>
								</DataTrigger>
								<DataTrigger Binding="{Binding ElementName=mainWindow, Path=VerticalScale}" Value="{x:Null}">
									<Setter Property="Visibility" Value="Collapsed"/>
								</DataTrigger>
							</Style.Triggers>
						</Style>	
					</Grid.Style>
					
					<Grid.Resources>
						<!-- Axis templates -->
						<DataTemplate DataType="{x:Type parts:ChartLinearScale}">
							<parts:LinearAxis AxisScale="{Binding}"/>
						</DataTemplate>
						<DataTemplate DataType="{x:Type parts:ChartLogarithmicScale}">
							<parts:LogarithmicAxis AxisScale="{Binding}"/>
						</DataTemplate>
						<DataTemplate DataType="{x:Type parts:ChartDateTimeScale}">
							<parts:DateTimeAxis AxisScale="{Binding}"/>
						</DataTemplate>
						<DataTemplate DataType="{x:Type parts:ChartSeriesScale}">
							<parts:SeriesAxis AxisScale="{Binding}"/>
						</DataTemplate>
					</Grid.Resources>
					
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto"/>
						<RowDefinition/>
					</Grid.RowDefinitions>
					<Grid.ColumnDefinitions>
						<ColumnDefinition/>
						<ColumnDefinition Width="Auto"/>
					</Grid.ColumnDefinitions>

					<!-- Axis must be placed into ContentPresenter container to provide	a way 
					to replace Axis element when related ChartScale-derived object type changes. -->

					<!-- Horizontal Bottom axis -->
					<Grid Grid.Row="1" Grid.Column="1" VerticalAlignment="Top">
						<Grid.RowDefinitions>
							<RowDefinition/>
							<RowDefinition/>
						</Grid.RowDefinitions>

						<ContentPresenter Name="hAxisHost"
							Content="{Binding ElementName=mainWindow, Path=HorizontalScale}"/>
						<TextBlock Grid.Row="1" HorizontalAlignment="Center">Axis of abscissas</TextBlock>
					</Grid>

					<!-- Vertical Left axis -->
					<Grid>
						<Grid.RowDefinitions>
							<RowDefinition/>
							<RowDefinition/>
						</Grid.RowDefinitions>
						
						<ContentPresenter Name="vAxisHost"
							Content="{Binding ElementName=mainWindow, Path=VerticalScale}"/>
						<TextBlock Grid.Row="1" HorizontalAlignment="Center">Axis of ordinates</TextBlock>
						
						<Grid.LayoutTransform>
							<RotateTransform Angle="90"/>
						</Grid.LayoutTransform>
					</Grid>
					
					<!-- Curve Chart area -->
					<ListBox Grid.Column="1" Name="chart" Style="{StaticResource chartAreaStyle}"
						ItemsSource="{Binding}" 
						ItemTemplateSelector="{StaticResource chartItemsTemplateSelector}"
						parts:Item.MouseEnterItem="item_Enter"
						parts:Item.MouseLeaveItem="item_Leave"
						parts:Item.VisualCueChanged="item_VisualCueChanged"
						SelectionChanged="chart_SelectionChanged"
						IsSynchronizedWithCurrentItem="True"
						SnapsToDevicePixels="true"
							 />

					<!-- Legend -->
					<Border 
						Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="20"
						BorderBrush="BurlyWood" BorderThickness="5" CornerRadius="5" Background="White"
						Visibility="{Binding ElementName=chart, Path=Items.Count, 
							Converter={StaticResource ItemCountToVisibility}}">
						<StackPanel>
							<TextBlock Margin="3" FontWeight="Bold">Legend</TextBlock>
							<ListBox
								ItemsSource="{Binding}" 
								ItemTemplateSelector="{StaticResource legendItemsTemplateSelector}"
								SelectedItem="{Binding ElementName=chart, Path=SelectedItem}"
								Grid.IsSharedSizeScope="True"/>
						</StackPanel>
					</Border>
				</Grid>
			</ScrollViewer>
		</Border>
	</DockPanel>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader
Russian Federation Russian Federation
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions