<Page x:Class="NewMarkersSample.Pages.ColumnChartSample"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

	  xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"

    Title="Column chart" Loaded="Page_Loaded">

	<Grid>

		<Grid.Resources>

			<d3:BrushHSBConverter SaturationDelta="0.8" LightnessDelta="1.6" x:Key="lighterConverter"/>

			<d3:BackgroundToForegroundConverter x:Key="backToForeConv"/>

		</Grid.Resources>



		<Grid.ColumnDefinitions>

			<ColumnDefinition/>

			<ColumnDefinition/>

		</Grid.ColumnDefinitions>



		<d3:ChartPlotter Name="plotter" Visible="0,0,100,1">

			<d3:ColumnChart Name="chart" ItemsSource="{Binding}">

				<d3:TemplateMarkerGenerator>

					<DataTemplate>

						<Rectangle Fill="{d3:SelfBinding (d3:PointChartBase.Index), Converter={StaticResource fillsConverter}}"

								   d3:ViewportPanel.ViewportWidth="1">

							<d3:LiveToolTipService.ToolTip>

								<d3:LiveToolTip Background="{d3:SelfBinding Path=Owner.Fill, Converter={StaticResource lighterConverter}}"

												TextBlock.Foreground="{d3:SelfBinding Path=Owner.Fill, Converter={StaticResource backToForeConv}}">

									<TextBlock>

										<Run Text="X="/><TextBlock Text="{Binding Path=Owner.(d3:PointChartBase.Index), RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type d3:LiveToolTip}}}"/>

										<Run Text="; Y="/><TextBlock Text="{Binding}"/>										

									</TextBlock>

								</d3:LiveToolTip>

							</d3:LiveToolTipService.ToolTip>

						</Rectangle>

					</DataTemplate>

				</d3:TemplateMarkerGenerator>

			</d3:ColumnChart>



			<RepeatButton Name="addBtn" Content="Add value" Click="addBtn_Click" Canvas.Bottom="10" Canvas.Right="10"/>

			<RepeatButton Name="insertBtn" Content="Insert value" Click="insertBtn_Click" Canvas.Bottom="35" Canvas.Right="10"/>

			<RepeatButton Name="deleteBtn" Content="Delete first" Click="deleteBtn_Click" Canvas.Bottom="60" Canvas.Right="10"/>

		</d3:ChartPlotter>



		<d3:ChartPlotter Name="plotter2" Visible="0,0,1,100" Grid.Column="1">

			<d3:HorizontalColumnChart Name="chart2" ItemsSource="{Binding}">

				<d3:TemplateMarkerGenerator>

					<DataTemplate>

						<Rectangle Fill="DarkOrchid">

							<Rectangle.ToolTip>

								<TextBlock>

									<Run Text="X="/>

									<TextBlock>

									<TextBlock.Text>

										<Binding Path="(d3:PointChartBase.Index)" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorLevel=3, AncestorType={x:Type Rectangle}}"/>

									</TextBlock.Text>	

									</TextBlock><Run Text="; Y="/><TextBlock Text="{Binding}"/>

								</TextBlock>

							</Rectangle.ToolTip>

						</Rectangle>

					</DataTemplate>

				</d3:TemplateMarkerGenerator>

			</d3:HorizontalColumnChart>

		</d3:ChartPlotter>

	</Grid>

</Page>