微软在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="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为加载完数据后展示从尾部开始