After creating a ProgressBar Control, I wanted to make it look completely different. I am not sure where I am going to use it yet but point more was about trying to see how different can I make this control look using Templating. It should be something just Styling would not have been useful for.
I wanted to have a searchlight effect while I am downloading something (just to use the same example from my Live Search Sample). It means I wanted it to look something like below. Also during Value is being changed, I wanted the brush that shows the focus effect to rotate in circular motion.
Defining a Control Template
For defining a control template, you really need to know what are the parts and what the behavior of the control is. Since we don’t have tools yet, one could reflect over the assembly to get this information
Parts of Control
This tells me I need a Part called PART_Indicator of type FrameworkElement (or it is child classes), I also need Part called PART_Value of type TextBlock and then I need to define animations for “InProgress” and “IsInDeterminate” state.
Define the new looks
Using this information, I need to define a new visual for the control. This is what the new XAML for new look looks like
This is the actual look of the control.
Consume the Template
To consume this visual look inside my application. I need to do two things…
Define this Control Template in Resources
This XAML is wrapped in ControlTemplate Tag and given a Key
Set the Template Property to Resource
Here is the working project.