<UserControl
	x:DataType="sampleBrowser:ApplicationViewModel"
	xmlns="https://github.com/avaloniaui"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
	xmlns:sampleBrowser="using:ActiproSoftware.SampleBrowser"
	>
	<UserControl.Resources>

		<DrawingGroup x:Key="CheckVectorDrawing">
			<GeometryDrawing Brush="#339933" Geometry="M 0,16 A 16,16 0 1 1 32,16 A 16,16 0 1 1 0,16 Z  M 5.75,17.25 L 8.75,14.25 L 13,19 L 23.5,8.25 L 26.25,11.25 L 13,24.5 Z" />
			<GeometryDrawing Brush="#ffffff" Geometry="M 5.75,17.25 L 8.75,14.25 L 13,19 L 23.5,8.25 L 26.25,11.25 L 13,24.5 Z" />
		</DrawingGroup>

	</UserControl.Resources>

	<ScrollViewer Classes="theme-scroll-overlay" HorizontalScrollBarVisibility="Disabled">
		<StackPanel>

			<sampleBrowser:ProductOverviewHeader>
				Actipro provides numerous controls and useful components that can enhance an application.
				Several helpful value converters for use in bindings are also included.
			</sampleBrowser:ProductOverviewHeader>

			<actipro:MultiColumnPanel Classes="sample-layout-panel" Margin="{actipro:ScaledThickness '6,0'}" MinColumnWidth="390" HorizontalSpacing="{actipro:ScaledDouble 4}" VerticalSpacing="{actipro:ScaledDouble 4}">
				<actipro:MultiColumnPanel MinColumnWidth="260" HorizontalSpacing="{actipro:ScaledDouble 4}" VerticalSpacing="{actipro:ScaledDouble 4}">
					<WrapPanel Orientation="Horizontal">
						<actipro:CopyButton Margin="{actipro:ScaledThickness '0,0,4,0'}" CopyText="Text copied from a CopyButton" VerticalAlignment="Center" />
						<actipro:CopyButton Margin="{actipro:ScaledThickness '0,0,4,0'}" Classes="theme-soft" CopyText="Text copied from a CopyButton" CornerRadius="99" Padding="10" VerticalAlignment="Center" />
						<actipro:ToggleThemeButton Margin="{actipro:ScaledThickness '0,0,4,0'}" VerticalAlignment="Center" />
						<actipro:ToggleThemeButton Classes="theme-soft" CornerRadius="99" Padding="10" VerticalAlignment="Center" />
					</WrapPanel>

					<StackPanel>
						<TextBlock Classes="theme-form-control-label" Text="Hyperlink Text Block" />
						<actipro:HyperlinkTextBlock Text="{Binding ActiproWebSiteUrl}" Command="{Binding OpenUrlCommand}" CommandParameter="{Binding $self.Text}" />
					</StackPanel>
				</actipro:MultiColumnPanel>

				<StackPanel>
					<TextBlock Classes="theme-form-control-label" Text="Mesh Gradient Presenter" />
					<actipro:MeshGradientPresenter Height="{actipro:ScaledDouble 5+40}" Background="#ed8fea" CornerRadius="{actipro:ScaledCornerRadius 1}">
						<actipro:MeshGradientNode Center="1%,95%" Color="#b781fd" />
						<actipro:MeshGradientNode Center="29%,0%" Color="#b781fd" />
						<actipro:MeshGradientNode Center="99%,37%" Color="#eec6ad" />
						<actipro:MeshGradientNode Center="83%,95%" Color="#eec6ad" />
					</actipro:MeshGradientPresenter>
				</StackPanel>

				<StackPanel>
					<TextBlock Classes="theme-form-control-label" Text="Dynamic Image" />
					<Grid ColumnDefinitions="*,10,*">
						<ThemeVariantScope RequestedThemeVariant="Light">
							<Border Padding="{actipro:ScaledThickness 2.5}" BorderThickness="1" CornerRadius="{actipro:ScaledCornerRadius 1}"
									Background="{actipro:ThemeResource Container1BackgroundBrush}"
									BorderBrush="{actipro:ThemeResource Container1BorderBrush}">
								<DockPanel>
									<actipro:DynamicImage DockPanel.Dock="Left" Width="32" Height="32">
										<DrawingImage Drawing="{StaticResource CheckVectorDrawing}" />
									</actipro:DynamicImage>
									<TextBlock Margin="10,0,0,0" FontSize="{actipro:ThemeResource DefaultFontSizeSmall}" Text="Image designed for light theme" 
											   FontStyle="Italic" Foreground="{actipro:ThemeResource DefaultForegroundBrushSecondary}" TextWrapping="Wrap" VerticalAlignment="Center" />
								</DockPanel>
							</Border>
						</ThemeVariantScope>
						<ThemeVariantScope Grid.Column="2" RequestedThemeVariant="Dark">
							<Border Padding="{actipro:ScaledThickness 2.5}" BorderThickness="1" CornerRadius="{actipro:ScaledCornerRadius 1}"
									Background="{actipro:ThemeResource Container1BackgroundBrush}"
									BorderBrush="{actipro:ThemeResource Container1BorderBrush}">
								<DockPanel>
									<actipro:DynamicImage DockPanel.Dock="Left" Width="32" Height="32">
										<DrawingImage Drawing="{StaticResource CheckVectorDrawing}" />
									</actipro:DynamicImage>
									<TextBlock Margin="10,0,0,0" FontSize="{actipro:ThemeResource DefaultFontSizeSmall}" Text="Image auto-adapted for dark theme"
											   FontStyle="Italic" Foreground="{actipro:ThemeResource DefaultForegroundBrushSecondary}" TextWrapping="Wrap" VerticalAlignment="Center" />
								</DockPanel>
							</Border>
						</ThemeVariantScope>
					</Grid>
				</StackPanel>

				<StackPanel>
					<TextBlock Classes="theme-form-control-label" Text="Shadow Chrome and Scrollable Overflow Presenter" />
					<actipro:ShadowChrome Elevation="8">
						<Border Background="{actipro:ThemeResource Container1BackgroundBrush}" CornerRadius="8" Padding="5">
							<actipro:ScrollableOverflowPresenter Orientation="Horizontal">
								<ItemsControl ItemsSource="{actipro:DelimitedArray '#ffb900, #e74856, #0078d7, #0099bc, #7a7574, #767676, #ff8d00, #e81123, #0063b1, #2d7d9a, #5d5a58, #4c4a48, #f7630c, #ea005e, #8e8cd8, #00b7c3, #68768a, #69797e, #ca5010, #c30052, #6b69d6, #038387, #515c6b, #4a5459, #da3b01, #e3008c, #8764b8, #00b294, #567c73, #647c64, #ef6950, #bf0077, #744da9, #018574, #486860, #525e54, #d13438, #c239b3, #b146c2, #00cc6a, #498205, #847545, #ff4343, #9a0089, #881798, #10893e, #107c10, #7e735f', Type=actipro:UIColor}">
									<ItemsControl.ItemsPanel>
										<ItemsPanelTemplate>
											<StackPanel Margin="5" Orientation="Horizontal" Spacing="5" />
										</ItemsPanelTemplate>
									</ItemsControl.ItemsPanel>
									<ItemsControl.ItemTemplate>
										<DataTemplate DataType="actipro:UIColor">
											<sampleBrowser:CopyColorButton Height="60" Content="{Binding}" />
										</DataTemplate>
									</ItemsControl.ItemTemplate>
								</ItemsControl>
							</actipro:ScrollableOverflowPresenter>
						</Border>
					</actipro:ShadowChrome>
				</StackPanel>

			</actipro:MultiColumnPanel>

			<TextBlock Classes="theme-text-body" Margin="{actipro:ScaledThickness 6}" Text="Dive into our individual samples linked below for many more detailed examples."
					   FontStyle="Italic" Foreground="{actipro:ThemeResource DefaultForegroundBrushTertiary}" TextAlignment="Center" />

			<Border Background="{actipro:ThemeResource Container2BackgroundBrush}">
				<StackPanel Classes="sample-layout-panel" Margin="{actipro:ScaledThickness '6,0'}">
					<sampleBrowser:CategorizedSampleItemsControl ItemsSource="{Binding ViewItemInfo.ProductFamily.GroupedItems}" />
				</StackPanel>
			</Border>

		</StackPanel>
	</ScrollViewer>

</UserControl>
