ListBox选用不同的模板

先上一个效果图。大家可以看到，中间的ListBox的选中状态的Item和未选中的Item的模板是不同。

下面就介绍一下它的做法。

第一步：创建两个DataTemplate待用。一个是选中状态的(SelectDataTemplate)，一个未选中状态的(NormalDataTemplate)。将它放们放到资源里面。
       
                
                         
                                
               
               
                Update
                Del
                                 
            
                       
        

        
            
               
                                
            
        


第二步：用Blend添加一个ListBox到页面里面。在ListBox上面右键->add ListBoxItem。
第三步：在刚才添加的ListBoxItem上面右键->Edit Template->Edit a Copy。命名为:MyListBoxItemStyle
第四步：编辑我们刚才添加的MyListBoxItemStyle。在左下边的Objects and Timeline中选中ContentContainer。然后在右边的Properties里面点击ContentTemplate项的右边绿色小方块。在弹出窗口中选择Local Resource->NormalDataTemplate

第五步：打开xaml。在刚才添加的MyListBoxItemStyle中找到视觉状态组SelectionStates。在它的下面有一个Selected状态。在这个状态下面有一段代码：



  



这是一段动画。代码的意思是将ListBox的选中项(ContentContainer)的前景色(Foreground)换成红色(Value="{StaticResource PhoneAccentBrush}")。

同样的原理，在这段动画再加一段动画，把选中项的模板换掉。


  


第六步：绑定数据。
  public class Consumption
    {
        //消费名称
        public string ConsumptionName { get; set; }

        //消费金额
        public float ConsumptionAmount { get; set; }
    }

***********************************************************
List consumptionList = new List { 
                new Consumption{ConsumptionName="早餐", ConsumptionAmount=2},
                new Consumption{ConsumptionName="午餐", ConsumptionAmount=12},
                new Consumption{ConsumptionName="晚餐", ConsumptionAmount=8},
                new Consumption{ConsumptionName="水果", ConsumptionAmount=6},
                new Consumption{ConsumptionName="杂志", ConsumptionAmount=6}            
            };

            focusListBox.ItemsSource = consumptionList;

******************************************************************

这是源代码，希望你喜欢：http://download.csdn.net/detail/nnnnyyyy/4738198