slider as base for scrollbar, gauge widget

9 files changed, 131 insertions, 42 deletions

diff --git a/Samples/common/ui/Interfaces/Container/0.crow b/Samples/common/ui/Interfaces/Container/0.crow
index 5ad8de0a..602ca931 100644
--- a/Samples/common/ui/Interfaces/Container/0.crow
+++ b/Samples/common/ui/Interfaces/Container/0.crow
@@ -1,5 +1,11 @@
 <?xml version="1.0"?>
-<Container Background="DimGrey" Margin="10" Width="90%" Height="90%">
-	<Widget Margin="10"  Background="SeaGreen"
-			MinimumSize="50,50"/>
+<Container Background="DarkGrey" Margin="10" Width="90%" Height="90%">
+	<Container Background="Jet" Margin="10" Width="90%" Height="90%">
+		<Container Background="Onyx" Margin="10" Width="90%" Height="90%">
+			<Container Background="DimGrey" Margin="10" Width="90%" Height="90%">
+				<Widget Margin="10"  Background="MediumSeaGreen"
+						MinimumSize="50,50"/>
+			</Container>
+		</Container>
+	</Container>
 </Container>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Divers/colorPicker.crow b/Samples/common/ui/Interfaces/Divers/colorPicker.crow
index 92a5c054..f7e9a0bc 100644
--- a/Samples/common/ui/Interfaces/Divers/colorPicker.crow
+++ b/Samples/common/ui/Interfaces/Divers/colorPicker.crow
@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <VerticalStack>
-	<ColorPicker CurrentColor="{²../go.Background}" Name="colorPicker" Background="DimGrey" Margin="5" Fit="True" />
+	<ColorPicker CurrentColor="{²../go.Background}" Name="colorPicker" Background="DimGrey"  Width="250" />
 	<Widget Name="go" Width="100" Height="60" Background="DarkBlue"/>
 	<Widget Name="go" Width="100" Height="60" Background="{../colorPicker.CurrentColor}"/>
 	<Label Text="{../colorPicker.CurrentColor}"/>
diff --git a/Samples/common/ui/Interfaces/Divers/gauge.crow b/Samples/common/ui/Interfaces/Divers/gauge.crow
new file mode 100644
index 00000000..db03d8f4
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Divers/gauge.crow
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<Container Background="Onyx">
+	<VerticalStack Background="Jet" Fit="true" Margin="10" Spacing="10"> 
+		<Gauge Width="200" Height="10" Background="RoyalBlue" Value="50" CornerRadius="5"/>
+		<NumericControl Width="200" Height="10" Value="40">
+			<Template>
+				<Gauge Maximum="{./Maximum}" Foreground="Black" BorderWidth="1" Background="RoyalBlue" Value="{./Value}" CornerRadius="5"/>
+			</Template>
+		</NumericControl>
+		<HorizontalStack Width="200" Height="200">
+			<Scroller Name="scroller1" Background="White"
+					Margin="2" ScrollY="{../scrollbar1.Value}"
+					ValueChanged="./_scroller_ValueChanged">
+				<Widget VerticalAlignment="Top" Background="vgradient|0:1,0,0,1|1:0,1,0,1" Width="1000" Height="1000"/>
+			</Scroller>
+			<ScrollBar Name="scrollbar1" Value="{../scroller1.ScrollY}"
+				LargeIncrement="{../scroller1.PageHeight}" SmallIncrement="30" Height="Stretched" 
+				CursorSize="{../scroller1.ChildHeightRatio}"
+				Maximum="{../scroller1.MaxScrollY}" />
+		</HorizontalStack>
+	</VerticalStack>
+</Container>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Divers/testSlider.crow b/Samples/common/ui/Interfaces/Divers/testSlider.crow
index 6ed5aa0d..a4caf818 100644
--- a/Samples/common/ui/Interfaces/Divers/testSlider.crow
+++ b/Samples/common/ui/Interfaces/Divers/testSlider.crow
@@ -1,13 +1,59 @@
 <?xml version="1.0"?>
