我正在使用Toolkit控件LonglistMultiSelector。我对样式一无所知。我想做我的longlistselector如图所示，请帮助我。我的longlistMultiSelector代码是：
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="PictureItemTemplate">
<Image HorizontalAlignment="Left" Width="109" Height="109" Margin="2,2,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Source="{Binding Image}"/>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<toolkit:LongListMultiSelector x:Name="GridSelector"
EnforceIsSelectionEnabled="False"
IsGroupingEnabled="False"
GridCellSize="111,111"
LayoutMode="Grid"
HideEmptyGroups="True"
ItemTemplate="{StaticResource PictureItemTemplate}" Height="500" VerticalAlignment="Top"
SelectionChanged="selectionChanged"
/>
谢谢 ..
最佳答案
你可以试试看它适用于wp8。
这是源代码LongListMultiSelector custom design
请阅读xaml注释以更好地理解。
使用折线或在素材资源文件夹中添加图片（img）。
<phone:PhoneApplicationPage.Resources>
<Style x:Key="LongListMultiSelectorItemGridStyle"
TargetType="toolkit:LongListMultiSelectorItem">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Padding"
Value="0" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:LongListMultiSelectorItem">
<Border x:Name="LayoutRoot"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource TransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0"
To=".5"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentContainer" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectionTriangle">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectionCheck">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="HasSelectionStates">
<VisualState x:Name="Opened">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectionRectangle">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="OuterCover">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Closed" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="1">
<ContentControl x:Name="ContentContainer"
Margin="3"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
<!--to change the border style-->
<Rectangle x:Name="SelectionRectangle"
Visibility="Collapsed"
Stroke="{StaticResource PhoneAccentBrush}"
StrokeThickness="0" />
<!--to change the style after selected an item-->
<Border x:Name="SelectionTriangle"
Visibility="Collapsed"
Height="32"
Width="32"
CornerRadius="16"
Background="Blue"
Margin="-6 0"
HorizontalAlignment="Right"
VerticalAlignment="Bottom">
<!--<Image Source="/Assets/Check.png"
Stretch="UniformToFill" />-->
<Polyline Points="40,0 43,3 28,18 18,8 21,5 28,12"
Fill="White"
Margin="-13 9 0 0"/>
</Border>
<!--default style for selection change I am hide this by seting Fill="Transparent"-->
<Polyline x:Name="SelectionCheck"
Visibility="Collapsed"
Margin="5"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Points="40,0 43,3 28,18 18,8 21,5 28,12"
Fill="Transparent" />
<Grid x:Name="OuterCover"
IsHitTestVisible="True"
Visibility="Collapsed"
Background="Transparent"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="MediaGridTemplate">
<!--to set image and round the corner of each one-->
<Border CornerRadius="15"
Height="100"
Margin="6 0 0 6"
Width="100">
<Border.Background>
<ImageBrush ImageSource="{Binding Thumbnail}"
Stretch="UniformToFill" />
</Border.Background>
</Border>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Height="Auto">
<toolkit:LongListMultiSelector GridCellSize="114,114"
Margin="0 6 0 0"
Name="llmsAlbumMedia"
HorizontalAlignment="Stretch"
LayoutMode="Grid"
EnforceIsSelectionEnabled="True"
ItemTemplate="{StaticResource MediaGridTemplate}"
ItemContainerStyle="{StaticResource LongListMultiSelectorItemGridStyle}"
SelectionChanged="MediaAlbumMediaList_SelectionChanged">
</toolkit:LongListMultiSelector>
</Grid>`enter code here`