首页 > 代码库 > WindowsPhone8中LongListSelector的扩展解决其不能绑定SelectdeItem的问题

WindowsPhone8中LongListSelector的扩展解决其不能绑定SelectdeItem的问题

微软在Wp8中集成了LongListSelector, 但是该控件在ViewModel中不能实现的SelectdeItem双向绑定,因为其不是DependencyProperty没办法只能实现扩展!

 

1.实现LongListSelector的扩展ExtendedSelector

   

  public enum PositionOnAdd    {        Top,        Default,        NewItem    }    public class ExtendedSelector : LongListSelector    {        public static readonly DependencyProperty SelectedItemProperty =            DependencyProperty.Register("SelectedItem", typeof(object), typeof(ExtendedSelector), new PropertyMetadata(default(object)));        public static readonly DependencyProperty SelectionModeProperty =            DependencyProperty.Register("SelectionMode", typeof(SelectionMode), typeof(ExtendedSelector), new PropertyMetadata(SelectionMode.Single));        public static readonly DependencyProperty RepositionOnAddStyleProperty =            DependencyProperty.Register("RepositionOnAddStyle", typeof(PositionOnAdd), typeof(ExtendedSelector), new PropertyMetadata(PositionOnAdd.Default));        public PositionOnAdd RepositionOnAddStyle        {            get { return (PositionOnAdd)GetValue(RepositionOnAddStyleProperty); }            set { SetValue(RepositionOnAddStyleProperty, value); }        }        public SelectionMode SelectionMode        {            get { return (SelectionMode)GetValue(SelectionModeProperty); }            set { SetValue(SelectionModeProperty, value); }        }        public new object SelectedItem        {            get { return GetValue(SelectedItemProperty); }            set { SetValue(SelectedItemProperty, value); }        }        public ExtendedSelector()        {            SelectionChanged += (sender, args) =>            {                if (SelectionMode == SelectionMode.Single)                    SelectedItem = args.AddedItems[0];                else if (SelectionMode == SelectionMode.Multiple)                {                    if (SelectedItem == null)                    {                        SelectedItem = new List<object>();                    }                    foreach (var item in args.AddedItems)                    {                        ((List<object>)SelectedItem).Add(item);                    }                    foreach (var removedItem in args.RemovedItems)                    {                        if (((List<object>)SelectedItem).Contains(removedItem))                        {                            ((List<object>)SelectedItem).Remove(removedItem);                        }                    }                }            };            Loaded += (sender, args) =>            {                ((INotifyCollectionChanged)ItemsSource).CollectionChanged += (sender2, args2) =>                {                    if (ItemsSource.Count > 0 && args2.NewItems != null)                    {                        switch (RepositionOnAddStyle)                        {                            case PositionOnAdd.NewItem:                                int index = ItemsSource.IndexOf(args2.NewItems[0]);                                if (index >= 0)                                    ScrollTo(ItemsSource[index]);                                break;                            case PositionOnAdd.Top:                                ScrollTo(ItemsSource[0]);                                break;                        }                    }                };            };        }    }

 2.在xmal中使用 扩展ExtendedSelector 

      a.定义数据模板

         

   <DataTemplate x:Name="LLSDataTemplate">        <ListBoxItem Margin="0,0,0,6">            <StackPanel>                <StackPanel Margin="0,0,0,12">                    <TextBlock  toolkit:SlideInEffect.LineIndex="1"  Foreground="{StaticResource FontGroundThemeBrush}" TextWrapping="Wrap"   FontSize="30"  TextTrimming="None"   Text="{Binding name}"   />                    <TextBlock  toolkit:SlideInEffect.LineIndex="2" Foreground="{StaticResource FontGroundThemeBrush}" Opacity="0.7" TextWrapping="Wrap" TextTrimming="None"  FontSize="18" Text="{Binding content}"  />                </StackPanel>            </StackPanel>        </ListBoxItem>    </DataTemplate>

  b.定义LongListSelector的Style

       

 <Style x:Key="JumpListStyle" TargetType="phone:LongListSelector">        <Setter Property="GridCellSize"  Value="http://www.mamicode.com/111,111"/>        <Setter Property="LayoutMode" Value="http://www.mamicode.com/Grid" />        <Setter Property="Margin" Value="http://www.mamicode.com/18,12,0,0"/>        <Setter Property="ItemTemplate">            <Setter.Value>                <DataTemplate>                    <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Margin="6" >                        <TextBlock Text="{Binding Key}"                                       FontFamily="{StaticResource PhoneFontFamilySemiBold}"                                       FontSize="48" Padding="11,0,0,1"                                       Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Bottom" />                    </Border>                </DataTemplate>            </Setter.Value>        </Setter>    </Style>    <DataTemplate x:Key="GroupHeaderTemplate">        <Border Background="Transparent" Padding="5">            <Border Background="{StaticResource BackgroundThemeBrush}"                    BorderBrush="{StaticResource BackgroundThemeBrush}"                                        Width="62" Height="62"                    Margin="-6,0,18,6"                    HorizontalAlignment="Left">                <TextBlock Text="{Binding Key}"                           Foreground="{StaticResource PhoneForegroundBrush}"                           FontSize="48"                           Padding="6,6,6,11"                           FontFamily="{StaticResource PhoneFontFamilySemiLight}"                           HorizontalAlignment="Left"                           VerticalAlignment="Center"/>            </Border>        </Border>    </DataTemplate>

  c.Page页面代码的实现

        

 <control:ExtendedSelector   Margin="12,0,12,24"   x:Name="ReaultListBox"                                       ItemsSource="{Binding SearchReaultItem, Mode=TwoWay}"                                       SelectedItem="{Binding SelectCydqItem,Mode=TwoWay}"                                        GroupHeaderTemplate="{StaticResource GroupHeaderTemplate}"                                       HideEmptyGroups="True"                                       IsGroupingEnabled="True"                                       ItemTemplate="{StaticResource LLSDataTemplate}"                                       toolkit:TurnstileFeatherEffect.FeatheringIndex="1"                                       JumpListStyle="{StaticResource JumpListStyle}"                                       RepositionOnAddStyle="Top"  >                                <i:Interaction.Triggers>                                    <i:EventTrigger EventName="SelectionChanged">                                    <cmd:EventToCommand Command="{Binding SearchVM.SelectionChangedCommand,Source={StaticResource Locator}}" CommandParameter="{Binding Path=SelectedItem,ElementName=ReaultListBox}"/>                                    </i:EventTrigger>                                </i:Interaction.Triggers>                            </control:ExtendedSelector>

  

实现效果:

             

说明: RepositionOnAddStyle="Top" 有Top,Default,NewItem ,Top 为加载完数据后展示从头部开始 NewItem为加载完数据后展示从尾部开始

WindowsPhone8中LongListSelector的扩展解决其不能绑定SelectdeItem的问题