<Page
    x:Class="FlexChartExplorer.Zoom"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Chart="using:C1.Xaml.Chart"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" x:Name="row"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button Width="100" Height="40" Content="{Binding Zoom_Content, Source={StaticResource FlexChartExplorerLocalization}}" Click="Button_Click" Margin="5 5 0 10"></Button>
        <Chart:C1FlexChart x:Name="flexChart" ChartType="LineSymbols"
                             Grid.Row="1"
                             ToolTip="{x:Null}"
                             Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                             ManipulationStarted="flexChart_ManipulationStarted"
                             ManipulationDelta="flexChart_ManipulationDelta"
                             ManipulationCompleted="flexChart_ManipulationCompleted">
            <Chart:C1FlexChart.Series>
                <Chart:Series x:Name="Function1" SeriesName="Function 1" BindingX="XVals" Binding="YVals"></Chart:Series>
                <Chart:Series x:Name="Function2" SeriesName="Function 2" BindingX="XVals" Binding="YVals"></Chart:Series>
            </Chart:C1FlexChart.Series>
        </Chart:C1FlexChart>
        <Canvas Grid.Row="1" x:Name="reversibleFrameContainer" Visibility="Collapsed" Background="Transparent" IsHitTestVisible="False">
            <Path Stroke="{ThemeResource SystemControlForegroundBaseHighBrush}" IsHitTestVisible="False" StrokeDashArray="2, 2">
                <Path.Data>
                    <RectangleGeometry x:Name="reversibleFrame"></RectangleGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="540"></AdaptiveTrigger></VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="appBar.Visibility" Value="Visible"></Setter>
                        <Setter Target="row.Height" Value="0"></Setter>
                        <Setter Target="flexChart.LegendPosition" Value="Top"></Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
    <Page.BottomAppBar>
        <AppBar Visibility="Collapsed" x:Name="appBar">
            <AppBarButton Click="Button_Click" Content="{Binding Zoom_Content, Source={StaticResource FlexChartExplorerLocalization}}" Width="100" Height="40"></AppBarButton>
        </AppBar>
    </Page.BottomAppBar>
</Page>
