From d98cf86914ae8e7ed288b71b76061fb9c3b19516 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Jean-Philippe=20Bruy=C3=A8re?= <jp_bruyere@hotmail.com>
Date: Sat, 27 Mar 2021 14:15:51 +0100
Subject: [PATCH] samples works

---
 Samples/common/ui/Interfaces/Divers/0.crow    |  2 +-
 .../ui/Interfaces/Divers/splitter0.crow       |  6 +-
 .../ui/Interfaces/Divers/splitter2.crow       |  5 +
 .../ui/Interfaces/Divers/splitter3.crow       |  7 ++
 .../ui/Interfaces/Divers/splitter4.crow       |  7 ++
 .../Experimental/multiColorPick.crow          | 25 +++++
 .../Experimental/multiColorPick2.crow         | 46 +++++++++
 .../ui/Interfaces/Experimental/table-fit.crow | 22 +++++
 .../ui/Interfaces/Experimental/table.crow     | 14 +++
 .../ui/Interfaces/Experimental/table2.crow    | 18 ++++
 .../ui/Interfaces/Experimental/table3.crow    |  9 ++
 .../Interfaces/Experimental/tabviewTest.crow  | 22 +++++
 .../Experimental/tabviewTestVertical.crow     | 31 +++++++
 .../Experimental/tabviewTestVertical2.crow    | 53 +++++++++++
 Samples/common/ui/icons/bar-chart.svg         | 10 +-
 .../common/ui/templates/ColorPicker.template  | 93 ++++++++++++-------
 Samples/common/ui/templates/TabItem.template  | 20 ++--
 17 files changed, 332 insertions(+), 58 deletions(-)
 create mode 100644 Samples/common/ui/Interfaces/Divers/splitter2.crow
 create mode 100644 Samples/common/ui/Interfaces/Divers/splitter3.crow
 create mode 100644 Samples/common/ui/Interfaces/Divers/splitter4.crow
 create mode 100644 Samples/common/ui/Interfaces/Experimental/multiColorPick.crow
 create mode 100644 Samples/common/ui/Interfaces/Experimental/multiColorPick2.crow
 create mode 100644 Samples/common/ui/Interfaces/Experimental/table-fit.crow
 create mode 100644 Samples/common/ui/Interfaces/Experimental/table.crow
 create mode 100644 Samples/common/ui/Interfaces/Experimental/table2.crow
 create mode 100644 Samples/common/ui/Interfaces/Experimental/table3.crow
 create mode 100644 Samples/common/ui/Interfaces/Experimental/tabviewTest.crow
 create mode 100644 Samples/common/ui/Interfaces/Experimental/tabviewTestVertical.crow
 create mode 100644 Samples/common/ui/Interfaces/Experimental/tabviewTestVertical2.crow

diff --git a/Samples/common/ui/Interfaces/Divers/0.crow b/Samples/common/ui/Interfaces/Divers/0.crow
index adc13fd8..49cb6605 100644
--- a/Samples/common/ui/Interfaces/Divers/0.crow
+++ b/Samples/common/ui/Interfaces/Divers/0.crow
@@ -73,7 +73,7 @@
 			</HorizontalStack>
 		</VerticalStack>
 		<Splitter />
-		<VerticalStack Width="40%" Margin="5" Spacing="5">
+		<VerticalStack Width="Stretched" Margin="5" Spacing="5">
 			<Expandable>
 				<Image Path="#Crow.Icons.crow.svg" />
 			</Expandable>
diff --git a/Samples/common/ui/Interfaces/Divers/splitter0.crow b/Samples/common/ui/Interfaces/Divers/splitter0.crow
index 218ba621..6c97e008 100644
--- a/Samples/common/ui/Interfaces/Divers/splitter0.crow
+++ b/Samples/common/ui/Interfaces/Divers/splitter0.crow
@@ -1,7 +1,7 @@
 <HorizontalStack Margin="50">
