<UserControl x:Class="TileViewVirtualization.MainPage" 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:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:system="clr-namespace:System;assembly=mscorlib" mc:Ignorable="d">

	<UserControl.Resources>

		<DataTemplate x:Key="headerTemplate">
			<TextBlock Text="{Binding Header}" />
		</DataTemplate>

		<DataTemplate x:Key="contentTemplate">
			<Image Source="{Binding Image}" />
		</DataTemplate>

		<Style TargetType="telerik:RadTileView">
			<Setter Property="Margin" Value="10" />
			<Setter Property="BorderBrush" Value="Black" />
			<Setter Property="BorderThickness" Value="1" />
			<Setter Property="PreservePositionWhenMaximized" Value="True" />
			<Setter Property="TileStateChangeTrigger" Value="SingleClick" />
			<Setter Property="telerik:TileViewPanel.IsVirtualized" Value="True" />
			<Setter Property="IsAutoScrollingEnabled" Value="True" />
			<Setter Property="IsDockinEnabled" Value="True" />
			<Setter Property="ContentTemplate" Value="{StaticResource contentTemplate}" />
			<Setter Property="ItemTemplate" Value="{StaticResource headerTemplate}" />
		</Style>
	</UserControl.Resources>
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="Auto" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>

		<StackPanel Margin="20">
			<TextBlock Text="Automaic scrolling while dragging: " FontWeight="Bold" />
			<TextBlock TextWrapping="Wrap"
					Text="Drag an item close to an edge (where you can scrol in a direction) and hover there for .5 seconds. The TileView will start to scroll automatically in the requested direction. (Experience similiar to Windows Explorer and dragging items)." />
			<TextBlock Text="Docking Position and auto dock: " FontWeight="Bold" />
			<TextBlock
					Text="Drag an item out of the TileView and drop it there in order to maximize it at that position (edge)."
					TextWrapping="Wrap" />
		</StackPanel>

		<telerik:RadTileView ItemsSource="{Binding}" Grid.Row="1"
				ColumnsCount="{Binding ElementName=columnsCount, Path=Value}"
				MinimizedColumnWidth="{Binding ElementName=minColumnWidth, Path=SelectedItem}"
				ColumnWidth="{Binding ElementName=ColumnWidth, Path=SelectedItem}"
				RowHeight="{Binding ElementName=RowHeight, Path=SelectedItem}"
				MinimizedRowHeight="{Binding ElementName=minRowHeight, Path=SelectedItem}"
				MinimizedItemsPosition="{Binding ElementName=dockPosition, Path=SelectedItem, Mode=TwoWay}" />

		<StackPanel Grid.Column="1" Margin="10" Grid.RowSpan="2">
			<TextBlock Text="Columns Count" />
			<telerik:RadNumericUpDown x:Name="columnsCount" Minimum="1" Maximum="10" Value="3" />
			<TextBlock Text="ColumnWidth" />
			<telerik:RadComboBox x:Name="ColumnWidth" SelectedIndex="0">
				<system:String>*</system:String>
				<system:String>Auto</system:String>
				<system:String>150</system:String>
				<system:String>250</system:String>
				<system:String>350</system:String>
				<system:String>450</system:String>
			</telerik:RadComboBox>
			<TextBlock Text="RowHeight" />
			<telerik:RadComboBox x:Name="RowHeight" SelectedIndex="2">				
				<system:String>Auto</system:String>
				<system:String>100</system:String>
				<system:String>200</system:String>
				<system:String>300</system:String>
				<system:String>400</system:String>
			</telerik:RadComboBox>

			<TextBlock Text="MinimizedColumnWidth" />
			<telerik:RadComboBox x:Name="minColumnWidth" SelectedIndex="1">
				<system:String>Auto</system:String>
				<system:String>150</system:String>
				<system:String>250</system:String>
				<system:String>350</system:String>
				<system:String>450</system:String>
			</telerik:RadComboBox>
			<TextBlock Text="MinimizedRowHeight" />
			<telerik:RadComboBox x:Name="minRowHeight" SelectedIndex="1">
				<system:String>Auto</system:String>
				<system:String>150</system:String>
				<system:String>250</system:String>
				<system:String>350</system:String>
				<system:String>450</system:String>
			</telerik:RadComboBox>

			<TextBlock Text="MinimizedItemsPosition" />
			<telerik:RadComboBox x:Name="dockPosition" SelectedIndex="0">
				<telerik:Dock>Right</telerik:Dock>
				<telerik:Dock>Left</telerik:Dock>
				<telerik:Dock>Top</telerik:Dock>
				<telerik:Dock>Bottom</telerik:Dock>
			</telerik:RadComboBox>

		</StackPanel>
	</Grid>
</UserControl>
