Three rectangles in WPF progressbar style -

Three rectangles in WPF progressbar style -

currently fixed border width="750" want split progress-bar width="*" our defined colors (red,green,blue) utilize window width of different resolution screens , our colors starts (left,center,right) of page(not each other), when 1 color disappear (complete circle) must start 1 time again left side of page. modified style, not worked such want.

<lineargradientbrush x:key="progressbarindicatoranimatedfill" startpoint="0,0.5" endpoint="1,0.5"> <lineargradientbrush.gradientstops> <gradientstopcollection> <gradientstop color="white" offset="0" /> <gradientstop color="chocolate" offset="0.4" /> <gradientstop color="chocolate" offset="0.6" /> <gradientstop color="white" offset="1" /> </gradientstopcollection> </lineargradientbrush.gradientstops> </lineargradientbrush> <style targettype="{x:type progressbar}"> <setter property="template"> <setter.value> <controltemplate targettype="{x:type progressbar}"> <grid minheight="14" minwidth="400" background="{templatebinding background}"> <border x:name="part_track" cornerradius="2" borderthickness="1"> <border.borderbrush> <solidcolorbrush color="#ffffff" /> </border.borderbrush> </border> <border x:name="part_indicator" cornerradius="2" borderthickness="1" horizontalalignment="left" background="{templatebinding foreground}" margin="0,-1,0,1"> <grid cliptobounds="true" x:name="animation"> <border x:name="part_glowrect" width="750" horizontalalignment="left" background="transparent" margin="0,0,0,0" > <grid> <grid.columndefinitions> <columndefinition width="150" /> <columndefinition width="150" /> <columndefinition width="150" /> <columndefinition width="150" /> <columndefinition width="150" /> </grid.columndefinitions> <rectangle grid.column="0" fill="{staticresource progressbarindicatoranimatedfill}" /> <rectangle grid.column="1" fill="transparent" /> <rectangle grid.column="2" fill="{staticresource progressbarindicatoranimatedfill}" /> <rectangle grid.column="3" fill="transparent" /> <rectangle grid.column="4" fill="{staticresource progressbarindicatoranimatedfill}" /> </grid> </border> </grid> </border> </grid> </controltemplate> </setter.value> </setter> <setter property="foreground" value="#ffffff"/>

i think progressbar command not modifiable accomplish need, can create similar effect simple animations:

<grid height="50" width="300" background="darkgray" cliptobounds="true"> <grid x:name="grid1" width="300" horizontalalignment="left"> <grid.columndefinitions> <columndefinition width="*" /> <columndefinition width="*" /> <columndefinition width="*" /> </grid.columndefinitions> <rectangle grid.column="0" fill="red" /> <rectangle grid.column="1" fill="green" /> <rectangle grid.column="2" fill="blue" /> <grid.triggers> <eventtrigger routedevent="window.loaded"> <beginstoryboard> <storyboard repeatbehavior="forever"> <thicknessanimation storyboard.targetname="grid1" storyboard.targetproperty="margin" from="0,0,0,0" to="300,0,0,0" duration="0:0:3" begintime="0:0:0"/> </storyboard> </beginstoryboard> </eventtrigger> </grid.triggers> </grid> <grid x:name="grid2" width="300" horizontalalignment="left"> <grid.columndefinitions> <columndefinition width="*" /> <columndefinition width="*" /> <columndefinition width="*" /> </grid.columndefinitions> <rectangle grid.column="0" fill="red" /> <rectangle grid.column="1" fill="green" /> <rectangle grid.column="2" fill="blue" /> <grid.triggers> <eventtrigger routedevent="window.loaded"> <beginstoryboard> <storyboard repeatbehavior="forever"> <thicknessanimation storyboard.targetname="grid2" storyboard.targetproperty="margin" from="-300,0,0,0" to="0,0,0,0" duration="0:0:3" begintime="0:0:0"/> </storyboard> </beginstoryboard> </eventtrigger> </grid.triggers> </grid> </grid>

in code above have 2 identical grids (grid1 , grid2), difference lies in animation: both moving left right same speed, in different phase, create illusion, 1 time color disappears @ right side, comes back left.

the cliptobounds="true" setting of outmost grid ensures no drawing done outside grid.

if keen on using progressbar, can modify part_track contain grid above, , skip part_indicator , part_glowrect. here code modified in way (and set page):

<page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <grid> <grid.resources> <lineargradientbrush x:key="progressbarindicatoranimatedfill" startpoint="0,0.5" endpoint="1,0.5"> <lineargradientbrush.gradientstops> <gradientstopcollection> <gradientstop offset="0" color="white"/> <gradientstop offset="0.4" color="chocolate"/> <gradientstop offset="0.6" color="chocolate"/> <gradientstop offset="1" color="white"/> </gradientstopcollection> </lineargradientbrush.gradientstops> </lineargradientbrush> <style targettype="{x:type progressbar}"> <setter property="template"> <setter.value> <controltemplate targettype="{x:type progressbar}"> <grid maxwidth="750" minheight="14" minwidth="400" background="{templatebinding background}"> <border x:name="part_track" borderthickness="1" cornerradius="2"> <border.borderbrush> <solidcolorbrush color="#ffffff"/> </border.borderbrush> <grid cliptobounds="true"> <grid x:name="grid1"> <grid.columndefinitions> <columndefinition width="150"/> <columndefinition width="150"/> <columndefinition width="150"/> <columndefinition width="150"/> <columndefinition width="150"/> </grid.columndefinitions> <rectangle grid.column="0" fill="{staticresource progressbarindicatoranimatedfill}"/> <rectangle grid.column="1" fill="transparent"/> <rectangle grid.column="2" fill="{staticresource progressbarindicatoranimatedfill}"/> <rectangle grid.column="3" fill="transparent"/> <rectangle grid.column="4" fill="{staticresource progressbarindicatoranimatedfill}"/> <grid.triggers> <eventtrigger routedevent="window.loaded"> <beginstoryboard> <storyboard repeatbehavior="forever"> <thicknessanimation begintime="0:0:0" duration="0:0:3" from="0,0,0,0" storyboard.targetname="grid1" storyboard.targetproperty="margin" to="900,0,0,0"/> </storyboard> </beginstoryboard> </eventtrigger> </grid.triggers> </grid> <grid x:name="grid2"> <grid.columndefinitions> <columndefinition width="150"/> <columndefinition width="150"/> <columndefinition width="150"/> <columndefinition width="150"/> <columndefinition width="150"/> </grid.columndefinitions> <rectangle grid.column="0" fill="{staticresource progressbarindicatoranimatedfill}"/> <rectangle grid.column="1" fill="transparent"/> <rectangle grid.column="2" fill="{staticresource progressbarindicatoranimatedfill}"/> <rectangle grid.column="3" fill="transparent"/> <rectangle grid.column="4" fill="{staticresource progressbarindicatoranimatedfill}"/> <grid.triggers> <eventtrigger routedevent="window.loaded"> <beginstoryboard> <storyboard repeatbehavior="forever"> <thicknessanimation begintime="0:0:0" duration="0:0:3" from="-900,0,0,0" storyboard.targetname="grid2" storyboard.targetproperty="margin" to="0,0,0,0"/> </storyboard> </beginstoryboard> </eventtrigger> </grid.triggers> </grid> </grid> </border> </grid> </controltemplate> </setter.value> </setter> <setter property="foreground" value="#ffffff"/> </style> </grid.resources> <progressbar isindeterminate="true"/> </grid> </page>

i hope helps.

wpf