Creating Gradient Brush along a Circular Path

Question

I need to create a multi-step gradient along a circular path, as demonstrated in the following image:

Answer 1

You can get a cross-radial effect by using a non-affine transformation such as a perspective transform. I used the ideas in this article by Charles Petzold:

• Non-Affine Transforms in 2D?

to create a XAML-only annular region with a cross-radial gradient. Here is the markup:

    
        
            
                0
                
                    
                    
                    
                
            
            
                90
                
                    
                    
                    
                
            
            
                180
                
                    
                    
                    
                
            
            
                270
                
                    
                    
                    
                
            
        
    
    
        
            
                
                
                
                
            
        
        
            
                
            
        
        
            
                
            
        
        
            
                
                    
                        
                    
                    
                        
                            
                                
                                    
                                        
                                            
                                        
                                        
                                            
                                        
                                        
                                            
                                        
                                    
                                    
                                
                            
                        
                        
                            
                        
                    
                
            
        
    

and here is the visual result:

The effect uses a data source collection with items that have two properties, an angle and a brush. It draw four quadrants (up, right, down and left) using a different brush for each quadrant. Then the whole thing is clipped to the annular region with an opacity mask.