-	<Widget Background="SeaGreen" Width="33%"/>
+	<Label Text="{/Width}" Height="Stretched" Background="SeaGreen" Width="33%" Margin="5"/>
 	<Splitter/>
-	<Widget Background="SeaGreen" Width="33%"/>
+	<Label Text="{/Width}" Height="Stretched" Background="SeaGreen" Width="33%" Margin="5"/>
 	<Splitter/>
-	<Widget Background="SeaGreen"/>
+	<Label Text="{/Width}" Height="Stretched" Background="SeaGreen" Width="Stretched" Margin="5"/>
 </HorizontalStack>
diff --git a/Samples/common/ui/Interfaces/Divers/splitter2.crow b/Samples/common/ui/Interfaces/Divers/splitter2.crow
new file mode 100644
index 00000000..37f6fee9
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Divers/splitter2.crow
@@ -0,0 +1,5 @@
+<HorizontalStack Margin="50" Width="Fit">
+	<Label Text="{/Width}" Height="Stretched" Background="SeaGreen" Width="100"/> 
+	<Splitter Background="Grey"/>
+	<Label Text="{/Width}" Height="Stretched" Background="SeaGreen" Width="200"/>
+</HorizontalStack>
diff --git a/Samples/common/ui/Interfaces/Divers/splitter3.crow b/Samples/common/ui/Interfaces/Divers/splitter3.crow
new file mode 100644
index 00000000..f1e260a8
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Divers/splitter3.crow
@@ -0,0 +1,7 @@
+<HorizontalStack Margin="50" Width="Fit" Background="RoyalBlue"> 
+	<Label MinimumSize="20,0" Height="Stretched" Text="{/Width}" Background="SeaGreen" Width="100"/>
+	<Splitter Background="Grey"/>
+	<Label MinimumSize="20,0" Height="Stretched" Text="{/Width}" Background="SeaGreen" Width="100"/>
+	<Splitter Background="Grey"/>
+	<Label MinimumSize="20,0" Height="Stretched" Text="{/Width}" Background="SeaGreen" Width="100"/>
+</HorizontalStack>
diff --git a/Samples/common/ui/Interfaces/Divers/splitter4.crow b/Samples/common/ui/Interfaces/Divers/splitter4.crow
new file mode 100644
index 00000000..142cc502
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Divers/splitter4.crow
@@ -0,0 +1,7 @@
+<VerticalStack Margin="50" Height="Stretched" Background="RoyalBlue"> 
+	<Label MinimumSize="0,20" Width="Stretched" Text="{/Height}" Background="SeaGreen" Height="30%"/>
+	<Splitter Background="Grey"/>
+	<Label MinimumSize="0,20" Width="Stretched" Text="{/Height}" Background="SeaGreen" Height="Stretched"/>
+	<Splitter Background="Grey"/>
+	<Label MinimumSize="0,20" Width="Stretched" Text="{/Height}" Background="SeaGreen" Height="30%"/>
+</VerticalStack>
diff --git a/Samples/common/ui/Interfaces/Experimental/multiColorPick.crow b/Samples/common/ui/Interfaces/Experimental/multiColorPick.crow
new file mode 100644
index 00000000..5b01c069
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Experimental/multiColorPick.crow
@@ -0,0 +1,25 @@
+<VerticalStack>
+	<ColorPicker Name="cp" Width="300" Height="20" >
+		<Template>
+			<ColorPicker CurrentColor="{²./CurrentColor}" Height="Stretched">
+				<Template>
+					<ListBox Data="{./AvailableColors}" SelectedItemChanged="./onSelectedItemChanged">
+						<Template>
+							<Scroller Name="scroller1" Margin="5" Height="Stretched">
+								<Wrapper Name="ItemsContainer" Height="Fit" VerticalAlignment="Top"/>
+							</Scroller>
+						</Template>
+						<ItemTemplate>
+							<Border Width="16" Height="16" Background="{}" Foreground="Transparent" Tooltip="{}"
+													MouseEnter="{Foreground=Black}"
+													MouseLeave="{Foreground=Transparent}"/>	
+						</ItemTemplate>
+					</ListBox>
+				</Template>
+			</ColorPicker>
+		</Template>
+	</ColorPicker>
+	<Border CornerRadius="5" Width="60" Height="40" Background="{../cp.CurrentColor}">
+		<Label Text="{../../cp.CurrentColor}"/>
+	</Border>
+</VerticalStack>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Experimental/multiColorPick2.crow b/Samples/common/ui/Interfaces/Experimental/multiColorPick2.crow
new file mode 100644
index 00000000..211937c4
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Experimental/multiColorPick2.crow
@@ -0,0 +1,46 @@
+<VerticalStack>
+	<ColorPicker Name="cp"  Height="20" Background="Grey" >
+		<Template>
+			<Popper Margin="0" Caption="{./CurrentColor}" Background="{./Background}" >
+				<Template>
+					<CheckBox Margin="0" Caption="{./Caption}" IsChecked="{²./IsPopped}" Background="{./Background}">
+						<Template>
+							<HorizontalStack Margin="3"  Spacing="3" Background="{./Background}">
+								<Border Width="18" Height="12" CornerRadius="3"
+									Background="{../../../../CurrentColor}">
+								</Border>
+								<Label Width="Stretched" Text="{./Caption}" />
+							</HorizontalStack>
+						</Template>/>{}
+					</CheckBox>
+				</Template>
+				<TabView TabWidth="60" LeftSlope="0" RightSlope="0" MinimumSize="{../../MinimumPopupSize}" Width="Fit" Height="Fit" ActivateNewTab="false">
+					<TabItem Template="/mnt/devel/crow/Samples/common/ui/templates/TabItem.template" Caption="HSV" Width="Fit" Height="Fit">
+						<ColorPicker CurrentColor="{²../../../../CurrentColor}" />
+					</TabItem>
+					<TabItem Template="/mnt/devel/crow/Samples/common/ui/templates/TabItem.template" Caption="Names" Width="Fit" Height="Stretched">						
+						<ColorPicker CurrentColor="{²../../../../CurrentColor}" Height="Stretched" >
+							<Template>
+								<ListBox Margin="0" Width="Stretched" Data="{./AvailableColors}" SelectedItemChanged="./onSelectedItemChanged">
+									<Template>
+										<Scroller Name="scroller1" Margin="5" ClipToClientRect="true" >
+											<Wrapper Name="ItemsContainer" Height="Fit" VerticalAlignment="Top"/>
+										</Scroller>
+									</Template>
+									<ItemTemplate>
+										<Border Width="16" Height="16" Background="{}" Foreground="Transparent" Tooltip="{}"
+																MouseEnter="{Foreground=Black}"
+																MouseLeave="{Foreground=Transparent}"/>	
+									</ItemTemplate>
+								</ListBox>
+							</Template>
+						</ColorPicker>
+					</TabItem>
+				</TabView>
+			</Popper>
+		</Template>
+	</ColorPicker>
+	<Border CornerRadius="5" Width="60" Height="40" Background="{../cp.CurrentColor}">
+		<Label Text="{../../cp.CurrentColor}"/>
+	</Border>
+</VerticalStack>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Experimental/table-fit.crow b/Samples/common/ui/Interfaces/Experimental/table-fit.crow
new file mode 100644
index 00000000..138b60e7
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Experimental/table-fit.crow
@@ -0,0 +1,22 @@
+<Table Columns="test,Fit;test,Fit" Width="Fit" Background="Blue"> 
+	<TableRow Height="Fit" Background="Red" Margin="5">
+		<Label Text="col1" Background="Grey"/>
+		<Label Text="col2" Background="Grey"/>
+	</TableRow>
+	<TableRow Height="Fit" Background="Red" Margin="5">
+		<Label Text="this is" Background="Grey"/>
+		<Label Text="{/Width}" Background="Grey"/>
+	</TableRow>
+	<TableRow Height="Fit" Background="Red" Margin="5">
+		<Label Text="{/Width}" Background="Grey"/>
+		<Label Text="fkdksls" Background="Grey"/>
+	</TableRow>
+	<TableRow Height="Fit" Background="Red" Margin="5">
+		<Label Text="{/Width}" Background="Grey"/>
+		<Label Text="{/Width}" Background="Grey"/>
+	</TableRow>
+	<TableRow Height="Fit" Background="Red" Margin="5">
+		<Label Text="{/Width}" Background="Grey"/>
+		<Label Text="{/Width}" Background="Grey"/>
+	</TableRow>
+</Table>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Experimental/table.crow b/Samples/common/ui/Interfaces/Experimental/table.crow
new file mode 100644
index 00000000..b8277a2b
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Experimental/table.crow
@@ -0,0 +1,14 @@
+<Table Columns="test,Fit;test,200" Width="Fit" Background="Blue"> 
+	<TableRow Height="Fit" Background="Red" Margin="5">
+		<Label Text="col1" Background="Grey"/>
+		<Label Text="col2" Background="Grey"/>
+	</TableRow>
+	<TableRow Height="Fit" Background="Red" Margin="5">
+		<Label Text="this is a test" Background="Grey"/>
+		<Label Text="{/Width}" Background="Grey"/>
+	</TableRow>
+	<TableRow Height="Fit" Background="Red" Margin="5">
+		<Label Text="{/Width}" Background="Grey"/>
+		<Label Text="fkdksls" Background="Grey"/>
+	</TableRow>
+</Table>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Experimental/table2.crow b/Samples/common/ui/Interfaces/Experimental/table2.crow
new file mode 100644
index 00000000..5416897c
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Experimental/table2.crow
@@ -0,0 +1,18 @@
+<Table Foreground="White" Columns="test,Fit;test,Fit" Background="White" Width="Fit" Height="Fit" Margin="1" Spacing="1" > 
+	<TableRow Height="Fit"  Spacing="1" Margin="0"
+			MouseEnter="{Background=RoyalBlue}"
+			MouseLeave="{Background=Transparent}">
+		<Label Text="col1qsf" Margin="5" Background="0.3,0.3,0.3,0.8"/>
+		<Label Text="col1qsf" Margin="5" Background="0.3,0.3,0.3,0.8"/>
+		<Label Text="col1qsf" Margin="5" Background="0.3,0.3,0.3,0.8"/>
+	</TableRow>
+	<TableRow Height="Fit" Spacing="0" Margin="0"
+			MouseEnter="{Background=RoyalBlue}"
+			MouseLeave="{Background=Transparent}">
+		<Label Text="col1qsf" Margin="5" Background="0.3,0.3,0.3,0.8"/>
+		<Label Text="col1qsf" Margin="5" Background="0.3,0.3,0.3,0.8"/>
+		<Label Text="col1qsf" Margin="5" Background="0.3,0.3,0.3,0.8"/>
+	</TableRow>
+	
+
+</Table>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Experimental/table3.crow b/Samples/common/ui/Interfaces/Experimental/table3.crow
new file mode 100644
index 00000000..0a9e0b52
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Experimental/table3.crow
@@ -0,0 +1,9 @@
+<Table Foreground="White" Columns="test,Fit;test,Fit" Background="White" Width="Fit" Height="Fit" Margin="100" Spacing="10" > 
+	<TableRow Height="Fit"  Spacing="3" Margin="10"
+			MouseEnter="{Background=RoyalBlue}"
+			MouseLeave="{Background=Transparent}">
+		<Label Text="col1qsf" Margin="5" Background="0.3,0.3,0.3,0.8"/>
+		<Label Text="col1qsf" Margin="5" Background="0.3,0.3,0.3,0.8"/>
+		<Label Text="col1qsf" Margin="5" Background="0.3,0.3,0.3,0.8"/>
+	</TableRow>
+</Table>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Experimental/tabviewTest.crow b/Samples/common/ui/Interfaces/Experimental/tabviewTest.crow
new file mode 100644
index 00000000..c578b0ca
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Experimental/tabviewTest.crow
@@ -0,0 +1,22 @@
+<ListBox >
+	<Template>
+		<VerticalStack> 
+			<ListBox Data="{./Items}" Height="Fit">
+				<Template>
+					<HorizontalStack Name="ItemsContainer" Background="{./Background}"/>
+				</Template>
+				<ItemTemplate>
+					<ListItem Width="Fit" Background="Transparent" IsSelected="{IsVisible}"
+							Selected="{.DataSource.Visible='true'};{Background=Blue}"
+							Unselected="{.DataSource.Visible='false'};{Background=Transparent}"> 
+						<Label Text="{Caption}" Margin="5" />
+					</ListItem>
+				</ItemTemplate>
+			</ListBox>			
+			<Group Name="ItemsContainer"/>
+		</VerticalStack>
+	</Template>
+	<GroupBox Caption="item 1" IsVisible="false"/>
+	<GroupBox Caption="item 2" IsVisible="true"/>
+	<GroupBox Caption="item 3" IsVisible="false"/>
+</ListBox>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Experimental/tabviewTestVertical.crow b/Samples/common/ui/Interfaces/Experimental/tabviewTestVertical.crow
new file mode 100644
index 00000000..cc224ec6
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Experimental/tabviewTestVertical.crow
@@ -0,0 +1,31 @@
+<HorizontalStack Spacing="0" > 
+	<ListBox Data="{../grp.Children}" Width="Fit"> 
+		<Template>
+			<VerticalStack Name="ItemsContainer" Background="{./Background}"/>
+		</Template>
+		<ItemTemplate>
+			<ListItem Height="Fit" Background="Transparent" IsSelected="{IsVisible}"
+					Selected="{.DataSource.Visible='true'};{Background=Grey}"
+					Unselected="{.DataSource.Visible='false'};{Background=Transparent}"> 
+				<Label Text="{Name}" Margin="5" />
+			</ListItem>
+		</ItemTemplate>
+	</ListBox>
+	<Group Name="grp" Background="Grey" Margin="10">
+		<Container Name="item 1" IsVisible="true" >
+			<TextBox Text="test" Height="Stretched" Width="Stretched" Multiline="true"/>
+		</Container>
+		<Container Name="item 2" IsVisible="false">
+			<TextBox Text="test" Height="Stretched" Width="Stretched" Multiline="true"/>
+		</Container>
+		<Container Name="item 3" IsVisible="false">
+			<TextBox Text="test" Height="Stretched" Width="Stretched" Multiline="true"/>
+		</Container>
+		<Container Name="item 4" IsVisible="false">
+			<TextBox Text="test" Height="Stretched" Width="Stretched" Multiline="true"/>
+		</Container>
+		<Container Name="item 5" IsVisible="false">
+			<ColorPicker Height="Stretched" Width="Stretched" />
+		</Container>
+	</Group>	
+</HorizontalStack>
diff --git a/Samples/common/ui/Interfaces/Experimental/tabviewTestVertical2.crow b/Samples/common/ui/Interfaces/Experimental/tabviewTestVertical2.crow
new file mode 100644
index 00000000..6ecc74ed
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Experimental/tabviewTestVertical2.crow
@@ -0,0 +1,53 @@
+<HorizontalStack Spacing="0" > 
+	<ListBox Data="{../grp.Children}" Width="Fit"> 
+		<Template>
+			<VerticalStack Name="ItemsContainer" Background="{./Background}"/> 
+		</Template>
+		<ItemTemplate>
+			<ListItem Height="Fit" Background="Transparent" IsSelected="{IsVisible}"
+					Selected="{.DataSource.Visible='true'};{Background=${ControlBorderColor}}"
+					Unselected="{.DataSource.Visible='false'};{Background=Transparent}">
+				<HorizontalStack Margin="5" >  
+					<Label Text="{Caption}" Margin="5" />
+					<Border CornerRadius="6" BorderWidth="1" Foreground="Transparent"  Height="10" Width="10" VerticalAlignment="Top"
+						MouseEnter="{Foreground=White}" MouseLeave="{Foreground=Transparent}">
+						<Image Focusable="true" Name="Image" Margin="0" Width="Stretched" Height="Stretched" Path="#Crow.Icons.exit2.svg"
+							 MouseClick="onQuitPress"/>
+					</Border>
+					</HorizontalStack>
+			</ListItem>
+		</ItemTemplate>
+	</ListBox>
+	<Group Name="grp" Background="${ControlBorderColor}" Margin="10">
+		<Window Template="#Crow.ToolWindow.template" Caption="item 1" IsVisible="true" Width="Stretched" Height="Stretched" Resizable="False" >
+			<Template>
+				<Container Name="Content"/>
+			</Template>
+			<TextBox Text="test" Height="Stretched" Width="Stretched" Multiline="true"/>
+		</Window>
+		<Window Caption="item 2" IsVisible="false" Width="Stretched" Height="Stretched" Resizable="False" >
+			<Template>
+				<Container Name="Content"/>
+			</Template>
+			<TextBox Text="test" Height="Stretched" Width="Stretched" Multiline="true"/>
+		</Window>
+		<Window Caption="item 3" IsVisible="false" Width="Stretched" Height="Stretched" Resizable="False" >
+			<Template>
+				<Container Name="Content"/>
+			</Template>
+			<TextBox Text="test" Height="Stretched" Width="Stretched" Multiline="true"/>
+		</Window>
+		<Window Caption="item 4" IsVisible="false" Width="Stretched" Height="Stretched" Resizable="False" >
+			<Template>
+				<Container Name="Content"/>
+			</Template>
+			<TextBox Text="test" Height="Stretched" Width="Stretched" Multiline="true"/>
+		</Window>
+		<Window Caption="item 5" IsVisible="false" Width="Stretched" Height="Stretched" Resizable="False" >
+			<Template>
+				<Container Name="Content"/>
+			</Template>
+			<TextBox Text="test" Height="Stretched" Width="Stretched" Multiline="true"/>
+		</Window>
+	</Group>	
+</HorizontalStack>
diff --git a/Samples/common/ui/icons/bar-chart.svg b/Samples/common/ui/icons/bar-chart.svg
index ff86c961..9e79812d 100644
--- a/Samples/common/ui/icons/bar-chart.svg
+++ b/Samples/common/ui/icons/bar-chart.svg
@@ -2,9 +2,9 @@
 <!-- Generated by IcoMoon.io -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
