Customize the tabcontrol style of Silverlight

Source: Internet
Author: User

In the previous article, we talked about customizing the tabcontrol control to implement the tabitem close button. However, to implement a beautiful tabcontrol style, such as the tab style of visualstudio2010, we still have to work hard to customize it. JuneProgramGoodDrag Control, Not goodArtistThis year, programmers are too busy, good artists, and good interface designers are hard to recruit. This weekend, I have nothing to worry about. Let's play with the control style. The main reference document is msdn. The final control effect is as follows:

 

Another unselected style also has a background:

 

Another style is like this with no background color:

 

The normal, Mouseover, selected, and unselected statuses are implemented using the controltemplate of custom tabcontrol and tabitem, and the close button of tabitem is bound to viewmodel in mvvm mode.

Source code: mainpage. XAML
 
  
    
     
   
    
     
   
   
    

      
     

      
     

    
   
   
    
     
      
        
         
          
          
         
         
          
           
            
            
           
          
         
         
          
           
            
            
           
          
         
       
      
     
      
        
         
        
        
         
          
         
                    
    
   
   
    
     
      
        
         
          
          
         
       
       
         
          
           
            
           
          
         
       
        
         
          
           
            
           
           
            
           
          
         
       
       
         
       
      
       
        
         
         
        
      
      
        
         
          
         
       
       
         
          
           
            
           
           
            
           
          
         
       
       
        
          
           
            
           
         
         
           
            
           
         
          
           
            
           
         
          
           
            
           
         
         
           
            
           
         
         
          
           
            
           
         
         
           
            
           
         
        
       
      
     
     
      
       
        
          
           
            
            
           
         
          
           
         
          
           
         
          
           
         
          
           
         
         
           
         
          
           
         
          
           
         
            
        
       
      
      
        
       
      
     
    
   
   
   
  
  
   
    
     

       
        
      

      
    
     
     

       
        
      

      
    
     
     

       
        
      

      
    
   
        
  
 


If you need source code, click here to download the source code. Have a good weekend!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.