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

    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"

	  xmlns:local="clr-namespace:NewMarkersSample.Pages" Loaded="Page_Loaded"

    Title="Bar Chart">

	<Grid>

		<Grid.RowDefinitions>

			<RowDefinition Height="*"/>

			<RowDefinition Height="Auto"/>

		</Grid.RowDefinitions>



		<d3:ChartPlotter Name="plotter" Visible="-1,-0.1 11,5">

			<d3:ChartPlotter.Resources>

				<local:HeightToFillConverter x:Key="converter"/>

				<local:TooltipConverter FormatString="[0:F2]: [1:F2]->[2:F2]" x:Key="tooltipConverter"/>

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

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

			</d3:ChartPlotter.Resources>



			<d3:BarChart Name="barChart">

				<d3:TemplateMarkerGenerator>

					<DataTemplate>

						<Rectangle Width="30" Fill="{Binding YMax, Converter={StaticResource converter}}"

								   d3:ViewportPanel.Y="{Binding YMin}" 

								   d3:ViewportPanel.X="{Binding X}"

								   d3:ViewportPanel.ViewportHeight="{Binding YMax}"

								   d3:ViewportPanel.ViewportVerticalAlignment="Bottom">

							<d3:LiveToolTipService.ToolTip>

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

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

									<TextBlock>

										<TextBlock.Text>

											<MultiBinding Converter="{StaticResource tooltipConverter}">

												<Binding Path="X"/>

												<Binding Path="YMin"/>

												<Binding Path="YMax"/>

											</MultiBinding>

										</TextBlock.Text>

									</TextBlock>

								</d3:LiveToolTip>

							</d3:LiveToolTipService.ToolTip>

						</Rectangle>

					</DataTemplate>

				</d3:TemplateMarkerGenerator>

			</d3:BarChart>



			<Grid Canvas.Top="10" Canvas.Left="10">

				<Rectangle RadiusX="2" RadiusY="2" Stroke="LightGray" StrokeThickness="1" Fill="White" Opacity="0.7"/> 

				<TextBlock Margin="5" FontSize="14">Try to move <Run Foreground="Green">mouse</Run> over animated bars.</TextBlock>

			</Grid>

			

		</d3:ChartPlotter>

	</Grid>

</Page>