<UserControl x:Class="WealthHealth.WealthHealthDemo"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:Chart="using:C1.Xaml.Chart"
             xmlns:local="using:WealthHealth"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid x:Name="Root">
        <Grid.DataContext>
            <local:WealthHealthViewModel />
        </Grid.DataContext>
        <Grid.Resources>
            <local:IntToStringConverter x:Key="ISConverter" />
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Border BorderBrush="LightGray" BorderThickness="1">
            <TextBlock Text="{Binding Source={StaticResource WealthHealthLocalization}, Path=Title}" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" />
        </Border>
        <StackPanel Orientation="Vertical" Grid.Row="1" Margin="10 0">
            <StackPanel.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="TextWrapping" Value="Wrap" />
                </Style>
            </StackPanel.Resources>
            <TextBlock x:Name="tbTip" Text="{Binding Source={StaticResource WealthHealthLocalization}, Path=TxtTip}" />
            <TextBlock x:Name="tbTrack" Visibility="Collapsed">
                <TextBlock.Inlines>
                    <Run Text="{Binding Source={StaticResource WealthHealthLocalization}, Path=TxtTrack}" />
                    <Run Text="{Binding TrackContent}" FontWeight="Bold" FontSize="15" />
                </TextBlock.Inlines>
            </TextBlock>
            <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Center">
                <Slider Width="200" Minimum="1800" Maximum="2009" Value="{Binding Year, Converter={StaticResource ISConverter}, Mode=TwoWay}"/>
                <ToggleButton Width="40" Height="40" Content="{Binding Content}" IsChecked="True" FontFamily="Segoe UI Symbol" Command="{Binding PlayAnimation}" Margin="10 0" />
            </StackPanel>
        </StackPanel>
        <Chart:C1FlexChart x:Name="flexChart" RenderMode="Direct2D" FontSize="12" ToolTipContent="{}{Name}&#x000A;{YearPopulation:#,##0,,} million people" ItemsSource="{Binding Countries}" ChartType="Bubble" LegendPosition="None" BindingX="YearIncome" Grid.Row="2" Canvas.ZIndex="1" SelectionMode="Point" PointerPressed="flexChart_PointerPressed">
            <Chart:Series Binding="YearLifeExpectancy,YearPopulation" SymbolRendering="Series_SymbolRendering" />
            <Chart:C1FlexChart.AxisX>
                <Chart:Axis Title="{Binding Source={StaticResource WealthHealthLocalization}, Path=AxisXTitle}" MajorGrid="False" AxisLine="True" Min="300" Max="100000" LogBase="10" />
            </Chart:C1FlexChart.AxisX>
            <Chart:C1FlexChart.AxisY>
                <Chart:Axis Title="{Binding Source={StaticResource WealthHealthLocalization}, Path=AxisYTitle}" MajorGrid="False" AxisLine="True" Min="20" Max="85" MajorUnit="10" />
            </Chart:C1FlexChart.AxisY>
            <Chart:C1FlexChart.Options>
                <Chart:ChartOptions BubbleMinSize="5" BubbleMaxSize="70" />
            </Chart:C1FlexChart.Options>
        </Chart:C1FlexChart>
        <local:Watermarker Year="{Binding Year}" ParentChart="{Binding ElementName=flexChart}" Grid.Row="2" Canvas.ZIndex="0" Background="Transparent"/>
    </Grid>
</UserControl>
