<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Codecamp1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    x:Class="Codecamp1.MainPage"
    mc:Ignorable="d">
	<Page.Resources>
		<DataTemplate x:Key="ColorTemplate">
			<Grid Height="110" Width="480" Margin="10" >
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto"/>
					<ColumnDefinition Width="*"/>
				</Grid.ColumnDefinitions>
				<Border Background="{Binding Brush}" Width="110" Height="110"/>
				<StackPanel Grid.Column="1" Margin="10,0,0,0">
					<TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}"/>
					<TextBlock Text="Subtitle" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
				</StackPanel>
			</Grid>
		</DataTemplate>
		<DataTemplate x:Key="ColorTemplate1">
			<Grid Height="110" Width="480" Margin="10" >
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto"/>
					<ColumnDefinition Width="*"/>
				</Grid.ColumnDefinitions>
				<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
					<Image Height="110" Width="110"/>
				</Border>
				<StackPanel Grid.Column="1" Margin="10,0,0,0">
					<TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}"/>
					<TextBlock Text="Subtitle" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
				</StackPanel>
			</Grid>
		</DataTemplate>
		<Flyout x:Key="FlyoutBase1">
			<Grid Height="100" Width="264" DataContext="{Binding Source={StaticResource Locator}}">
				<GridView ItemTemplate="{StaticResource ColorTemplate1}" ItemsSource="{Binding Main.SelectedColors}" IsSwipeEnabled="False" SelectionMode="Single"/>
			</Grid>
		</Flyout>
		<DataTemplate x:Key="DataTemplate">
			<Grid Height="110" Width="480" Margin="10" >
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto"/>
					<ColumnDefinition Width="*"/>
				</Grid.ColumnDefinitions>
				<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
					<Image Height="110" Width="110"/>
				</Border>
				<StackPanel Grid.Column="1" Margin="10,0,0,0">
					<TextBlock Text="{Binding Key, Mode=OneWay}" Style="{StaticResource TitleTextBlockStyle}"/>
					<TextBlock Text="Subtitle" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
				</StackPanel>
			</Grid>
		</DataTemplate>
	</Page.Resources>
	<Page.BottomAppBar>
		<AppBar>
			<AppBarButton Icon="Folder" Label="AppBarButton" Flyout="{StaticResource FlyoutBase1}">
				<Grid Margin="0,0,-1326,-24">
					<Grid.ColumnDefinitions>
						<ColumnDefinition/>
						<ColumnDefinition/>
					</Grid.ColumnDefinitions>
					<StackPanel Orientation="Horizontal"/>
					<StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal"/>
				</Grid>
			</AppBarButton>
		</AppBar>
	</Page.BottomAppBar>

	<Grid Background="{Binding Main.CurrentSelection.Brush}" DataContext="{Binding Source={StaticResource Locator}}">
		<SemanticZoom HorizontalAlignment="Left" VerticalAlignment="Top">
			<SemanticZoom.ZoomedInView>
				<GridView x:Name="gridView" ItemTemplate="{StaticResource ColorTemplate}" ItemsSource="{Binding Main.Colors}" IsSwipeEnabled="False" SelectionMode="Single" SelectedItem="{Binding Main.CurrentSelection, Mode=TwoWay}" Height="768" Width="1366">
					<Interactivity:Interaction.Behaviors>
						<Core:EventTriggerBehavior EventName="SelectionChanged">
							<Core:InvokeCommandAction Command="{Binding Main.AddColoCommand, Mode=OneWay}" CommandParameter="{Binding SelectedItem, ElementName=gridView}"/>
						</Core:EventTriggerBehavior>
					</Interactivity:Interaction.Behaviors>
				</GridView>
			</SemanticZoom.ZoomedInView>
			<SemanticZoom.ZoomedOutView>
				<GridView ItemTemplate="{StaticResource DataTemplate}" ItemsSource="{Binding Main.GroupedColors}" IsSwipeEnabled="False" SelectionMode="Single" Margin="0,0,0,-6" Width="1366"/>
			</SemanticZoom.ZoomedOutView>
		</SemanticZoom>
	</Grid>
</Page>
