Designed a translucent scroll-bar to show what the theme system can do.

Source/DFPSR/gui/VisualTheme.cpp

@@ -70,7 +70,7 @@ BEGIN: generate_rounded_rectangle
 	RECTANGLE: resultImage, radius, border, w3, r2, 255
 	RECTANGLE: resultImage, radius, h2, w3, r2, 255
 	RECTANGLE: resultImage, border, radius, w4, h3, 255
-	END:
+END:
 
 BEGIN: Button
 	INPUT: FixedPoint, width
@@ -97,7 +97,7 @@ BEGIN: Button
 	MUL: greenImage<ImageU8>, lumaImage, normGreen
 	MUL: blueImage<ImageU8>, lumaImage, normBlue
 	PACK_RGBA: colorImage, redImage, greenImage, blueImage, visImage
-	END:
+END:
 
 BEGIN: ScrollButton
 	INPUT: FixedPoint, width
@@ -117,40 +117,40 @@ BEGIN: ScrollButton
 	SUB: highLuma<FixedPoint>, 150, pressDarknessHigh
 	SUB: lowLuma<FixedPoint>, 100, pressDarknessLow
 	FADE_LINEAR: patternImage,  0, 0, highLuma,  0, height, lowLuma
-	CALL: generate_rounded_rectangle, lumaImage<ImageU8>, width, height, 3, 1
+	CALL: generate_rounded_rectangle, lumaImage<ImageU8>, width, height, 5, 1
 	MUL: lumaImage, lumaImage, patternImage, 0.003921569
+	CALL: generate_rounded_rectangle, visImage<ImageU8>, width, height, 5, 0
 	MUL: redImage<ImageU8>, lumaImage, normRed
 	MUL: greenImage<ImageU8>, lumaImage, normGreen
 	MUL: blueImage<ImageU8>, lumaImage, normBlue
-	PACK_RGBA: colorImage, redImage, greenImage, blueImage, 255
-	END:
+	PACK_RGBA: colorImage, redImage, greenImage, blueImage, visImage
+END:
 
-BEGIN: ScrollKnob
+BEGIN: VerticalScrollBar
 	INPUT: FixedPoint, width
 	INPUT: FixedPoint, height
-	INPUT: FixedPoint, pressed
 	INPUT: FixedPoint, red
 	INPUT: FixedPoint, green
 	INPUT: FixedPoint, blue
 	OUTPUT: ImageRgbaU8, colorImage
+	CREATE: visImage<ImageU8>, width, height
+	CREATE: lumaImage<ImageU8>, width, height
+	FADE_LINEAR: visImage, 0, 0, 128, width, 0, 0
+	MUL: fadeLength<FixedPoint>, width, 2.0
+	MUL: maxFadeLength<FixedPoint>, height, 0.5
+	MIN: fadeLength, fadeLength, maxFadeLength
+	FADE_REGION_LINEAR: lumaImage, 0, 0, width, fadeLength, 0, 0, 128, 0, fadeLength, 0
+	SUB: lowerFadeTop<FixedPoint>, height, fadeLength
+	FADE_REGION_LINEAR: lumaImage, 0, lowerFadeTop, width, fadeLength, 0, 0, 0, 0, fadeLength, 128
 	# Scale by 2 / 255 so that 127.5 represents full intensity in patternImage
 	MUL: normRed<FixedPoint>, red, 0.007843138
 	MUL: normGreen<FixedPoint>, green, 0.007843138
 	MUL: normBlue<FixedPoint>, blue, 0.007843138
-	CREATE: patternImage<ImageU8>, width, height
-	MUL: pressDarknessHigh<FixedPoint>, pressed, 80
-	MUL: pressDarknessLow<FixedPoint>, pressed, 10
-	SUB: highLuma<FixedPoint>, 150, pressDarknessHigh
-	SUB: lowLuma<FixedPoint>, 100, pressDarknessLow
-	FADE_LINEAR: patternImage,  0, 0, highLuma,  0, height, lowLuma
-	CALL: generate_rounded_rectangle, lumaImage<ImageU8>, width, height, 5, 1
-	MUL: lumaImage, lumaImage, patternImage, 0.003921569
-	CALL: generate_rounded_rectangle, visImage<ImageU8>, width, height, 5, 0
 	MUL: redImage<ImageU8>, lumaImage, normRed
 	MUL: greenImage<ImageU8>, lumaImage, normGreen
 	MUL: blueImage<ImageU8>, lumaImage, normBlue
 	PACK_RGBA: colorImage, redImage, greenImage, blueImage, visImage
-	END:
+END:
 
 BEGIN: Panel
 	INPUT: FixedPoint, width
@@ -163,7 +163,7 @@ BEGIN: Panel
 	SUB: w2<FixedPoint>, width, 2
 	SUB: h2<FixedPoint>, height, 2
 	RECTANGLE: colorImage, 1, 1, w2, h2, red, green, blue, 255
