<UserControl x:Class="FlexChart101.FunnelChart"
             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:c1="http://schemas.componentone.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:FlexChart101"
             mc:Ignorable="d" 
             DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Margin="20">
            <StackPanel.Resources>
                <local:FormatConverter x:Key="FTConverter" />
                <Style TargetType="c1:C1NumericBox">
                    <Setter Property="Width" Value="150" />
                    <Setter Property="Margin" Value="5 0 20 0" />
                    <Setter Property="Format" Value="f1" />
                </Style>
                <Style TargetType="ComboBox">
                    <Setter Property="ItemTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <TextBlock>
                                    <TextBlock.Inlines>
                                        <Run Text="Funnel Type: " />
                                        <Run Text="{Binding Path=.}"/>
                                    </TextBlock.Inlines>
                                </TextBlock>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </StackPanel.Resources>
            <TextBlock Text="Neck Width: " />
            <c1:C1NumericBox Minimum="0" Maximum="1" Increment="0.1" Value="{Binding ElementName=funnelChart, Path=Options.FunnelNeckWidth, Mode=TwoWay, Converter={StaticResource FTConverter}}" />
            <TextBlock Text="Neck Height: "/>
            <c1:C1NumericBox Minimum="0" Maximum="1" Increment="0.1" Value="{Binding ElementName=funnelChart, Path=Options.FunnelNeckHeight, Mode=TwoWay, Converter={StaticResource FTConverter}}" />
            <ComboBox Width="180" ItemsSource="{Binding FunnelTypes}" 
                      SelectedValue="{Binding ElementName=funnelChart, Path=Options.FunnelType, Mode=TwoWay, Converter={StaticResource enumConverter}}" />
        </StackPanel>
        <c1:C1FlexChart x:Name="funnelChart" ChartType="Funnel" BindingX="Country" ItemsSource="{Binding Data}" Grid.Row="1">
            <c1:Series SeriesName="Sales" Binding="Sales" />
            <c1:C1FlexChart.DataLabel>
                <c1:DataLabel Content="{}{y}" Position="Center" />
            </c1:C1FlexChart.DataLabel>
            <c1:C1FlexChart.Options>
                <c1:ChartOptions FunnelType="Default" FunnelNeckHeight="0.2" />
            </c1:C1FlexChart.Options>
        </c1:C1FlexChart>
    </Grid>
</UserControl>