-<path fill="#dddddd" d="M0 15h15v1h-15v-1z"></path>
-<path fill="#dddddd" d="M0 11h3v3h-3v-3z"></path>
-<path fill="#dddddd" d="M4 9h3v5h-3v-5z"></path>
-<path fill="#dddddd" d="M8 5h3v9h-3v-9z"></path>
-<path fill="#dddddd" d="M12 0h3v14h-3v-14z"></path>
+<path fill="#000000" d="M0 15h15v1h-15v-1z"></path>
+<path fill="#000000" d="M0 11h3v3h-3v-3z"></path>
+<path fill="#000000" d="M4 9h3v5h-3v-5z"></path>
+<path fill="#000000" d="M8 5h3v9h-3v-9z"></path>
+<path fill="#000000" d="M12 0h3v14h-3v-14z"></path>
 </svg>
diff --git a/Samples/common/ui/templates/ColorPicker.template b/Samples/common/ui/templates/ColorPicker.template
index 96d6edbd..2d963fc4 100644
--- a/Samples/common/ui/templates/ColorPicker.template
+++ b/Samples/common/ui/templates/ColorPicker.template
@@ -1,39 +1,60 @@
 <?xml version="1.0"?>
-<Popper Margin="0" Caption="{./CurrentColor}" Background="{./Background}" >
-	<Template>
-		<CheckBox Margin="0" Caption="{./Caption}" IsChecked="{²./IsPopped}" Background="{./Background}">
-			<Template>
-				<HorizontalStack Margin="3"  Spacing="3" Background="{./Background}">
-					<Border Width="18" Height="12" CornerRadius="3"
-						Background="{../../../../CurrentColor}">
-					</Border>
-					<Label Width="Stretched" Text="{./Caption}" />
+<TabView >
+	<TabItem Caption="HSV">
+		<Border Background="{./Background}"	Foreground="{./Foreground}" Width="Stretched"
+				CornerRadius="{./CornerRadius}" BorderWidth="1">		
+			<VerticalStack Margin="2">
+				<Widget Width="30" Height="16" Background="{./CurrentColor}"/>
+				<HorizontalStack Height="Fit">
+					<Label Style="labColor" Text="R:"/>
+					<ColorSlider Name="cs" Component="Red" CurrentColor="{²../../../../../../CurrentColor}"/>
+					<Label Style="labColorV" Text="{../cs.CurrentValue}" />
+				</HorizontalStack>
+				<HorizontalStack Height="Fit">
+					<Label Style="labColor" Text="G:"/>
+					<ColorSlider Name="cs" Component="Green" CurrentColor="{²../../../../../../CurrentColor}"/>
+					<Label Style="labColorV" Text="{../cs.CurrentValue}" />
+				</HorizontalStack>
+				<HorizontalStack Height="Fit">
+					<Label Style="labColor" Text="B:"/>
+					<ColorSlider Name="cs" Component="Blue" CurrentColor="{²../../../../../../CurrentColor}"/>
+					<Label Style="labColorV" Text="{../cs.CurrentValue}" />
+				</HorizontalStack>
+				<HorizontalStack Height="Fit">
+					<Label Style="labColor" Text="A:"/>
+					<ColorSlider Name="cs" Component="Alpha" CurrentColor="{²../../../../../../CurrentColor}"/>
+					<Label Style="labColorV" Text="{../cs.CurrentValue}" />
 				</HorizontalStack>
