WindowsPhone8中LongListSelector的扩展解决其不能绑定SelectdeItem的问题_移动开发_编程开发_程序员俱乐部

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

1.实现LongListSelector的扩展ExtendedSelector

class="brush:csharp;gutter:true;">  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="111,111"/>
        <Setter Property="LayoutMode" Value="Grid" />
        <Setter Property="Margin" Value="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为加载完数据后展示从尾部开始