Progress bar

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

If you want an approximation of the Office 2007 style progress bar:

Here is the markup (NOTE: you will have to dynamically modify the
static widths/heights included in this static markup to accommodate for
RC cell width/height and progress % completed, this is just the
skeleton required to draw an Office2007 progress bar. I would supply
the code I use to dynamically generate this bar, but I use VB6 so I
don't think it would be of much use to you.):

<Canvas Margin='0,-1,0,0' Width='94' Height='18' >

<!-- Control (non-progress) Background Gradient -->

<Border BorderBrush='#00000000' BorderThickness='1'>

<Border Height='16' Width='92' BorderBrush='#6e97cc' BorderThickness='1'>

<Border.Background>

<LinearGradientBrush StartPoint='0, 0' EndPoint='0,1'>

<GradientStop Color='#c6cbd5' Offset='0'/>

<GradientStop Color='#e0e4ed' Offset='.66'/>

</LinearGradientBrush>

</Border.Background>

<!-- Progress gradients -->

<StackPanel Orientation='Vertical' HorizontalAlignment='Left'>

<!-- Top 1 pixel gradient -->

<StackPanel Orientation='Horizontal'>

<Border Height='1' Width='28' BorderBrush='White' BorderThickness='0,0,1,0'>

<Border.Background>

<LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'>

<GradientStop Color='#d9e5c7' Offset='0'/>

<GradientStop Color='#d7e4c4' Offset='.66'/>

<GradientStop Color='White' Offset='1'/>

</LinearGradientBrush></Border.Background>

<!-- Top 1 pixel Shadow -->

</Border><Border Height='1' Width='3'>

<Border.Background>

<LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'>

<GradientStop Color='#b7bdcc' Offset='0'/>

<GradientStop Color='#ced3df' Offset='1'/>

</LinearGradientBrush></Border.Background>

</Border>

</StackPanel>

<!-- Second 1 pixel gradient -->

<StackPanel Orientation='Horizontal'>

<Border Height='1' Width='28' BorderBrush='White' BorderThickness='0,0,1,0'>

<Border.Background>

<LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'>

<GradientStop Color='#b1ca89' Offset='0'/>

<GradientStop Color='#acc781' Offset='.66'/>

<GradientStop Color='#edfdd0' Offset='1'/>

</LinearGradientBrush>

</Border.Background>

</Border>

<!-- Second 1 pixel Shadow -->

<Border Height='1' Width='3'>

<Border.Background>

<LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'>

<GradientStop Color='#b7bdcc' Offset='0'/>

<GradientStop Color='#ced3df' Offset='1'/>

</LinearGradientBrush>

</Border.Background>

</Border>

</StackPanel>

<!-- MiddleTop gradient (RemainingSpace/4 pixels high)-->

<StackPanel Orientation='Horizontal'>

<Border Height='3' Width='28' BorderBrush='White' BorderThickness='0,0,1,0'>

<Border.Background>

<LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'>

<GradientStop Color='#9fbe6f' Offset='0'/>

<GradientStop Color='#ace05f' Offset='.66'/>

<GradientStop Color='#e5fcbc' Offset='1'/>

</LinearGradientBrush>

</Border.Background>

</Border>

<!-- MiddleTop shadow Shadow -->

<Border Height='3' Width='3'>

<Border.Background>

<LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'>

<GradientStop Color='#b7bdcc' Offset='0'/>

<GradientStop Color='#ced3df' Offset='1'/>

</LinearGradientBrush>

</Border.Background>

</Border>

</StackPanel>

<!-- MiddleBottom Gradient (RemainingSpace/4 pixels high) -->

<StackPanel Orientation='Horizontal'>

<Border Height='3' Width='28' BorderBrush='White' BorderThickness='0,0,1,0'>

<Border.Background>

<LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'>

<GradientStop Color='#8eb355' Offset='0'/>

<GradientStop Color='#a0dd43' Offset='.66'/>

<GradientStop Color='#e5fcbc' Offset='1'/>

</LinearGradientBrush>

</Border.Background>

</Border>

<!-- MiddleBottom Shadow -->

<Border Height='3' Width='3'>

<Border.Background>

<LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'>

<GradientStop Color='#b7bdcc' Offset='0'/>

<GradientStop Color='#ced3df' Offset='1'/>

</LinearGradientBrush>

</Border.Background>

</Border>

</StackPanel>

<!-- Bottom Gradient (RemainingSpace/2 pixels high) -->

<StackPanel Orientation='Horizontal'>

<Border Height='6' Width='28' BorderBrush='White' BorderThickness='0,0,1,0'>

<Border.Background>

<LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'>

<GradientStop Color='#69922b' Offset='0'/>

<GradientStop Color='#88c726' Offset='.66'/>

<GradientStop Color='#cce49f' Offset='1'/>

</LinearGradientBrush>

</Border.Background>

</Border>

<!-- Bottom Shadow -->

<Border Height='6' Width='3'>

<Border.Background>

<LinearGradientBrush StartPoint='0, 0' EndPoint='1,0'>

<GradientStop Color='#b7bdcc' Offset='0'/>

<GradientStop Color='#ced3df' Offset='1'/>

</LinearGradientBrush>

</Border.Background>

</Border>

</StackPanel>

</StackPanel>

</Border>

</Border>

<!-- Border and Highlight lines -->

<Line X1='1' Y1='1' X2='1' Y2='2' Stroke='#9bbae3'/>

<Line X1='1' Y1='15' X2='1' Y2='16' Stroke='#9bbae3'/>

<Line X1='92' Y1='1' X2='92' Y2='2' Stroke='#9bbae3'/>

<Line X1='92' Y1='15' X2='92' Y2='16' Stroke='#9bbae3'/>

<Line X1='1' Y1='2' X2='1' Y2='15' Stroke='#6e97cc'/>

<Line X1='92' Y1='2' X2='92' Y2='15' Stroke='#6e97cc'/>

<Line X1='0' Y1='1' X2='0' Y2='16' Stroke='White'/>

<Line X1='93' Y1='1' X2='93' Y2='16' Stroke='White'/>

<Line X1='1' Y1='0' X2='92' Y2='0' Stroke='White'/>

<Line X1='1' Y1='17' X2='92' Y2='17' Stroke='White'/>

<Border Width='96' Height='20'>

</Border></Canvas>