Custom video solution
If you want to develop a custom video solution in Fast video cataloger you will need a user interface. This article will show you how to build a WPF user interface in a Fast video cataloger script.
What is WPF
WPF stands for Windows Presentation Foundation and is a Windows technology to create user interfaces. In WPF you defined your user interface in an XAML file. The whole user interface in Fast video cataloger is built with WPF.
XAML to define the user interface
In WPF you specify the layout of the user interface in an XML file. This file defines what standard controls you want on your page and how the layout is going to be arranged. Separating the user interface from the code like this makes it possible to hand over the design and layout of the user interface to an artist and let the programmer focus on the actual code of the application. Well at least in theory. Even if you are doing both the code and the user interface it is a nice separation to have your layout defined in a separate file. You can also use programs like Blend or Visual studio to design your user interface without touching the code of your application.
Problems with WPF in scripts
If you want to use WPF to build a user interface for a script in Fast video cataloger there are a few problems we need to solve. First, when compiling a WPF applicaton there are actually different compilers compiling the XAML code that defines the user interface and the C# code that is the program. The scripting in Fast video cataloger has no XAML compiler so that’s one problem. Another problem is that you do not specify a list of files to load, you only load your main C# script file. So to be able to define a user interface in XAML we need to load the file dynamically from our C# script. Luckily there is a function in .net to do just that System.Windows.Markup.XamlReader.Load(...).
Referencing external scripts
To be able to use WPF we need to bring in a number of external references. In a Visual studio solution you would add these these as references to the soluton. Again, in Fast video cataloger we load one script file. To solve this Fast video cataloger does special parsing of comments to let you use comments to bring in external references. css_ref is the syntax to bring in an external reference. To bring in everything you need for WPF in your script just add these lines to the top of your script:
//css_ref WindowsBase;
//css_ref PresentationCore;
//css_ref PresentationFramework;
//css_ref System.Runtime
//css_ref System.ObjectModel
Once we have the references we also need to add the “using” clause as usual in “.net”. Adding the following at the top of your script should bring in all we need for WPF.
using System;
using System.Xaml;
using System.Windows;
using System.IO;
using System.Windows.Controls;
Visual studio solution
The sample solution provided with the Fast video cataloger has all the references set up so you can add your XAML files and C# files there and use the UI editor to design your user interface. You are even able to compile the user interface even though the compilation in the solution works in a completely different way compared to the script. Even so, this is a good way to quickly catch errors. I highly recommend you use the provided sample solution and continue to build on the provided WPF sample.
Step by step through the script
This sample starts with a class that inherits from the Window class. This is the main window for the user interface. In the constructor we can set the size and title of the window.
Width = 320;
Height = 200;
Title = "Dynamic WPF window";
The next step is to load the actual xaml file that defines our user interface. Here is the code to do this:
string current_folder = Directory.GetCurrentDirectory();
string path = current_folder + "\\scripts\\samples\\hello_wpf.xaml";
using (FileStream fs = new FileStream( path, FileMode.Open))
{
m_RootElement = (DependencyObject) System.Windows.Markup.XamlReader.Load(fs);
}
XAML and the user interface definition
and if we look at the XAML file that defines the user interface it looks like this:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Foreground="Black"
Background="White"
UseLayoutRounding="True">
<StackPanel>
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
<Label Foreground="Black">Enter message:</Label>
<TextBox Width="100" Name="input1" Margin="10"/>
</StackPanel>
<Button Name="button1"
Margin="10"
Width="96"
BorderThickness="2"
Content="Click Me" />
</StackPanel>
</Page>
The first lines are standard XAML for creating a page for a Window.
Next, a <StackPanel> controls the layout saying that everything below will be stacked vertically. Next, we have another <StackPanel> that says anything in it will be stacked horizontally. In there we add a <Label>, i..e. a text line and then a <TextBox> that accepts input from the user. Below the <StackPanel> we have a <Button>.
Connecting the button
We have now seen the definition of the user interface. Loading a XAML file dynamically like we do unfortunately mean that bindings does not work. Because of this we need to connect the button from the C# side and we do that like this:
Button btn = (Button)LogicalTreeHelper.FindLogicalNode(m_RootElement, "button1");
btn.Click += button1_Click;
The LogicalTreeHelper.FindLogicalNode function helps us find a UI element with the Name property set as “button1”, and we give the root of the loaded XAML file to search from. The function will return our Button and then we only need to hook up the Click event to the function we want to be called when the user clicks the button i.e. button1_Click
The last thing we do in the main window constructor is to set the content of the window to the loaded root element.
this.Content = m_RootElement;
This is what actually sets the loaded user interface to be displayed in the Window.
The script
The script starts as always at the static Run function. Here we create an object of our class and just call ShowDialog to show the window. When you run the script you will see the user interface. If you click the button we take what text has been input in the text box and shows that in a popup window.
The last thing to explain is the Main function. It is only needed because WPF expects the Main function when you compile in Visual Studio, it is never called or needed when running the C# file as a script in Fast Video cataloger.
WPF is a great option for building user interface and is highly recommended when you build a custom video solution on top of Fast video cataloger.
Complete XAML file
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Foreground="Black"
Background="White"
UseLayoutRounding="True">
<StackPanel>
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
<Label Foreground="Black">Enter message:</Label>
<TextBox Width="100" Name="input1" Margin="10"/>
</StackPanel>
<Button Name="button1"
Margin="10"
Width="96"
BorderThickness="2"
Content="Click Me" />
</StackPanel>
</Page>
Complete C# file
//css_ref WindowsBase;
//css_ref PresentationCore;
//css_ref PresentationFramework;
//css_ref System.Runtime
//css_ref System.ObjectModel
using System;
using System.Xaml;
using System.Windows;
using System.IO;
using System.Windows.Controls;
namespace VideoCataloger
{
public partial class HelloWindow : Window
{
DependencyObject m_RootElement;
public HelloWindow()
{
Width = 320;
Height = 200;
Title = "Dynamic WPF window";
string current_folder = Directory.GetCurrentDirectory();
string path = current_folder + "\\scripts\\samples\\hello_wpf.xaml";
using (FileStream fs = new FileStream( path, FileMode.Open))
{
m_RootElement = (DependencyObject) System.Windows.Markup.XamlReader.Load(fs);
}
Button btn = (Button)LogicalTreeHelper.FindLogicalNode(m_RootElement, "button1");
btn.Click += button1_Click;
this.Content = m_RootElement;
}
private void button1_Click(object sender, RoutedEventArgs e)
{
TextBox textbox = (TextBox) LogicalTreeHelper.FindLogicalNode(m_RootElement, "input1");
MessageBox.Show("Message is: " + textbox.Text);
}
[STAThread]
public static void Main()
{
}
static public void Run(IScripting scripting, string argument)
{
HelloWindow wnd = new HelloWindow();
wnd.ShowDialog();
}
}
}