-<VerticalStack Margin="20" Spacing="10" >
-	<Slider Height="10" Width="Stretched"/>
-	<Slider Background="RoyalBlue" Height="10" Width="Stretched"/>
-	<Slider Background="Transparent" Margin="2" Height="10" Width="Stretched"/>
-	<Slider Background="Transparent" CursorSize="10" Height="12" Width="Stretched" CursorType="Circle"/>
+<HorizontalStack Margin="50">
+	<VerticalStack Spacing="10" Width="50%">
+		<Slider Height="20" Width="Stretched"/>
+		<Slider Background="RoyalBlue" Height="50" Width="Stretched" CursorSize="50">
+			<Template>
+				<Group Background="DarkGrey" >
+					<Gauge Height="50%" Background="RoyalBlue" Value="{./Value}" Maximum="{./Maximum}" Minimum="{Minimum}" Orientation="{./Orientation}"/>
+					<Container Name="Cursor" Background="White" >
+						<Label Text="{./Value}" Foreground="Black"/>
+					</Container>
+				</Group>
+			</Template>	
+		</Slider>
+		<Slider Background="Transparent" Margin="2" Height="10" Width="Stretched"/>
+		<Slider Background="Transparent" CursorSize="10" Height="12" >
+			<Template>
+				<Group Background="DarkGrey" >
+					<Gauge Height="50%" Background="RoyalBlue" Value="{./Value}" Maximum="{./Maximum}" Minimum="{Minimum}" Orientation="{./Orientation}"/>
+					<Widget Name="Cursor" Background="White" />
+				</Group>			
+			</Template>
+		</Slider>
+		
+		<Slider Height="10" Width="Stretched" />
+		
+		
+		<Slider ClipToClientRect='false' Background="DarkGrey" CursorSize="50" Height="12" CornerRadius="5" />
+		<Slider ClipToClientRect='false' CacheEnabled='false' Background="Transparent" CursorSize="20" Height="12" Width="Stretched" />
+	</VerticalStack>
 	
-	<Slider Height="10" Width="Stretched" CursorType="None" CursorColor='Red'/>
-	
-	
-	<Slider ClipToClientRect='false' Background="Transparent" CursorSize="20" Height="12" Width="Stretched" CursorType="Circle"/>
-	<Slider ClipToClientRect='false' CacheEnabled='false' Background="Transparent" CursorSize="20" Height="12" Width="Stretched" CursorType="Circle"/>
-</VerticalStack>
\ No newline at end of file
+	<HorizontalStack Spacing="10" >
+		<Slider Orientation="Vertical" Width="20" Height="Stretched"/>
+		<Slider Orientation="Vertical" Width="50" Height="Stretched" Background="RoyalBlue"  CursorSize="50">
+			<Template>
+				<Group Background="DarkGrey" >
+					<Gauge Width="50%" Background="RoyalBlue" Value="{./Value}" Maximum="{./Maximum}" Minimum="{Minimum}" Orientation="{./Orientation}"/>
+					<Container Name="Cursor" Background="White" >
+						<Label Text="{./Value}" Foreground="Black"/>
+					</Container>
+				</Group>
+			</Template>	
+		</Slider>
+		<Slider Orientation="Vertical" Width="10" Height="Stretched" Background="Transparent" Margin="2" />
+		<Slider Orientation="Vertical" Width="12" Height="Stretched" Background="Transparent" CursorSize="10" >
+			<Template>
+				<Group Background="DarkGrey" >
+					<Gauge Width="50%" Background="RoyalBlue" Value="{./Value}" Maximum="{./Maximum}" Minimum="{Minimum}" Orientation="{./Orientation}"/>
+					<Widget Name="Cursor" Background="White" />
+				</Group>			
+			</Template>
+		</Slider>
+		
+		<Slider Width="10" />
+				
+		<Slider Width="12" Height="Stretched" Orientation="Vertical" ClipToClientRect='false' Background="DarkGrey" CursorSize="50" CornerRadius="5" />
+		<Slider Width="12" Height="Stretched" Orientation="Vertical" ClipToClientRect='false' CacheEnabled='false' Background="Transparent" CursorSize="20" />
+	</HorizontalStack>	
+</HorizontalStack>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Stack/StretchedInFit.crow b/Samples/common/ui/Interfaces/Stack/StretchedInFit.crow
index 42c30647..fdd5edcf 100644
--- a/Samples/common/ui/Interfaces/Stack/StretchedInFit.crow
+++ b/Samples/common/ui/Interfaces/Stack/StretchedInFit.crow
@@ -1,7 +1,7 @@
-<?xml version="1.0"?>
+<?xml version="1.0"?>
 <VerticalStack Background="DimGrey" Margin="1" Width="Fit" Height="Fit">
 	<Label Text="this is a test" Margin="0" Width="Stretched" Height="Fit" Background="SeaGreen"/>
 	<Label Text="this is a test" Margin="0" Width="Stretched" Height="Fit" Background="SeaGreen"/>
 	<Label Text="this is a test" Margin="0" Width="Stretched" Height="Fit" Background="SeaGreen"/>
