<Page
    x:Class="BitmapSamples.Transform"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BitmapSamples"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <SolidColorBrush Color="#66FFFFFF" x:Key="MaskBrush" />
    </Page.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Margin="0 0 0 10">
            <Button x:Name="button1" Content="{Binding LoadImage_Content, Source={StaticResource BitmapSamplesLocalization}}" Click="LoadImage_Clicked" Margin="0 0 10 0" Width="140" HorizontalAlignment="Right" />
            <Button x:Name="button2" Content="{Binding Export_Content, Source={StaticResource BitmapSamplesLocalization}}" Click="ExportImage_Clicked" Margin="0 0 10 0" Width="140" />
            <Button
                x:Name="button3"
                Width="140"
                HorizontalAlignment="Left"
                >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <TextBlock
                            x:Name="contentText"
                            Text="{Binding TransformButtonText, Source={StaticResource BitmapSamplesLocalization}}"
                            Margin="0, 0, 8, 0"
                            VerticalAlignment="Center"
                            />
                    <FontIcon
                            x:Name="contentIcon"
                            Grid.Column="1"
                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                            FontSize="16"
                            Glyph="&#xE0A1;"
                            />
                </Grid>
                <Button.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem
                            Text="{Binding MenuCropToSelection, Source={StaticResource BitmapSamplesLocalization}}"
                            Click="CropToSelection_Clicked"
                            />
                        <MenuFlyoutSeparator />
                        <MenuFlyoutItem
                            Text="{Binding MenuRotateCW, Source={StaticResource BitmapSamplesLocalization}}"
                            Click="RotateCW_Clicked"
                            />
                        <MenuFlyoutItem
                            Text="{Binding MenuRotateCCW, Source={StaticResource BitmapSamplesLocalization}}"
                            Click="RotateCCW_Clicked"
                            />
                        <MenuFlyoutItem
                            Text="{Binding MenuFlipHorizontal, Source={StaticResource BitmapSamplesLocalization}}"
                            Click="FlipH_Clicked"
                            />
                        <MenuFlyoutItem
                            Text="{Binding MenuFlipVertical, Source={StaticResource BitmapSamplesLocalization}}"
                            Click="FlipV_Clicked"
                            />
                        <MenuFlyoutSeparator />
                        <MenuFlyoutItem
                            Text="{Binding MenuScaleIn, Source={StaticResource BitmapSamplesLocalization}}"
                            Click="ScaleIn_Clicked"
                            />
                        <MenuFlyoutItem
                            Text="{Binding MenuScaleOut, Source={StaticResource BitmapSamplesLocalization}}"
                            Click="ScaleOut_Clicked"
                            />
                        <MenuFlyoutSeparator />
                        <MenuFlyoutItem
                            Text="{Binding Restart_Content, Source={StaticResource BitmapSamplesLocalization}}"
                            Click="Restart_Clicked"
                            />
                    </MenuFlyout>
                </Button.Flyout>
            </Button>
        </StackPanel>
        <Grid Name="imageGrid" Grid.Row="1" Margin="0 0 0 10" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Image Stretch="Uniform" Name="image" Grid.RowSpan="3" Grid.ColumnSpan="3"/>
            <Grid Name="topMask" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" />
            <Grid Name="bottomMask" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" Background="{StaticResource MaskBrush}" />
            <Grid Name="leftMask" Grid.RowSpan="2" Grid.Row="1" Background="{StaticResource MaskBrush}" />
            <Grid Name="rightMask" Grid.Column="2" Grid.RowSpan="2" Background="{StaticResource MaskBrush}" />
        </Grid>
        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's window size -->
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="540" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="button1.Width" Value="120" />
                        <Setter Target="button1.Margin" Value="5 0 5 0" />
                        <Setter Target="button2.Width" Value="80" />
                        <Setter Target="button2.Margin" Value="0 0 5 0" />
                        <Setter Target="button3.Width" Value="130" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
