update readme

3 files changed, 101 insertions, 54 deletions

diff --git a/README.md b/README.md
index ec6c0ebf..a9ec9502 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ The `ShowCase`sample will allow you to quickly test IML with live result.
 
 ### Requirements
 - [GLFW3](https://www.glfw.org/) for platform dependant integration.
-- [Cairo Graphic Library](https://cairographics.org/) >= 1.20, for 2d graphic rendering.
+- [Cairo Graphic Library](https://cairographics.org/) for 2d graphic rendering.
 - [rsvg library](https://developer.gnome.org/rsvg/) for svg rendering
 
 ### Documentation
diff --git a/Samples/ShowCase/ShowCase.cs b/Samples/ShowCase/ShowCase.cs
index 9d257160..06fca837 100644
--- a/Samples/ShowCase/ShowCase.cs
+++ b/Samples/ShowCase/ShowCase.cs
@@ -60,6 +60,31 @@ namespace ShowCase
 				NotifyValueChanged ("IsDirty", IsDirty);
 			}
 		}
+		public bool EncloseInTemplatedControl {
+			get => Configuration.Global.Get<bool> ("EncloseInTemplatedControl", false);
+			set {
+				if (EncloseInTemplatedControl == value)
+					return;
+				Configuration.Global.Set ("EncloseInTemplatedControl", value);
+				NotifyValueChanged (value);
+				if (!reloadChrono.IsRunning)
+					reloadChrono.Restart ();
+			}
+		}
+		public string TemplateContainerSource {
+			get => Configuration.Global.Get<string> ("TemplateContainerSource", "<Button/>");
+			set {
+				if (TemplateContainerSource == value)
+					return;
+				if (value != null && value.EndsWith ("/>"))
+					Configuration.Global.Set ("TemplateContainerSource", value.Remove (value.Length -2) + ">");
+				else
+					Configuration.Global.Set ("TemplateContainerSource", value);
+				NotifyValueChanged (TemplateContainerSource);
+				if (!reloadChrono.IsRunning)
+					reloadChrono.Restart ();
+			}
+		}
 
 		void reloadFromSource () {
 			hideError ();
@@ -67,7 +92,12 @@ namespace ShowCase
 			try {
 				lock (UpdateMutex) {
 					Instantiator inst = null;
-					using (MemoryStream ms = new MemoryStream (Encoding.UTF8.GetBytes (source)))
+					string src = source;
+					if (EncloseInTemplatedControl) {
+						string tmpControl = TemplateContainerSource.Split (' ', StringSplitOptions.RemoveEmptyEntries)[0].Replace ("<","").Replace (">","");
+						src = $"{TemplateContainerSource}\n<Template>\n{source}\n</Template>\n</{tmpControl}>";
+					}
+					using (MemoryStream ms = new MemoryStream (Encoding.UTF8.GetBytes (src)))
 						inst = new Instantiator (this, ms);
 					g = inst.CreateInstance ();
 					crowContainer.SetChild (g);
diff --git a/Samples/ShowCase/ui/showcase.crow b/Samples/ShowCase/ui/showcase.crow
index 23368ced..172706c6 100644
--- a/Samples/ShowCase/ui/showcase.crow
+++ b/Samples/ShowCase/ui/showcase.crow
@@ -7,56 +7,56 @@
 			<TextBox Text="{²CurrentDir}" Margin="2"/>
 		</HorizontalStack>
 		<DirectoryView Margin="1" Name="dv" CurrentDirectory="{CurrentDir}" SelectedItemChanged="Dv_SelectedItemChanged">
-					<Template>
-						<TreeView IsRoot="true" Name="treeView" Data="{./FileSystemEntries}" Background="{./Background}"
-								SelectedItemChanged="./onSelectedItemChanged">
-							<ItemTemplate DataType="System.IO.FileInfo">
-								<ListItem CornerRadius="2" Margin="0" Height="Fit" Width="Stretched"
-										ContextCommands="{GetCommands}"
-										Selected="{Background=${ControlHighlight}}"
-										Unselected="{Background=Transparent}">
-									<HorizontalStack>
-										<Image Margin="1" Width="14" Height="14" Path="#Crow.Icons.file.svg"/>
-										<Label Text="{Name}" Width="Stretched"/>
-									</HorizontalStack>
-								</ListItem>
-							</ItemTemplate>
-							<ItemTemplate DataType="System.IO.DirectoryInfo" Data="GetFileSystemInfosOrdered">
-								<ListItem ContextCommands="{GetCommands}"
-										Selected="{/exp.Background=${ControlHighlight}}"
-										Unselected="{/exp.Background=Transparent}">
-									<Expandable Name="exp" Caption="{Name}" MouseDoubleClick="/onClickForExpand" BubbleEvents="MouseWheel|Keyboard|MouseClick|ButtonDown">
-										<Template>
-											<VerticalStack>
-												<Border CornerRadius="2" Margin="0" Height="Fit" MouseDoubleClick="./onClickForExpand"
-														Foreground="Transparent"
-														MouseEnter="{Foreground=DimGrey}"
-														MouseLeave="{Foreground=Transparent}">
-													<HorizontalStack Background="{./Background}" Spacing="1">
-														<Image Margin="1" Width="9" Height="9" Focusable="true" MouseDown="./onClickForExpand"
-															Path="{./Image}"
-															Visible="{./IsExpandable}"
-															SvgSub="{./IsExpanded}"
-															MouseEnter="{Background=LightGrey}"
-															MouseLeave="{Background=Transparent}"/>
-														<Image Margin="1" Width="16" Height="16"
-															Path="#Crow.Icons.folder.svg" SvgSub="{./IsExpanded}"/>
-														<Label Text="{./Caption}"/>
-													</HorizontalStack>
-												</Border>
-												<Container Name="Content" Visible="false" BubbleEvents="MouseWheel|Keyboard"/>
-											</VerticalStack>
-										</Template>
-										<HorizontalStack Height="Fit">
-											<Widget Width="12" Height="10"/>
-											<VerticalStack Height="Fit" Name="ItemsContainer"/>
-										</HorizontalStack>
-									</Expandable>
-								</ListItem>
-							</ItemTemplate>
-						</TreeView>
-					</Template>
-				</DirectoryView>
+			<Template>
+				<TreeView IsRoot="true" Name="treeView" Data="{./FileSystemEntries}" Background="{./Background}"
+						SelectedItemChanged="./onSelectedItemChanged">
+					<ItemTemplate DataType="System.IO.FileInfo">
+						<ListItem CornerRadius="2" Margin="0" Height="Fit" Width="Stretched"
+								ContextCommands="{GetCommands}"
+								Selected="{Background=${ControlHighlight}}"
+								Unselected="{Background=Transparent}">
+							<HorizontalStack>
+								<Image Margin="1" Width="14" Height="14" Path="#Crow.Icons.file.svg"/>
+								<Label Text="{Name}" Width="Stretched"/>
+							</HorizontalStack>
+						</ListItem>
+					</ItemTemplate>
+					<ItemTemplate DataType="System.IO.DirectoryInfo" Data="GetFileSystemInfosOrdered">
+						<ListItem ContextCommands="{GetCommands}"
+								Selected="{/exp.Background=${ControlHighlight}}"
+								Unselected="{/exp.Background=Transparent}">
+							<Expandable Name="exp" Caption="{Name}" MouseDoubleClick="/onClickForExpand" BubbleEvents="MouseWheel|Keyboard|MouseClick|ButtonDown">
+								<Template>
+									<VerticalStack>
+										<Border CornerRadius="2" Margin="0" Height="Fit" MouseDoubleClick="./onClickForExpand"
+												Foreground="Transparent"
+												MouseEnter="{Foreground=DimGrey}"
+												MouseLeave="{Foreground=Transparent}">
+											<HorizontalStack Background="{./Background}" Spacing="1">
+												<Image Margin="1" Width="9" Height="9" Focusable="true" MouseDown="./onClickForExpand"
+													Path="{./Image}"
+													Visible="{./IsExpandable}"
+													SvgSub="{./IsExpanded}"
+													MouseEnter="{Background=LightGrey}"
+													MouseLeave="{Background=Transparent}"/>
+												<Image Margin="1" Width="16" Height="16"
+													Path="#Crow.Icons.folder.svg" SvgSub="{./IsExpanded}"/>
+												<Label Text="{./Caption}"/>
+											</HorizontalStack>
+										</Border>
+										<Container Name="Content" Visible="false" BubbleEvents="MouseWheel|Keyboard"/>
+									</VerticalStack>
+								</Template>
+								<HorizontalStack Height="Fit">
+									<Widget Width="12" Height="10"/>
+									<VerticalStack Height="Fit" Name="ItemsContainer"/>
+								</HorizontalStack>
+							</Expandable>
+						</ListItem>
+					</ItemTemplate>
+				</TreeView>
+			</Template>
+		</DirectoryView>
 	</VerticalStack>
 	<Splitter Width="6" />
 	<VerticalStack CacheEnabled="true">
@@ -77,7 +77,7 @@
 		<Container Name="CrowContainer" Height="60%" Background="Black"/>
 		<Splitter/>
 		<VerticalStack CacheEnabled="true">
-			<HorizontalStack Height="Fit">
+			<Wrapper Orientation="Vertical" Height="Fit">
 				<Button Style="IcoButton" Command="{CMDNew}" />
 				<Button Style="IcoButton" Command="{CMDSave}" />
 				<Button Style="IcoButton" Command="{CMDSaveAs}" />
@@ -134,7 +134,24 @@
 						<Label Text="Press 'F6' to start/stop recording"/>
 					</VerticalStack>
 				</Popper>
-			</HorizontalStack>
+				<Popper Caption="Template" Width="Fit" Background="Onyx">
+					<Template>
+						<Border Background="{./Background}" MinimumSize="50,20" Name="Content" Width="Stretched" Margin="3"
+													Foreground="Transparent" CornerRadius="{../CornerRadius}" BorderWidth="1"
+													MouseEnter="{Foreground=vgradient|0:White|0.2:Grey|0.9:Grey|1:Black};{caption.Foreground=White}"
+													MouseLeave="{Foreground=Transparent};{caption.Foreground=LightGrey}"
+													MouseDown="{Foreground=vgradient|0:Black|0.05:Grey|0.85:Grey|1:White}"
+													MouseUp="{Foreground=vgradient|0:White|0.2:Grey|0.9:Grey|1:Black}">
+							<Label Font="{./Font}" Name="caption" Margin="3" Foreground="LightGrey" Text="{./Caption}"/>
+						</Border>
+					</Template>
+					<VerticalStack Width="200" Height="200" Background="Jet" Margin="5">
+						<CheckBox Caption="Embed source in templated control" IsChecked="{²EncloseInTemplatedControl}"/>
+						<TextBox BubbleEvents="None" Text="{²TemplateContainerSource}" Width="Stretched" Height="Stretched" Multiline="true"
+							Tooltip="Add '*source* where you want to load the source in the editor."/>
+					</VerticalStack>
+				</Popper>
+			</Wrapper>
 			<HorizontalStack>
 				<Editor Name="tb" Text="{Source}" Multiline="true" Font="consolas, 12" Focusable="true" Height="Stretched" Width="Stretched"
 						TextChanged="onTextChanged" KeyDown="textView_KeyDown" ContextCommands="{EditorCommands}"