Toying a little.. Extending the WPF Text Element
I had a busy week where I was a lot from home I didn’t have access to my .NET Micro Framework devices so I toyed a little with the new 3.0 version and the Emulator. I have an idea to make something like the Philips Wakeup light. It should be easy to construct, it’s just an micro controller board, light dimmer and a light bulb. But that project lies a litte in the future. When i’m developing my simple projects one of the hard parts is always the UI design. I’m a web developer so I’m used to keep the UI as far away from the business logic as posible. Ofcourse this is not realy posible with the small .NET Micro Framework.
Being obligated to think about the user interface and build it I want to make an UI class with elements that are missing from the standard WPF library. Things that should be easy to implement are Up/Down control, Select list, Text edit, Buttons and Alert dialogs. Also focus shifting with the [Tab] key is something I realy mis.
Don’t talk just do it… That’s always the hard part building what you dreamed up.. but i’ve started. Below you can find the source for the first version of the Up/Down control. I hope I can give an update realy soon..
using System;
using Microsoft.SPOT.Input;
using Microsoft.SPOT.Hardware;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Media;
using Microsoft.SPOT.Presentation.Controls;
namespace ElzeKool.ui
{
/// <summary>
/// Up Down element, Reacts to Up/Down button with Min/Max values and Step size.
/// </summary>
public class UpDownField : Text
{
private int _value;
private int _min;
private int _max;
private int _step;
/// <summary>
/// Current value of UpDown control
/// </summary>
public int Value
{
get
{
return _value;
}
set
{
if ((Value < Min) || (Value > Max)) throw new Exception("Value must be with in minimal and maximal values!");
_value = value;
}
}
/// <summary>
/// Minimum value of UpDown control
/// </summary>
public int Min
{
get
{
return _min;
}
set
{
if (Min >= Max) throw new Exception("Minimal value must be lower then maximum value!");
_min = value;
}
}
/// <summary>
/// Maximum value of UpDown control
/// </summary>
public int Max
{
get
{
return _max;
}
set
{
if (Max <= Min) throw new Exception("Maximal value must be larger then minimum value!");
_max = value;
}
}
/// <summary>
/// Step size for UpDown control
/// </summary>
public int Step
{
get
{
return _step;
}
set
{
_step = value;
}
}
/// <summary>
/// Constructor with default options
/// Min: 0
/// Max: 100
/// Value: 0
/// Step: 1
/// </summary>
public UpDownField()
{
_value = 0; _min = 0; _max = 100; _step = 1;
this.TextContent = _value.ToString();
this.Invalidate();
}
/// <summary>
/// Constructor with min/max and value and default step (Step: 1)
/// </summary>
/// <param name="Min">Minimal value</param>
/// <param name="Max">Maximal value</param>
/// <param name="Value">Current value</param>
public UpDownField(int Min, int Max, int Value)
{
// Check parameters
if (Min >= Max) throw new Exception("Minimal value must be lower then maximum value!");
if (Max <= Min) throw new Exception("Maximal value must be larger then minimum value!");
if ((Value < Min) || (Value > Max)) throw new Exception("Value must be with in minimal and maximal values!");
// Store parameters
_min = Min;
_max = Max;
_value = Value;
_step = 1;
this.TextContent = _value.ToString();
this.ForeColor = ElzeKool.ui.Settings.Colors.ForeColor;
this.Invalidate();
}
/// <summary>
/// Constructor with min/max, value and step
/// </summary>
/// <param name="Min">Minimal value</param>
/// <param name="Max">Maximal value</param>
/// <param name="Value">Current value</param>
/// <param name="Step">Step size</param>
public UpDownField(int Min, int Max, int Value, int Step)
{
// Check parameters
if (Min >= Max) throw new Exception("Minimal value must be lower then maximum value!");
if (Max <= Min) throw new Exception("Maximal value must be larger then minimum value!");
if ((Value < Min) || (Value > Max)) throw new Exception("Value must be with in minimal and maximal values!");
// Store parameters
_min = Min;
_max = Max;
_value = Value;
_step = Step;
this.TextContent = _value.ToString();
this.ForeColor = ElzeKool.ui.Settings.Colors.ForeColor;
this.Invalidate();
}
protected override void OnGotFocus(FocusChangedEventArgs e)
{
this.Invalidate();
base.OnGotFocus(e);
}
protected override void OnLostFocus(FocusChangedEventArgs e)
{
this.Invalidate();
base.OnLostFocus(e);
}
public override void OnRender(Microsoft.SPOT.Presentation.Media.DrawingContext dc)
{
if (this.IsFocused)
{
// Draw rectangle with Select Color
dc.DrawRectangle(new SolidColorBrush(ElzeKool.ui.Settings.Colors.SelectBackGround), new Pen(ElzeKool.ui.Settings.Colors.SelectBackGround), 0, 0, this.Width, this.Height);
// Change foreground color
this.ForeColor = ElzeKool.ui.Settings.Colors.SelectForeColor;
// Base renderer
base.OnRender(dc);
// Reset ForeColor
this.ForeColor = ElzeKool.ui.Settings.Colors.ForeColor;
}
else
{
base.OnRender(dc);
}
}
/// <summary>
/// ButtonUp event
/// </summary>
/// <param name="e"></param>
protected override void OnButtonUp(ButtonEventArgs e)
{
// Change focus to previous element when Left is pressed
if (e.Button == Button.VK_LEFT)
{
// Get Parent Children size and current index
int Index = 0;
int Size = 0;
// First parent
if (this.Parent.GetType() == typeof(Canvas))
{
Index = ((Canvas)this.Parent).Children.IndexOf(this);
Size = ((Canvas)this.Parent).Children.Count;
// Change focus
if (Index == 0) { Index = Size-1; } else { Index -= 1; }
Buttons.Focus(((Canvas)this.Parent).Children[Index]);
e.Handled = true;
}
else
{
if (this.Parent.Parent.GetType() == typeof(Canvas))
{
Index = ((Canvas)this.Parent.Parent).Children.IndexOf(this);
Size = ((Canvas)this.Parent.Parent).Children.Count;
// Change focus
if (Index == 0) { Index = Size-1; } else { Index -= 1; }
Buttons.Focus(((Canvas)this.Parent.Parent).Children[Index]);
e.Handled = true;
}
}
}
// Change focus to next element when Right is pressed
if (e.Button == Button.VK_RIGHT)
{
// Get Parent Children size and current index
int Index = 0;
int Size = 0;
// First parent
if (this.Parent.GetType() == typeof(Canvas))
{
Index = ((Canvas)this.Parent).Children.IndexOf(this);
Size = ((Canvas)this.Parent).Children.Count;
// Change focus
if (Index == Size-1) { Index = 0; } else { Index += 1; }
Buttons.Focus(((Canvas)this.Parent).Children[Index]);
e.Handled = true;
}
else
{
if (this.Parent.Parent.GetType() == typeof(Canvas))
{
Index = ((Canvas)this.Parent.Parent).Children.IndexOf(this);
Size = ((Canvas)this.Parent.Parent).Children.Count;
// Change focus
if (Index == Size-1) { Index = 0; } else { Index += 1; }
Buttons.Focus(((Canvas)this.Parent.Parent).Children[Index]);
e.Handled = true;
}
}
}
// User pressed Down button, decrease value
if (e.Button == Button.VK_DOWN)
{
// Substract step size if with in allowed min/max range
if ((_value – _step) >= _min) { _value -= _step; }
this.TextContent = _value.ToString();
this.Invalidate();
// Event is processed
e.Handled = true;
}
// User pressed Up button, increase value
if (e.Button == Button.VK_UP)
{
// Add step size if with in allowed min/max range
if ((_value + _step) <= _max) { _value += _step; }
this.TextContent = _value.ToString();
this.Invalidate();
// Event is processed
e.Handled = true;
}
base.OnButtonUp(e);
}
}
}
Recent Comments