Custom Header and Divider components for BB10 Cascades.

divider.amd

#RimCascadesAssetMetaData version=1.0
source: "divider.png"
repeatable: true

divider.png

header.amd

#RimCascadesAssetMetaData version=1.0
source: "header.png"
repeatable: true

header.png

SettingDivider.qml

import bb.cascades 1.0

Container {
  id: root
  background: bg.imagePaint
  
  preferredHeight: 32
  layout: StackLayout { orientation: LayoutOrientation.LeftToRight }
  
  attachedObjects: [
    ImagePaintDefinition {
      id: bg
      repeatPattern: RepeatPattern.X
      imageSource: "asset:///images/components/divider.amd"
    }
  ]
  
  Container {
    minHeight: 32
  	maxHeight: 32
  	preferredHeight: 32
  	layoutProperties: StackLayoutProperties { spaceQuota: 1.0 }
  }
}

SettingHeader.qml

import bb.cascades 1.0

Container {
  id: root
  background: bg.imagePaint
  
  preferredHeight: 32
  layout: StackLayout { orientation: LayoutOrientation.LeftToRight }
  
  property string title: "Header"
  
  attachedObjects: [
    ImagePaintDefinition {
      id: bg
      repeatPattern: RepeatPattern.X
      imageSource: "asset:///images/components/header.amd"
    }
  ]
  
  Container {
    leftPadding: 15
    rightPadding: 15
    layoutProperties: StackLayoutProperties { spaceQuota: 1.0 }
    
    Label {
      text: root.title
      textStyle.color: Color.White
      textStyle.fontSize: FontSize.Small
      textStyle.fontWeight: FontWeight.Bold
    }
  }
}