+				<HorizontalStack Height="Fit">
+					<Label Style="labColor" Text="H:"/>
+					<ColorSlider Name="cs" Component="Hue" CurrentColor="{²../../../../../../CurrentColor}"/>
+					<Label Style="labColorV" Text="{../cs.CurrentValue}" />
+				</HorizontalStack>
+				<HorizontalStack Height="Fit">
+					<Label Style="labColor" Text="S:"/>
+					<ColorSlider Name="cs" Component="Saturation" CurrentColor="{²../../../../../../CurrentColor}"/>
+					<Label Style="labColorV" Text="{../cs.CurrentValue}" />
+				</HorizontalStack>			
+				<HorizontalStack Height="Fit">
+					<Label Style="labColor" Text="V:"/>
+					<ColorSlider Name="cs" Component="Value" CurrentColor="{²../../../../../../CurrentColor}"/>
+					<Label Style="labColorV" Text="{../cs.CurrentValue}" />
+				</HorizontalStack>
+			</VerticalStack>			
+		</Border>
+	</TabItem>
+	<TabItem Caption="List" Height="Stretched">
+		<ListBox Data="{../../../ColorList}" SelectedItem="{²../../../CurrentColor}">
+			<Template>
+				<Scroller Name="scroller1" Margin="5">
+					<Wrapper Name="ItemsContainer" Height="Fit" VerticalAlignment="Top"/>
+				</Scroller>
 			</Template>