-	<Label Text="this is a test" Margin="0" Width="Stretched" Height="Fit" Background="SeaGreen" MinimumSize="5,5"/>
+	<Label Text="this is a test" Margin="0" Width="Stretched" Height="Fit" Background="SeaGreen"/>
 </VerticalStack>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/TemplatedContainer/testWindow3.goml b/Samples/common/ui/Interfaces/TemplatedContainer/testWindow3.goml
index 869615bf..ae2a5eec 100644
--- a/Samples/common/ui/Interfaces/TemplatedContainer/testWindow3.goml
+++ b/Samples/common/ui/Interfaces/TemplatedContainer/testWindow3.goml
@@ -2,10 +2,7 @@
 <Window Left="10" Top="10" Caption="Test window" Width="200" Height="200" Background="0.5,0.5,0.5,0.8"
 	Focusable="True"  CornerRadius="20" MinimumSize="100,100" MaximumSize="500,500">
 	<Template>
-		<Container Margin="20" Name="Content" Height="{../HeightPolicy}" Width="{../WidthPolicy}" Background="0.5,0.5,0.5,0.5"/>
+		<Container Margin="20" Name="Content" Background="Onyx"/>
 	</Template>
-<!--	<Group Background="Green">-->
-		<Widget Height="50" Width="50" Background="Red" Margin="5"/>
-<!--		<Scrollbar Orientation="Vertical" Height="Stretched" Width="10" Background="Blue" Margin="0" HorizontalAlignment="Right"/>-->
-<!--	</Group>-->
+	<Widget Background="FireBrick"/>
 </Window>
diff --git a/Samples/common/ui/Interfaces/TemplatedControl/testCheckbox.crow b/Samples/common/ui/Interfaces/TemplatedControl/testCheckbox.crow
index 7c8438c0..b5eb0fc7 100644
--- a/Samples/common/ui/Interfaces/TemplatedControl/testCheckbox.crow
+++ b/Samples/common/ui/Interfaces/TemplatedControl/testCheckbox.crow
@@ -1,11 +1,30 @@
 <?xml version="1.0"?>
-<VerticalStack Fit="true" Margin="100" Background="DimGrey" >
-	<CheckBox Background="Grey" MouseEnter="{Background=Red}" MouseLeave="{Background=Transparent}"/>
-	<CheckBox Background="Grey" MouseEnter="{Background=Red}" MouseLeave="{Background=Transparent}"/>
-	<CheckBox Background="Grey" MouseEnter="{Background=Red}" MouseLeave="{Background=Transparent}"/>
-	<CheckBox Background="Grey" MouseEnter="{Background=Red}" MouseLeave="{Background=Transparent}"/>
-	<CheckBox Background="Grey" MouseEnter="{Background=Red}" MouseLeave="{Background=Transparent}"/>
-	<CheckBox Background="Grey" MouseEnter="{Background=Red}" MouseLeave="{Background=Transparent}"/>
-	<CheckBox Background="Grey" MouseEnter="{Background=Red}" MouseLeave="{Background=Transparent}"/>
-	<CheckBox Background="Grey" MouseEnter="{Background=Red}" MouseLeave="{Background=Transparent}"/>
+<VerticalStack Margin="50" Background="DarkGrey" Spacing="10" >
+	<CheckBox />
+	<CheckBox Background="Jet">
+		<Template>
+			<HorizontalStack Spacing="5" Background="{./Background}" Margin="5">
+				<Label Text="{./Caption}"/>
+				<Label Text="{./IsChecked}"/>
+			</HorizontalStack>
+		</Template>
+	</CheckBox>
+	<CheckBox Background="Onyx" Width="Stretched">
+		<Template>
+			<HorizontalStack Spacing="4" Background="{./Background}" Margin="4">
+				<Border BorderWidth="0" Width="16" Height="16" Background="Black" Margin="1">
+					<Widget Background="SeaGreen" Visible="{./IsChecked}"/>
+				</Border>
+				<Label Text="{./Caption}"/>
+			</HorizontalStack>
+		</Template>
+	</CheckBox>
+	<CheckBox Background="Jet" Height="30" Width="60" Checked="{Background=SeaGreen}" >
+		<Template>
+			<Group  Background="{./Background}" Margin="0" CornerRadius="100">
+				<Shape Name="sh" HorizontalAlignment="Left" Width="{./Height}" Foreground="Grey" Size="16,16" Path="A 8,8,7.5,0,6.3 f O 1,1,1,1 G "/>
+				<Shape Visible="{./IsChecked}" HorizontalAlignment="Right" Width="{./Height}" Foreground="Grey" Size="16,16" Path="A 8,8,7.5,0,6.3 f O 1,1,1,1 G "/>
+			</Group>
+		</Template>
+	</CheckBox>
 </VerticalStack>
