<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="HelloXaml.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloXaml"
	xmlns:model="using:HelloXaml.Models"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <!--
	<Grid x:Name="rootGrid" Background="Azure">
		<Grid.Background>
			<LinearGradientBrush>
				<LinearGradientBrush.GradientStops>
					<GradientStop Color="Black" Offset="0">
					<GradientStop Color="White" Offset="1">
				</LinearGradientBrush.GradientStops>
			</LinearGradientBrush>
		</Grid.Background>
		
		<Button>
			<StackPanel Orientation="Horizontal" Click="Button_Click">
				<Ellipse Width="10" Height="10" Fill="Red"/>
				<TextBlock x:Name="recordTextBlock" Text="Record" Margin="10,0,0,0"/>
			</StackPanel>
		</Button>
	</Grid>
	-->
	
	<Grid x:Name="rootGrid" Width="300" HorizontalAlignment="Center" Margin="20" RowSpacing="5" ColumnSpacing="10">
		
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>

		<TextBlock Grid.Row="0" Grid.Column="0" Text="Name"/>
		<TextBox Grid.Row="0" Grid.Column="1" x:Name="tbName" Text="{x:Bind newPerson.Name, Mode=TwoWay}"/>
		<TextBlock Grid.Row="1" Grid.Column="0"/>
		<Grid Grid.Row="1" Grid.Column="1">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto"/>
				<ColumnDefinition Width="*"/>
				<ColumnDefinition Width="Auto"/>
			</Grid.ColumnDefinitions>
			<Button Grid.Row="0" Grid.Column="1" Content="-" x:Name="tbMin" Click="Decrease_Button"/>
			<Button Grid.Row="0" Grid.Column="2" Content="+" x:Name="tbPlus" Click="Increase_Button"/>
			<TextBox Grid.Row="0" Grid.Column="1" x:Name="tbAge" Text="{x:Bind newPerson.Age, Mode=TwoWay}"/>
		</Grid>

		<Button Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" Click="AddButtonClick">
			<StackPanel Orientation="Horizontal">
				<SymbolIcon Symbol="Add" />
				<TextBlock Text="Add" Margin="5,0,0,0"/>
			</StackPanel>
		</Button>

		<ListView Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" BorderThickness="1" BorderBrush="DarkGray" ItemSource="{x:Bind People}">
			<ListView.ItemTemplate>
				<DataTemplate x:DataType="model:Person">
					<Grid>
						<TextBlock Text="{x:Bind Name}"/>
						<TextBlock Text="{x:Bind Age}" HorizontalAlignment="Right"/>
					</Grid>
				</DataTemplate>
			</ListView.ItemTemplate>
		</ListView>
	</Grid>

</Window>
