List box with a background (image) for the .NET Micro Framework
The development boards and devices for the .NET Micro Framework have great color lcd displays. So a list box menu with a white or solid background looks quite boring. Why not add a background to a listbox?
Therefore I derived my custom list box called BackgroundImageListBox from ListBox. It has a property BackgroundIBitmap to specify a certain bitmap as background. If StretchImage is true the bitmap will be stretched to fill the whole list box, if false the bitmap will be centered. If no bitmap is specified, a color gradient background is drawn. This is done by overriding the OnRender method.
And here the custom list box control:
using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
namespace Kuehner.SPOT.Presentation.Controls
{
public class BackgroundImageListBox : ListBox
{
private Bitmap backgroundBitmap;
private bool stretchImage;
public BackgroundImageListBox()
{
ScrollViewer v = base.LogicalChildren[0] as ScrollViewer;
v.Background = null;
this.Background = null;
}
public override void OnRender(DrawingContext dc)
{
base.OnRender(dc);
if (this.backgroundBitmap != null)
{
if (this.stretchImage)
dc.Bitmap.StretchImage(0, 0, this.backgroundBitmap, this.Width, this.Height, 0xFF); //stretch to fit
else
{
//center
int x = (this.Width - this.backgroundBitmap.Width) / 2;
int y = (this.Height - this.backgroundBitmap.Height) / 2;
dc.DrawImage(this.backgroundBitmap, x, y); //draw unscaled
}
}
else
{
//draw gradient if no bitmap specified
dc.Bitmap.DrawRectangle(Color.Black, 0,
0, 0, this.Width, this.Height, 0, 0,
ColorUtility.ColorFromRGB(255, 96, 96), 0, 0,
ColorUtility.ColorFromRGB(96, 96, 255), 0, this.Height,
0xFF);
}
}
public Bitmap BackgroundBitmap
{
get { return this.backgroundBitmap; }
set { this.backgroundBitmap = value; }
}
public bool StretchImage
{
get { return this.stretchImage; }
set { this.stretchImage = value; }
}
}
}
When you polulate your list box you need to set the Background of a list box item to null so that it is painted transparently.
Heres some code to populate your list box.
public Window CreateWindow()
{
// Create a window object and set its size to the
// size of the display.
mainWindow = new Window();
mainWindow.Height = SystemMetrics.ScreenHeight;
mainWindow.Width = SystemMetrics.ScreenWidth;
BackgroundImageListBox listBox = new BackgroundImageListBox();
listBox.BackgroundBitmap = Resources.GetBitmap(Resources.BitmapResources.MFsnowflake);
//listBox.StretchImage = true;
listBox.Width = mainWindow.Width;
listBox.Height = mainWindow.Height;
Font font = Resources.GetFont(Resources.FontResources.small);
foreach (String s in new String[] { "One", "Two", "Three",
"Four", "Five", "Six", "Seven", "Eight" })
{
Text text = new Text(font, "Menu " + s);
text.Width = listBox.Width;
text.Height = 20;
text.TextAlignment = TextAlignment.Center;
ListBoxItem item = new ListBoxItem();
item.Child = text;
item.Background = null; //important
listBox.Items.Add(item);
}
mainWindow.Child = listBox;
// Connect the button handler to all of the buttons.
mainWindow.AddHandler(Buttons.ButtonUpEvent, new ButtonEventHandler(OnButtonUp), false);
// Set the window visibility to visible.
mainWindow.Visibility = Visibility.Visible;
// Attach the button focus to the window.
Buttons.Focus(mainWindow);
return mainWindow;
}