XAML and JScript

Recently I did some work where we wanted to add a second ListView to a panel. We wanted to keep the ListView consistent with the look and feel of M3 ListViews but we were constrained with space on the panel, so I didn’t want the giant header we have in a normal ListView.

Normally, we’d just set up a new Style and use the BasedOn keyword to point us back to the M3 style. But well, JScripts don’t really lend themselves to XAML very well or so I thought! And to think I had spent so much time over the years trying to get this sort of thing working programmatically.

I stumbled across a the mention of that functions I’d normally explore on MSDN were depreciated and I should be looking at XamlReader (https://msdn.microsoft.com/en-us/library/system.windows.markup.xamlreader(v=vs.110).aspx) to create my styles so I did.

A little more exploring and experimentation, I managed to adjust the height of the standard ListView headers to something a little more suitable. It also allowed me to pretty easily add a checkbox to my ListView too!

Code below, it does require some understanding of XAML, but it’s not terribly hard to transplant it from StackOverflow 🙂 or Visual Studios WPF designer.

import System;
import System.Windows;
import System.Windows.Controls;
import MForms;

import Mango.UI.Core;
import Mango.UI;
import System.ComponentModel;
import System.Xml;
import System.Windows.Data;
import System.Windows.Markup;

package MForms.JScript
{
	class showXAMLJScript
	{
		var gDebug = null;
		var gController = null;
		var gContent = null;
		
		public function Init(element: Object, args: Object, controller : Object, debug : Object)
		{
			gDebug = debug;
			gController = controller;
			gContent = controller.RenderEngine.Content;
			
			addControls();
		}
		
		private function addControls()
		{
		
			var columnSpan : double = 0;
			var lvDeliveries = new ListView();
			lvDeliveries.Width = (126+180);
			lvDeliveries.Height = 4 * 25;
			lvDeliveries.VerticalAlignment = VerticalAlignment.Top;

			Grid.SetRow(lvDeliveries, 0);
			Grid.SetRowSpan(lvDeliveries, 7);
			Grid.SetColumn(lvDeliveries, 40-2);
			Grid.SetColumnSpan(lvDeliveries, lvDeliveries.Width / 9);

			lvDeliveries.Style = StyleManager.StyleListView;
			lvDeliveries.ItemContainerStyle = StyleManager.StyleListViewItem;
			
			var gvGridView = new GridView();
			gvGridView.ColumnHeaderContainerStyle = XamlReader.Parse("<Style TargetType=\"GridViewColumnHeader\" BasedOn=\"{StaticResource styleGridViewColumnHeader}\" xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'><Setter Property=\"MinHeight\" Value=\"0\" /></Style>");
			//gvGridView.ColumnHeaderContainerStyle = StyleManager.StyleGridViewColumnHeader;

			var gvColumn = new GridViewColumn();
			gvColumn.Header = "Column1";
			gvColumn.DisplayMemberBinding = new Binding("[0]");
			
			gvGridView.Columns.Add(gvColumn);
			
			gvColumn = new GridViewColumn();
			gvColumn.Header = "Column2";
			gvColumn.DisplayMemberBinding = new Binding("[2]");
			
			gvGridView.Columns.Add(gvColumn);

			gvColumn = new GridViewColumn();
			gvColumn.Header = "Column3";
			gvColumn.DisplayMemberBinding = new Binding("[3]");
			
			gvGridView.Columns.Add(gvColumn);
			
			gvColumn = new GridViewColumn();
			gvColumn.Header = "Column4";
			gvColumn.DisplayMemberBinding = new Binding("[1]");
			
			gvGridView.Columns.Add(gvColumn);
			
			gvColumn = XamlReader.Parse("<GridViewColumn Header=\"Select\" xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'><GridViewColumn.CellTemplate><DataTemplate><CheckBox IsChecked=\"{Binding [4]}\"/></DataTemplate></GridViewColumn.CellTemplate></GridViewColumn>");
			
			gvGridView.Columns.Add(gvColumn);

			lvDeliveries.View = gvGridView;	
			
			var obj = new Object();
			obj[0] = "1";
			obj[1] = "potatoit!";
			obj[2] = "3";
			obj[3] = "";
			obj[4] = false;
			lvDeliveries.Items.Add(obj);
			
			gContent.Children.Add(lvDeliveries);

		}
	}
}

This entry was posted in Development, M3 / MoveX. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s