<Page
    x:Class="FlexChart101.LegendAndTitles"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlexChart101"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Chart="using:C1.Xaml.Chart"
    DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.Resources>
            <Chart:ChartStyle x:Key="footerAndHeaderStyle" Fill="DimGray" FontFamily="GenericSansSerif" FontSize="20" />
        </Grid.Resources>
        <Chart:C1FlexChart  x:Name="flexChart" BindingX="Country" LegendPosition="Bottom" ItemsSource="{Binding DataContext.Data}"
                            Header="{Binding Header, Source={StaticResource FlexChart101Localization}}" HeaderStyle="{StaticResource footerAndHeaderStyle}"
                            Footer="{Binding Footer, Source={StaticResource FlexChart101Localization}}" FooterStyle="{StaticResource footerAndHeaderStyle}">
            <Chart:Series SeriesName="Sales" Binding="Sales" />
            <Chart:Series SeriesName="Expenses" Binding="Expenses" />
            <Chart:C1FlexChart.AxisX>
                <Chart:Axis x:Uid="/FlexChart101Lib/Resources/AxisX" Title="Month" Position="Bottom" />
            </Chart:C1FlexChart.AxisX>
            <Chart:C1FlexChart.AxisY>
                <Chart:Axis x:Uid="/FlexChart101Lib/Resources/AxisY" Title="Amount" Position="Left" AxisLine="False" MajorGrid="True" />
            </Chart:C1FlexChart.AxisY>
        </Chart:C1FlexChart>
        <Grid x:Name="settings" Visibility="Collapsed" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <StackPanel Orientation="Vertical" Margin="0 8 0 0">
                <StackPanel.Resources>
                    <Style TargetType="StackPanel">
                        <Setter Property="Orientation" Value="Horizontal" />
                    </Style>
                    <Style TargetType="TextBlock">
                        <Setter Property="Width" Value="80" />
                        <Setter Property="HorizontalAlignment"  Value="Right" />
                    </Style>
                    <Style TargetType="TextBox">
                        <Setter Property="Width" Value="200" />
                    </Style>
                </StackPanel.Resources>
                <StackPanel>
                    <TextBlock Text="{Binding TxtHeader, Source={StaticResource FlexChart101Localization}}"/>
                    <TextBox Text="{Binding ElementName=flexChart, Path=Header, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="0 0 60 0"/>
                </StackPanel>
                <StackPanel>
                    <TextBlock Text="{Binding TxtFooter, Source={StaticResource FlexChart101Localization}}"/>
                    <TextBox Text="{Binding ElementName=flexChart, Path=Footer, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
                </StackPanel>
                <StackPanel Margin="0 10">
                    <TextBlock Text="{Binding TxtAxisX, Source={StaticResource FlexChart101Localization}}"/>
                    <TextBox Text="{Binding ElementName=flexChart, Path=AxisX.Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="0 0 60 0"/>
                </StackPanel>
                <StackPanel>
                    <TextBlock Text="{Binding TxtAxisY, Source={StaticResource FlexChart101Localization}}"/>
                    <TextBox Text="{Binding ElementName=flexChart, Path=AxisY.Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="0 0 60 0"/>
                </StackPanel>
            </StackPanel>
            <Button Content="{Binding BtnOk, Source={StaticResource FlexChart101Localization}}" Width="100" Click="Button_Click" HorizontalAlignment="Center" Margin="0 50 0 0"/>
        </Grid>
    </Grid>
    <Page.BottomAppBar>
        <AppBar>
            <AppBar.Resources>
                <local:EnumConverter x:Key="enumConverter" />
                <DataTemplate x:Key="cbLegendTemplate">
                    <TextBlock>
                        <TextBlock.Inlines>
                            <Run Text="{Binding TxtLegend, Source={StaticResource FlexChart101Localization}}"/>
                            <Run Text="{Binding}"/>
                        </TextBlock.Inlines>
                    </TextBlock>
                </DataTemplate>
            </AppBar.Resources>
            <StackPanel Orientation="Horizontal">
                <ComboBox ItemsSource="{Binding DataContext.Legends}" VerticalAlignment="Center" Width="100"
                      SelectedValue="{Binding DataContext.FlexChart.LegendPosition, Mode=TwoWay, Converter={StaticResource enumConverter}, ConverterParameter=Position}"/>
                <AppBarButton Width="50" Height="50" Click="Button_Click" VerticalAlignment="Center" Margin="50 0 0 0">
                    <FontIcon Glyph="&#xE115;" FontFamily="Segoe UI Symbol"></FontIcon>
                </AppBarButton>
            </StackPanel>
        </AppBar>
    </Page.BottomAppBar>
</Page>