-		</CheckBox>
-	</Template>
-	<TabView MinimumSize="{../../MinimumPopupSize}" Width="Fit" Height="Fit" ActivateNewTab="false">
-		<TabItem Template="#ui.TabItem.template" Caption="HSV" Width="Fit" Height="Fit">
-			<ColorPicker CurrentColor="{²../../../../CurrentColor}" />
-		</TabItem>
-		<TabItem Template="#ui.TabItem.template" Caption="Colors names" SelectedBackground="Jet" Width="Stretched" Height="Stretched">			
-			<ColorPicker CurrentColor="{²../../../../CurrentColor}" >
-				<Template>
-					<ListBox Data="{./AvailableColors}" SelectedItem="{²./CurrentColor}" Width="200" Height="200">
-						<!--<Template>
-							<Scroller Name="scroller1" Margin="5">
-								<Wrapper Name="ItemsContainer" Height="Fit" VerticalAlignment="Top"/>
-							</Scroller>
-						</Template>
-						<ItemTemplate>
-							<Border Width="16" Height="16" Background="{}" Foreground="Transparent" Tooltip="{}"
-											MouseEnter="{Foreground=Black}"
-											MouseLeave="{Foreground=Transparent}"/>	
-						</ItemTemplate>-->
-					</ListBox>
-				</Template>
-			</ColorPicker>
-		</TabItem>
-	</TabView>	
-</Popper>
-
+			<ItemTemplate>
+				<Border Width="16" Height="16" Background="{}" Foreground="Transparent" Tooltip="{}"
+								MouseEnter="{Foreground=Black}"
+								MouseLeave="{Foreground=Transparent}"/>	
+			</ItemTemplate>
+		</ListBox>
+	</TabItem>
+</TabView>
\ No newline at end of file
diff --git a/Samples/common/ui/templates/TabItem.template b/Samples/common/ui/templates/TabItem.template
index a95b4dbe..886c980c 100644
--- a/Samples/common/ui/templates/TabItem.template
+++ b/Samples/common/ui/templates/TabItem.template
@@ -1,20 +1,14 @@
 <?xml version="1.0"?>
