list item

10 files changed, 99 insertions, 206 deletions

diff --git a/Samples/common/SampleBase.cs b/Samples/common/SampleBase.cs
index aea139c3..93aec907 100644
--- a/Samples/common/SampleBase.cs
+++ b/Samples/common/SampleBase.cs
@@ -3,6 +3,7 @@ using System.Collections.Generic;
 using System.IO;
 using System.Linq;
 using System.Reflection;
+using System.Runtime.CompilerServices;
 using System.Threading;
 using Crow;
 
@@ -81,6 +82,79 @@ namespace Crow
 				=> $"{Prop1}, {Prop2}";
 
 		}
+		public class TestClassVC : IValueChange
+		{
+			public event EventHandler<ValueChangeEventArgs> ValueChanged;
+			public void NotifyValueChanged (object _value, [CallerMemberName] string caller = null)
+				=> ValueChanged.Raise (this, new ValueChangeEventArgs (caller, _value));
+			string prop1, prop2;
+			public string Prop1 {
+				get => prop1;
+				set {
+					if (prop1 == value)
+						return;
+					prop1 = value;
+					NotifyValueChanged (prop1);
+				}
+			}
+			public string Prop2 {
+				get => prop2;
+				set {
+					if (prop2 == value)
+						return;
+					prop2 = value;
+					NotifyValueChanged (prop2);
+				}
+
+
+
+		}
+
+		public override string ToString ()
+				=> $"{Prop1}, {Prop2}";
+
+		}
+		TestClass tcInstance;// = new TestClass () { Prop1 = "instance 0 prop1 value", Prop2 = "instance 0 prop2 value" };
+		TestClassVC tcVCInstance;// = new TestClassVC () { Prop1 = "instance 0 prop1 value", Prop2 = "instance 0 prop2 value" };
+		TestClass tcInstance1 = new TestClass () { Prop1 = "instance 1 prop1 value", Prop2 = "instance 1 prop2 value" };
+		TestClassVC tcVCInstance1 = new TestClassVC () { Prop1 = "instance 1 prop1 value", Prop2 = "instance 1 prop2 value" };
+		TestClass tcInstance2 = new TestClass () { Prop1 = "instance 2 prop1 value", Prop2 = "instance 2 prop2 value" };
+		TestClassVC tcVCInstance2 = new TestClassVC () { Prop1 = "instance 2 prop1 value", Prop2 = "instance 2 prop2 value" };
+
+		public TestClass TcInstance {
+			get => tcInstance;
+			set {
+				if (tcInstance == value)
+					return;
+				tcInstance = value;
+				NotifyValueChanged (tcInstance);
+			}
+		}
+		public TestClassVC TcVCInstance {
+			get => tcVCInstance;
+			set {
+				if (tcVCInstance == value)
+					return;
+				tcVCInstance = value;
+				NotifyValueChanged (tcVCInstance);
+			}
+		}
+
+		void tcInstance_ChangeProperties_MouseClick (object sender, MouseButtonEventArgs e)
+		{
+		}
+		public void tcInstance_ChangeInstance_MouseClick (object sender, MouseButtonEventArgs e)
+		{
+			if (TcInstance == tcInstance1)
+				TcInstance = tcInstance2;
+			else
+				TcInstance = tcInstance1;
+		}
+		void tcVCInstance_ChangeInstance_MouseClick (object sender, MouseButtonEventArgs e)
+		{
+			TcVCInstance = new TestClassVC () { Prop1 = "prop1 value changed", Prop2 = "prop2 value changed" };
+		}
+
 		public IEnumerable<TestClass> List3 = new List<TestClass> (new TestClass[]
 			{
 				new TestClass { Prop1 = "string1", Prop2="prop2-1" },
diff --git a/Samples/common/samples.style b/Samples/common/samples.style
index 9c382e6a..124cfcf4 100644
--- a/Samples/common/samples.style
+++ b/Samples/common/samples.style
@@ -24,7 +24,7 @@ CheckBox2 {
 	Template= "Interfaces/CheckBox2.imlt";
 	Background = "Jet";
 	Checked="{Background=MediumSeaGreen}";
-	Unchecked = "{Background=Jet}";
+	Unchecked = "{Background=Jet}";	
 }
 CheckBox3 {
 	Template= "Interfaces/CheckBox2.imlt";
@@ -44,7 +44,7 @@ labPerfVal{
 	Width = "50%";
 }
 DbgLogViewer{
-	Background = "Onyx";
+	//Background = "Onyx";
 	Font = "mono, 8";
 	Foreground = "LightGrey";
 	Focusable = "true";
diff --git a/Samples/common/ui/Interfaces/CheckBox2.imlt b/Samples/common/ui/Interfaces/CheckBox2.imlt
index c2bfe8da..84ec22b3 100644
--- a/Samples/common/ui/Interfaces/CheckBox2.imlt
+++ b/Samples/common/ui/Interfaces/CheckBox2.imlt
@@ -1,5 +1,5 @@
-<Label Font="{./Font}" Text="{./Caption}" Height="{./HeightPolicy}" Width="{./WidthPolicy}"
-	Margin="3"
+<Label Font="{./Font}" Text="{./Caption}" Width="Stretched"
+	Margin="5"
 	Background="{./Background}"
 	Foreground="DimGrey"
 	TextAlignment="Center"
diff --git a/Samples/common/ui/Interfaces/Divers/classBindings.crow b/Samples/common/ui/Interfaces/Divers/classBindings.crow
new file mode 100644
index 00000000..72144e8e
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Divers/classBindings.crow
@@ -0,0 +1,9 @@
+<VerticalStack Fit="true">
+	<VerticalStack DataSourceType="Crow.TestClass" DataSource="{TcInstance}" Margin="10" Background="Onyx" Fit="true">
+		<Label Text="{Prop1}"/>
+		<Label Text="{Prop2}"/>
+	</VerticalStack>
+	<HorizontalStack>
+		<Button Caption="Change Instance" MouseClick="tcInstance_ChangeInstance_MouseClick"/>
+	</HorizontalStack>
+</VerticalStack>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Divers/dbglog.crow b/Samples/common/ui/Interfaces/Divers/dbglog.crow
deleted file mode 100644
index 16f6c35e..00000000
--- a/Samples/common/ui/Interfaces/Divers/dbglog.crow
+++ /dev/null
@@ -1,99 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<HorizontalStack>
-	<TreeView Width="20%" Data="{../dbv.Events}" SelectedItemChanged="onSelectedItemChanged"> 
-		<ItemTemplate Data="Events">
-			<Expandable Caption="{type}" MouseDoubleClick="/onClickForExpand" CacheEnabled="true" IsExpanded="{²IsExpanded}">
-				<Template>
-					<VerticalStack>
-						<Border CornerRadius="2" Margin="0" Height="Fit" MouseDoubleClick="./onClickForExpand"
-								Foreground="Transparent"
-								MouseEnter="{Foreground=DimGrey}"
-								MouseLeave="{Foreground=Transparent}">
-							<HorizontalStack Spacing="2" Background="Onyx">
-								<Image Margin="1" Width="9" Height="9" Focusable="true" MouseDown="./onClickForExpand"
-									Path="{./Image}"
-									Visible="{HasChildEvents}"
-									SvgSub="{./IsExpanded}"
-									MouseEnter="{Background=LightGrey}"
-									MouseLeave="{Background=Transparent}"/>
-								<Label Text="{./Caption}" Width="80" Font="mono, 8" />
-								<Label Text="{Duration}" Width="40" Font="mono, 8" TextAlignment="Center" Background="DimGrey"/>
-								<DbgEventWidget Event="{}" Tooltip="{/HoverEvent}" TicksPerPixel="200" Width="Fit" Height="5"/>
-							</HorizontalStack>
-						</Border>
-						<Container Name="Content" Visible="false"/>
-					</VerticalStack>
-				</Template>
-				<HorizontalStack Height="Fit">
-					<Widget Width="12" Height="10"/>
-					<VerticalStack Height="Fit" Name="ItemsContainer"/>
-				</HorizontalStack>
-			</Expandable>
-		</ItemTemplate>		
-		<ItemTemplate Data="Events" DataType="DbgWidgetEvent">
-			<Expandable Caption="{type}" MouseDoubleClick="/onClickForExpand" CacheEnabled="true" IsExpanded="{²IsExpanded}">
-				<Template>
-					<VerticalStack>
-						<Border CornerRadius="2" Margin="0" Height="Fit" MouseDoubleClick="./onClickForExpand"
-								Foreground="Transparent"
-								MouseEnter="{Foreground=DimGrey}"
-								MouseLeave="{Foreground=Transparent}">
-							<HorizontalStack Spacing="2" Background="Onyx">
-								<Image Margin="1" Width="9" Height="9" Focusable="true" MouseDown="./onClickForExpand"
-									Path="{./Image}"
-									Visible="{HasChildEvents}"
-									SvgSub="{./IsExpanded}"
-									MouseEnter="{Background=LightGrey}"
-									MouseLeave="{Background=Transparent}"/>
-								<Label Text="{./Caption}" Width="80" Font="mono, 8" />
-								<Label Text="{Duration}" Width="40" Font="mono, 8" TextAlignment="Center" Background="DimGrey"/>
-								<Label Text="{InstanceIndex}" Width="40" Font="mono, 8" TextAlignment="Center" Background="DimGrey"/>
-								<DbgEventWidget Event="{}" Tooltip="{/HoverEvent}" TicksPerPixel="200" Width="Fit" Height="5"/>
-							</HorizontalStack>
-						</Border>
-						<Container Name="Content" Visible="false"/>
-					</VerticalStack>
-				</Template>
-				<HorizontalStack Height="Fit">
-					<Widget Width="12" Height="10"/>
-					<VerticalStack Height="Fit" Name="ItemsContainer"/>
-				</HorizontalStack>
-			</Expandable>
-		</ItemTemplate>		
-	</TreeView>
-	<Splitter/>
-	<VerticalStack>
-		<DbgLogViewer Visible="true" Name="dbv" LogFile="debug.log" MouseWheelSpeed="10" Font="mono, 8"/>
-		<ScrollBar Style="HScrollBar" Maximum="{../dbv.MaxScrollX}" Value="{²../dbv.ScrollX}"/>
-		<HorizontalStack Height="Fit" DataSource="{../../dbv.CurrentWidget}">
-			<Label Text="{name}"/>
-			<Label Text="{listIndex}"/>
-			<Label Text="{instanceNum}"/>
-			<Label Text="{treeIndex}"/>
-			<Label Text="{yIndex}"/>
-			<Label Text="{xLevel}"/>
-		</HorizontalStack>
-		<ListBox Data="{RootEvents}" Height="100" DataSource="{../../dbv.CurrentWidget}">
-			<ItemTemplate>
-				<DbgEventWidget Height="10" Width="Fit" Event="{}" Tooltip="{/HoverEvent}" TicksPerPixel="100"/>
-			</ItemTemplate>
-			<Template>
-				<Wrapper Name="ItemsContainer" Spacing="2" Background="DarkGrey"/>
-			</Template>
-		</ListBox>	
-		<!--<DbgEventWidget Height="20" Width="Stretched" Event="{../../dbv.CurrentEvent}"/>-->
-		<VerticalStack DataSource="{../../dbv.CurrentEvent}">
-			<HorizontalStack>
-				<Label Text="{type}"/>
-				<Label Text="{begin}"/>
-				<Label Text="{end}"/>
-				<Label Text="{Duration}"/>
-			</HorizontalStack>
-			<ListBox Data="{events}" Height="100">
-				<ItemTemplate>
-					<DbgEventWidget Height="20" Width="Stretched" Event="{}"/>
-				</ItemTemplate>
-			</ListBox>
-		</VerticalStack>
-	</VerticalStack>
-</HorizontalStack>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/Divers/splitter0.crow b/Samples/common/ui/Interfaces/Divers/splitter0.crow
new file mode 100644
index 00000000..218ba621
--- /dev/null
+++ b/Samples/common/ui/Interfaces/Divers/splitter0.crow
@@ -0,0 +1,7 @@
+<HorizontalStack Margin="50">
+	<Widget Background="SeaGreen" Width="33%"/>
+	<Splitter/>
+	<Widget Background="SeaGreen" Width="33%"/>
+	<Splitter/>
+	<Widget Background="SeaGreen"/>
+</HorizontalStack>
diff --git a/Samples/common/ui/Interfaces/Splitter/1.crow b/Samples/common/ui/Interfaces/Splitter/1.crow
deleted file mode 100644
index 48c1ea1e..00000000
--- a/Samples/common/ui/Interfaces/Splitter/1.crow
+++ /dev/null
@@ -1,30 +0,0 @@
-<?xml version="1.0"?>
-<HorizontalStack Width="80%" Height="50%">
-	<Border Width="45%" CornerRadius="10" BorderWidth="1">
-		<VerticalStack>
-			<VerticalStack Height="45%">
-				<CheckBox Height="25%" IsChecked="false" Caption="Check 1" Background="hgradient|0:LimeGreen|1:Transparent"/>
-				<CheckBox Height="25%" IsChecked="false" Caption="Check 2"  Background="hgradient|0:LimeGreen|1:Transparent"/>
-				<CheckBox Height="25%" IsChecked="true" Caption="Check 3"  Background="hgradient|0:LimeGreen|1:Transparent"/>
-				<CheckBox Height="25%" IsChecked="false" Caption="Check 4" Background="hgradient|0:LimeGreen|1:Transparent"/>
-			</VerticalStack>
-			<Splitter Thickness="3"/>
-			<VerticalStack Height="45%">
-				<CheckBox Height="25%" IsChecked="false" Caption="Check 1" Background="hgradient|0:LimeGreen|1:Transparent"/>
-				<CheckBox Height="25%" IsChecked="false" Caption="Check 2"  Background="hgradient|0:LimeGreen|1:Transparent"/>
-				<CheckBox Height="25%" IsChecked="true" Caption="Check 3"  Background="hgradient|0:LimeGreen|1:Transparent"/>
-				<CheckBox Height="25%" IsChecked="false" Caption="Check 4" Background="hgradient|0:LimeGreen|1:Transparent"/>
-			</VerticalStack>
-		</VerticalStack>
-	</Border>
-	<Splitter Thickness="3"/>
-	<Border Width="45%" CornerRadius="10" BorderWidth="1">
-		<VerticalStack Width="50%" Height="50%" Background="DimGrey">
-			<RadioButton IsChecked="false" Caption="Choice 1" Background="hgradient|0:DarkRed|1:Transparent"/>
-			<RadioButton IsChecked="false" Caption="Choice 2"  Background="hgradient|0:DarkRed|1:Transparent"/>
-			<RadioButton IsChecked="true" Caption="Choice 3"  Background="hgradient|0:DarkRed|1:Transparent"/>
-			<RadioButton IsChecked="false" Caption="Choice 4" Background="hgradient|0:DarkRed|1:Transparent"/>
-		</VerticalStack>
-	</Border>
-	<Splitter Thickness="3"/>
-</HorizontalStack>
diff --git a/Samples/common/ui/Interfaces/Splitter/3.crow b/Samples/common/ui/Interfaces/Splitter/3.crow
deleted file mode 100644
index 9a288963..00000000
--- a/Samples/common/ui/Interfaces/Splitter/3.crow
+++ /dev/null
@@ -1,44 +0,0 @@
-<?xml version="1.0"?>
-<VerticalStack Fit="true">
-	<Widget CornerRadius="5" Height="10" Width="600" Background="vgradient|0:Transparent|0.5:White|1:Transparent"/>
-	<HorizontalStack Fit="true" HorizontalAlignment="Left">
-		<Border Fit="true" CornerRadius="10" BorderWidth="1">
-			<VerticalStack Margin="10">
-				<CheckBox IsChecked="false" Caption="Check 1" Background="hgradient|0:LimeGreen|1:Transparent"/>
-				<CheckBox IsChecked="false" Caption="Check 2"  Background="hgradient|0:LimeGreen|1:Transparent"/>
-				<CheckBox IsChecked="true" Caption="Check 3"  Background="hgradient|0:LimeGreen|1:Transparent"/>
-				<CheckBox IsChecked="false" Caption="Check 4" Background="hgradient|0:LimeGreen|1:Transparent"/>
-			</VerticalStack>
-		</Border>
-		<Splitter/>
-		<Border Fit="true" CornerRadius="10" BorderWidth="1">
-			<VerticalStack Margin="10">
-				<RadioButton IsChecked="false" Caption="Choice 1" Background="hgradient|0:DarkRed|1:Transparent"/>
-				<Splitter/>
-				<RadioButton Width="Stretched" IsChecked="false" Caption="Choice 2"  Background="hgradient|0:DarkRed|1:Transparent"/>
-				<RadioButton IsChecked="true" Caption="Choice 3"  Background="hgradient|0:DarkRed|1:Transparent"/>
-				<RadioButton IsChecked="false" Caption="Choice 4" Background="hgradient|0:DarkRed|1:Transparent"/>
-			</VerticalStack>
-		</Border>
-		<Splitter Thickness="3" />
-		<Border Fit="true" CornerRadius="10" BorderWidth="1" MaximumSize="150,150" MinimumSize="50,50">
-			<VerticalStack Margin="10">
-				<Label Text="label 1" Background="hgradient|0:Blue|1:Transparent"/>
-				<Label Text="label 2" Background="hgradient|0:Blue|1:Transparent"/>
-				<Label Text="label 3" Background="hgradient|0:Blue|1:Transparent"/>
-				<Label Text="label 4" Width="Stretched" Background="hgradient|0:Blue|1:Transparent"/>
-			</VerticalStack>
-		</Border>
-		<Splitter/>
-		<Border Fit="true" CornerRadius="10" BorderWidth="1">
-			<VerticalStack Margin="10">
-				<Button Caption="Button 1" Background="hgradient|0:Red|1:DarkRed" CornerRadius="5"/>
-				<Button Caption="Button 2"  Background="hgradient|0:Green|1:Blue" CornerRadius="3"/>
-				<Button Caption="Button 3"  Background="hgradient|0:DarkRed|1:Transparent" CornerRadius="0"/>
-				<Button Caption="Button 4" Background="hgradient|0:DarkRed|1:Transparent" CornerRadius="8"/>
-			</VerticalStack>
-		</Border>
-		<Splitter/>
-	</HorizontalStack>
-	<Widget CornerRadius="5" Height="10" Width="600" Background="vgradient|0:Transparent|0.5:White|1:Transparent"/>
-</VerticalStack>
\ No newline at end of file
diff --git a/Samples/common/ui/Interfaces/TabItem.template b/Samples/common/ui/Interfaces/TabItem.template
deleted file mode 100644
index fd0f310d..00000000
--- a/Samples/common/ui/Interfaces/TabItem.template
+++ /dev/null
@@ -1,24 +0,0 @@
-<?xml version="1.0"?>
-<GenericStack Orientation="Vertical" Spacing="0"
-		Background="{./Background}"
-		MouseEnter="{/caption.Foreground=White}"
-		MouseLeave="{/caption.Foreground=Grey}">
-	<HorizontalStack Left="{./TabOffset}"
-		Name="TabTitle"
-		HorizontalAlignment="Left"
-		Height="{./TabHeight}"
-		Width="{./TabWidth}">
-		<Label Name="caption" Text="{./Caption}" Foreground="Grey" Width="Stretched"/>
-		<Label Text="{./ViewIndex}" Foreground="Green"/>
-		<Label Text="{./TabOffset}" Foreground="Red"/>
-		<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>
-	</HorizontalStack>
-	<Container Margin="20">
-		<Container Background="DimGrey" Name="Content"/>
-	</Container>
-</GenericStack>
-
diff --git a/Samples/common/ui/Interfaces/colorItem.crow b/Samples/common/ui/Interfaces/colorItem.crow
index 06169f2b..1def3811 100644
--- a/Samples/common/ui/Interfaces/colorItem.crow
+++ b/Samples/common/ui/Interfaces/colorItem.crow
@@ -1,10 +1,10 @@
 <?xml version="1.0"?>
-<Border Foreground="Transparent" Focusable="true" HorizontalAlignment="Left" Height="Fit">
-	<HorizontalStack Margin="1" Spacing="3"
-				MouseEnter="{Background=LightBlue}"
-				MouseLeave="{Background=Transparent}">
+<ListItem HorizontalAlignment="Left" Height="Fit"
+		Selected = "{Background=${ControlHighlight}}"
+		Unselected = "{Background=Transparent}">
+	<HorizontalStack Margin="1" Spacing="3">
 		<Widget Height="12" Width="20" Background="{}" Margin="0" CornerRadius="5"/>
 		<Label  Text="{}" Margin="0" Width="Stretched"/>
 	</HorizontalStack>
-</Border>
+</ListItem>