My background is in desktop UI programming using Windows Presentation Foundation. WPF is an amazing framework for creating highly responsive complex (or simple) desktop or Silverlight-hosted applications. NETMF has a subset of WPF features which, for the most part, are easy to pick up of you have some WPF experience. A great reference for WPF is WPF Unleashed by Adam Nathan.
This demo shows some some basic functionality for NETMF using the Gadgeteer T35 Display. The demo shows a simple screen layout with touch responsive controls. The controls trigger a multi color led module to display different colored lights. It’s easy to envision using the touch panel to drive any type of event desired.
The result are well laid out controls with no absolute positioning. Avoiding absolute positioning is important for screens which are epxected to be responsive to orientation or the dynamic addition of other controls.
Setup for the example is the same as the MulitLED Queue example.
WPF for NETMF doesn’t use XAML. This is understandable giving the system contraints. Thus, you need to understand how WPF works. For any WPF application, you must first create a Window. The display module does that for you. Setting the background color is done by applying a Brush to the Background property. Then you need some way to add controls to the window. A Window can only have one child element, so you the first control needs to be some type of “Container” which will accept other controls. For this example, I use a Panel.
Window window = display_T35.WPFWindow; window.Background = new SolidColorBrush(Color.Black); Panel p = new Panel(); window.Child = p;
The next step is to add a StackPanel which is a managed flow control. Basically, it controls the layout of other controls. For this example, I have a StackPanel which will layout and child controls vertically.
StackPanel controls = new StackPanel(Orientation.Vertical);
controls.SetMargin(10);
p.Children.Add(controls);Next, I create a border elements for different colors
Border redBorder = GetBorder(GT.Color.Red);
Border blueBorder = GetBorder(GT.Color.Blue);
Border greenBorder = GetBorder(GT.Color.Green);
Border whiteBorder = GetBorder(GT.Color.White, GT.Color.Black);
Border offBorder = GetBorder(GT.Color.DarkGray, Color.Black);The GetBorder method simply create a rectangle with a specified colored background
public Border GetBorder(Color color, Color foreground = Color.White)
{
Border border = new Border();
border.BorderBrush = new SolidColorBrush(color);
border.Height = f.Height + 5;
border.Width = 300;
return border;
}Each border’s TouchDown event is wired to the MultiColorLed to turn a specific color. For the red:
redBorder.TouchDown += redText_TouchDown;
void redText_TouchDown(object sender, Microsoft.SPOT.Input.TouchEventArgs e)
{
multicolorLed.TurnRed();
}The last part is to add a new horizontal stack panel containing a text label and the border element to the first stack panel. The GetStackPanel method creates a new StackPanel with a horizontal layout. Then it creates a new Text element, adds it to the stack panel. Lastly, it addes the border to the stack panel.
controls.Children.Add(GetStackPanel(red,redBorder));
public StackPanel GetStackPanel(String text, Border border)
{
StackPanel sp = new StackPanel(Orientation.Horizontal);
sp.SetMargin(10);
sp.HorizontalAlignment = HorizontalAlignment.Stretch;
sp.VerticalAlignment = VerticalAlignment.Top;
sp.Children.Add(new Text(f, text) { ForeColor = Color.White, Width = 60, Height = border.Height, VerticalAlignment = VerticalAlignment.Center });
sp.Children.Add(border);
return sp;
}This solution can be found on my Gadgeteer GitHub repository.
