Question

我正在使用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"
        />

谢谢..

Answer 1

你可以试试这个。它适用于wp8。

以下是源代码LongListMultiSelector custom design

请阅读xaml评论以便更好地理解。使用折线或在assets文件夹中添加图像（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`

Style LonglistMultiselector windows phone 8

1 个答案: