Added header and footer with gradients to the list view.

ListPage.qml

@@ -7,13 +7,54 @@ Page {
 
     ListView {
         anchors.fill: parent
-        model: mainModel
-        delegate: ListItemDelegate {}
-        highlight: Rectangle {
-            color: "lightsteelblue"
-            radius: 5
-        }
         focus: true
         clip: true
+
+        model: mainModel
+
+        delegate: ListItemDelegate {}
+        highlight: Rectangle {
+            color: "lightgray"
+            radius: 5
+        }
+
+        header: bannercomponent
+        footer: Rectangle {
+            width: parent.width
+            height: 30
+            gradient: mainGradient
+        }
+    }
+
+    Component {
+        //instantiated when header is processed
+        id: bannercomponent
+        Rectangle {
+            id: banner
+            width: parent.width
+            height: 50
+            gradient: mainGradient
+            border {
+                color: "lightgreen"
+                width: 2
+            }
+            Text {
+                anchors.centerIn: parent
+                text: window.title
+                font.pixelSize: 32
+            }
+        }
+    }
+
+    Gradient {
+        id: mainGradient
+        GradientStop {
+            position: 0.0
+            color: "#56FF56"
+        }
+        GradientStop {
+            position: 0.66
+            color: "#7ED24E"
+        }
     }
 }