diff --git a/Samples/common/ui/Interfaces/TemplatedControl/testItemTemplateTag.crow b/Samples/common/ui/Interfaces/TemplatedControl/testItemTemplateTag.crow
index b29be381..fd873489 100644
--- a/Samples/common/ui/Interfaces/TemplatedControl/testItemTemplateTag.crow
+++ b/Samples/common/ui/Interfaces/TemplatedControl/testItemTemplateTag.crow
@@ -1,29 +1,28 @@
 <?xml version="1.0"?>
-<Border BorderWidth="2" Fit="true">
+<Border BorderWidth="2" Fit="true" Background="DarkGrey">
 	<VerticalStack Fit="true" Margin="5">
-		<ListBox Data="{TestList}" Background="0.5,0.5,0.5,0.7"
-					 HorizontalAlignment="Center" Width="200" Height="200" Margin="5">
+		<ListBox Data="{TestList}" Background="Jet" HorizontalAlignment="Center" Width="200" Height="200" Margin="5">
 			<Template>
-				<Border BorderWidth="1">
+				<Border BorderWidth="1" Background="{./Background}">
 					<HorizontalStack Margin="1">
 						<Scroller Name="scroller1" Margin="2">
 							<VerticalStack Height="Fit" MinimumSize="10,10"
 								Name="ItemsContainer" Margin="0" VerticalAlignment="Top"/>
 						</Scroller>
 						<ScrollBar Name="scrollbar1" Value="{²../scroller1.ScrollY}"
-							LargeIncrement="{../scroller1.PageHeight}" SmallIncrement="30" CursorSize="{../scroller1.ChildHeightRatio}"
-							Maximum="{../scroller1.MaxScrollY}" Orientation="Vertical" 
-							Width="14" />
+							LargeIncrement="{../scroller1.PageHeight}" SmallIncrement="10" CursorSize="{../scroller1.ChildHeightRatio}"
+							Maximum="{../scroller1.MaxScrollY}"  />
 					</HorizontalStack>
 				</Border>
 			</Template>
-			<ItemTemplate DataType="Crow.Color">
+			<ItemTemplate DataType="Crow.Colors">
 				<HorizontalStack
 							HorizontalAlignment="Left"
 							Height="Fit" Width="200" Margin="1" Focusable="true"
-							MouseEnter="{Background=hgradient|0:DarkRed|1:Transparent}"
+							MouseEnter="{Background=RoyalBlue}"
 							MouseLeave="{Background=Transparent}">
-					<Widget Height="12" Width="20" Background="{}" Margin="0" CornerRadius="3"/>
+					
+					<Border Foreground="Black" Height="16" Width="30" Background="{}" Margin="0" CornerRadius="4"/>
 					<Label Text="{}" Margin="0" Width="Stretched"/>
 				</HorizontalStack>
 			</ItemTemplate>
diff --git a/Samples/common/ui/Interfaces/TemplatedControl/testScrollbar.crow b/Samples/common/ui/Interfaces/TemplatedControl/testScrollbar.crow
index 0b1a775e..1eac5fe3 100644
--- a/Samples/common/ui/Interfaces/TemplatedControl/testScrollbar.crow
+++ b/Samples/common/ui/Interfaces/TemplatedControl/testScrollbar.crow
@@ -1,5 +1,5 @@
 <?xml version="1.0"?>
 <Group Name="TopContainer" Focusable="True" Background="DarkGrey" Margin="50">
-	<ScrollBar  Maximum="100" Height="90%"/>
+	<ScrollBar Width="10" CornerRadius="5" Maximum="100" Height="90%"/>
 	<ScrollBar Style="HScrollBar" Maximum="100" VerticalAlignment="Bottom"/>
 </Group>
\ No newline at end of file