-<GenericStack Orientation="Vertical" Spacing="0"
-		Background="{./Background}"
-		MouseEnter="{/caption.Foreground=White}"
-		MouseLeave="{/caption.Foreground=Grey}">
-	<HorizontalStack Margin="2" Left="{./TabOffset}"
-		Name="TabTitle"
-		HorizontalAlignment="Left"
-		Height="{./TabHeight}"
-		Width="{./TabWidth}">
-		<Label Name="caption" Text="{./Caption}" Foreground="Grey" Width="Stretched"/>
-		<Border CornerRadius="5" BorderWidth="1" Foreground="Transparent"  Height="12" Width="12"
+<VerticalStack Spacing="0" Background="{./Background}" >
+	<HorizontalStack Margin="2" Left="{./TabOffset}" Name="TabTitle"
+		HorizontalAlignment="Left" Height="{./TabHeight}" Width="{./TablWidth}">
+		<Label Width="Stretched" Name="caption" Text="{./Caption}" Foreground="White" />
+<!--		<Border CornerRadius="5" BorderWidth="1" Foreground="Transparent"  Height="12" Width="12"
 					MouseEnter="{Foreground=White}" MouseLeave="{Foreground=Transparent}">
 			<Image Focusable="true" Name="Image" Margin="0" Width="Stretched" Height="Stretched" Path="#Crow.Icons.exit2.svg"
 				 MouseClick="./butCloseTabClick"/>
-		</Border>
+		</Border>-->
 	</HorizontalStack>
 	<Container Name="Content"/>
-</GenericStack>
+</VerticalStack>
 
-- 
2.47.3