-	END:
+END:
 
 BEGIN: ListBox
 	INPUT: FixedPoint, width
@@ -176,7 +176,7 @@ BEGIN: ListBox
 	SUB: w2<FixedPoint>, width, 2
 	SUB: h2<FixedPoint>, height, 2
 	RECTANGLE: colorImage, 1, 1, w2, h2, red, green, blue, 255
-	END:
+END:
 )QUOTE";
 
 class VisualThemeImpl {

Source/DFPSR/gui/components/ListBox.cpp

@@ -102,16 +102,19 @@ void ListBox::generateGraphics() {
 			if (!image_exists(this->scrollKnob_normal)
 			  || image_getWidth(this->scrollKnob_normal) != knob.width()
 			  || image_getHeight(this->scrollKnob_normal) != knob.height()) {
-				this->scalableImage_scrollKnob(knob.width(), knob.height(), false, color.red, color.green, color.blue)(this->scrollKnob_normal);
+				this->scalableImage_scrollButton(knob.width(), knob.height(), false, color.red, color.green, color.blue)(this->scrollKnob_normal);
 			}
-			// Scroll-bar
-			draw_rectangle(this->image, whole, borderColor);
-			draw_rectangle(this->image, upper, buttonColor);
-			draw_rectangle(this->image, middle, barColor);
-			draw_rectangle(this->image, lower, buttonColor);
-			draw_copy(this->image, (this->pressScrollUp) ? this->scrollButtonTop_pressed : this->scrollButtonTop_normal, upper.left(), upper.top());
+			// Only redraw the scroll list if its dimenstions changed
+			if (!image_exists(this->verticalScrollBar_normal)
+			  || image_getWidth(this->verticalScrollBar_normal) != whole.width()
+			  || image_getHeight(this->verticalScrollBar_normal) != whole.height()) {
+				this->scalableImage_verticalScrollBar(whole.width(), whole.height(), color.red, color.green, color.blue)(this->verticalScrollBar_normal);
+			}
+			// Draw the scroll-bar
+			draw_alphaFilter(this->image, this->verticalScrollBar_normal, whole.left(), whole.top());
 			draw_alphaFilter(this->image, this->scrollKnob_normal, knob.left(), knob.top());
-			draw_copy(this->image, (this->pressScrollDown && this->inside) ? this->scrollButtonBottom_pressed : this->scrollButtonBottom_normal, lower.left(), lower.top());
+			draw_alphaFilter(this->image, (this->pressScrollUp) ? this->scrollButtonTop_pressed : this->scrollButtonTop_normal, upper.left(), upper.top());
+			draw_alphaFilter(this->image, (this->pressScrollDown && this->inside) ? this->scrollButtonBottom_pressed : this->scrollButtonBottom_normal, lower.left(), lower.top());
 		}
 		this->hasImages = true;
 	}
@@ -223,7 +226,7 @@ void ListBox::receiveKeyboardEvent(const KeyboardEvent& event) {
 void ListBox::loadTheme(VisualTheme theme) {
 	this->scalableImage_listBox = theme_getScalableImage(theme, U"ListBox");
 	this->scalableImage_scrollButton = theme_getScalableImage(theme, U"ScrollButton");
-	this->scalableImage_scrollKnob = theme_getScalableImage(theme, U"ScrollKnob");
+	this->scalableImage_verticalScrollBar = theme_getScalableImage(theme, U"VerticalScrollBar");
 	// Generate fixed size buttons for the scroll buttons (because their size is currently given by constants)
 	ColorRgbI32 color = this->color.value;
 	this->scalableImage_scrollButton(scrollWidth, scrollEndHeight, false, color.red, color.green, color.blue)(this->scrollButtonTop_normal);
@@ -273,6 +276,7 @@ void ListBox::setSelectedIndex(int index, bool forceUpdate) {
 		this->selectedIndex.value = index;
 		this->hasImages = false;
 		this->callback_selectEvent(index);
+		this->limitScrolling(true);
 	}
 }
 

Source/DFPSR/gui/components/ListBox.h

@@ -51,14 +51,14 @@ private:
 	// Given from the style
 	MediaMethod scalableImage_listBox;
 	MediaMethod scalableImage_scrollButton;
-	MediaMethod scalableImage_scrollKnob;
+	MediaMethod scalableImage_verticalScrollBar;
 	RasterFont font;
 	void completeAssets();
 	void generateGraphics();
 	// Generated
 	bool hasImages = false;
 	OrderedImageRgbaU8 scrollButtonTop_normal, scrollButtonTop_pressed, scrollButtonBottom_normal, scrollButtonBottom_pressed;
-	OrderedImageRgbaU8 scrollKnob_normal;
+	OrderedImageRgbaU8 scrollKnob_normal, verticalScrollBar_normal;
 	OrderedImageRgbaU8 image;
 	// Helper methods
 	// Returns the selected index referring to an existing element or -1 if none is selected