LongListSelector与列表项选择风格 [英] LongListSelector with list item selection style

查看:133
本文介绍了LongListSelector与列表项选择风格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的工作在Windows Phone 8和我有在它几个项目Longlist选择。



我使用了高亮在列表中选择的项目下面的代码box.But我要为LongListSelector要达到同样的效果。



怎么办呢?

 <风格X:键=ListItemSelectorStyle的TargetType =ListBoxItem的> 
< setter属性=背景值=透明/>
< setter属性=了borderThicknessVALUE =1/>
< setter属性=填充VALUE =0/>
< setter属性=Horizo​​ntalContentAlignmentVALUE =弹力/>
< setter属性=VerticalContentAlignmentVALUE =中心/>
< setter属性=前景VALUE =黑/>
< setter属性=模板>
< Setter.Value>
<的ControlTemplate的TargetType =ListBoxItem的>
< BORDER X:NAME =ListBoxItem的背景={TemplateBinding背景}
的Horizo​​ntalAlignment ={TemplateBinding的Horizo​​ntalAlignment}
VerticalAlignment ={TemplateBinding VerticalAlignment}
BorderBrush ={TemplateBinding BorderBrush}
了borderThickness ={TemplateBinding了borderThickness}>
< VisualStateManager.VisualStateGroups>
< VisualStateGroup X:NAME =CommonStates>
<的VisualState X:名称=正常/>
<的VisualState X:NAME =鼠标悬停>
<情节提要>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =ListItemBorderStoryboard.TargetProperty =背景>
< D​​iscreteObjectKeyFrame KeyTime =0值=#c9ebf2/>
< / ObjectAnimationUsingKeyFrames>
< /故事板>
< /&的VisualState GT;
<的VisualState X:名称=已禁用/>
< / VisualStateGroup>
< VisualStateGroup X:NAME =SelectionStates>
<的VisualState X:NAME =未选定/>
<的VisualState X:NAME =选择>
<情节提要>
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =ListItemBorderStoryboard.TargetProperty =背景>
< D​​iscreteObjectKeyFrame KeyTime =0值=#c9ebf2/>
< / ObjectAnimationUsingKeyFrames>
< /故事板>
< /&的VisualState GT;
< / VisualStateGroup>
< /VisualStateManager.VisualStateGroups>
< BORDER =了borderThickness,0,0,0,1BorderBrush =黑>
< BORDER X:NAME =ListItemBorderBorderBrush =透明背景=#FFFFFF>
< ContentControl中X:NAME =ContentContainer
的ContentTemplate ={TemplateBinding的ContentTemplate}
含量={TemplateBinding内容}
Horizo​​ntalContentAlignment ={TemplateBinding Horizo​​ntalContentAlignment}
保证金={TemplateBinding填充}
VerticalContentAlignment ={TemplateBinding VerticalContentAlignment}/>
< /边框>
< /边框>
< /边框>
< /控件模板>
< /Setter.Value>
< /二传手>
< /样式和GT;


解决方案

我试试你的代码,但的的LongListSelector控制显示可选项目的列表,包括一种机制,让用户跳转到列表中的特定部分。这是示例代码



但如果你想达到像的ListBox ,您可以设置模板

$ b的效果
$ b

 < setter属性=模板> 
< Setter.Value>
<的ControlTemplate的TargetType =电话:LongListSelector>
<网格背景={TemplateBinding背景}D:DesignWidth =480D:DesignHeight =800>
< VisualStateManager.VisualStateGroups>
< VisualStateGroup X:NAME =ScrollStates>
< VisualStateGroup.Transitions>
将; VisualTransition GeneratedDuration =00:00:00.5/>
< /VisualStateGroup.Transitions>
<的VisualState X:NAME =滚动>
<情节提要>
< D​​oubleAnimation是持续时间=0=1Storyboard.TargetProperty =透明度Storyboard.TargetName =VerticalScrollBar/>
< /故事板>
< /&的VisualState GT;
<的VisualState X:NAME =NotScrolling/>
< / VisualStateGroup>
< VisualStateGroup X:NAME =CommonStates>
<的VisualState X:名称=正常/>
<的VisualState X:NAME =Seleced>
<情节提要>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty =背景Storyboard.TargetName =ViewportControl>
< D​​iscreteObjectKeyFrame KeyTime =0值=绿色/>
< / ObjectAnimationUsingKeyFrames>
< /故事板>
< /&的VisualState GT;
< / VisualStateGroup>
< /VisualStateManager.VisualStateGroups>
<电网保证金={TemplateBinding填充}>
< Grid.ColumnDefinitions>
< ColumnDefinition WIDTH =*/>
< ColumnDefinition宽度=自动/>
< /Grid.ColumnDefinitions>
< ViewportControl X:NAME =ViewportControlHorizo​​ntalContentAlignment =拉伸VerticalAlignment =顶部/>
<滚动条X:NAME =VerticalScrollBarGrid.Column =1保证金=4,0,4,0不透明度=0方向=垂直/>
< /网格和GT;
< /网格和GT;
< /控件模板>
< /Setter.Value>
< /二传手>


I am working on Windows Phone 8 and i have Longlist selector with few item in it.

I am using the below code for highlighting the selected item in the list box.But i want the same effect to be achieved for LongListSelector.

How to do it ?

<Style x:Key="ListItemSelectorStyle" TargetType="ListBoxItem">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property ="Foreground" Value="Black" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border x:Name="ListBoxItem" Background="{TemplateBinding Background}" 
                                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                                            VerticalAlignment="{TemplateBinding VerticalAlignment}" 
                                            BorderBrush="{TemplateBinding BorderBrush}" 
                                            BorderThickness="{TemplateBinding BorderThickness}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected"/>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            <Border BorderThickness="0,0,0,1" BorderBrush="Black">
                                <Border x:Name="ListItemBorder" BorderBrush="Transparent" Background="#FFFFFF">
                                    <ContentControl x:Name="ContentContainer" 
                                                ContentTemplate="{TemplateBinding ContentTemplate}" 
                                                Content="{TemplateBinding Content}" 
                                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                Margin="{TemplateBinding Padding}" 
                                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                            </Border>
                        </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

解决方案

I try your code, but the LongListSelector control display a list of selectable items with a mechanism for users to jump to a specific section of the list. This is the sample code.

But if you want achieved the effect like ListBox, you can set the template

<Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="phone:LongListSelector">
                        <Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ScrollStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="00:00:00.5"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Scrolling">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NotScrolling"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Seleced">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ViewportControl">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Margin="{TemplateBinding Padding}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="auto"/>
                                </Grid.ColumnDefinitions>
                                <ViewportControl x:Name="ViewportControl" HorizontalContentAlignment="Stretch" VerticalAlignment="Top"/>
                                <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" Margin="4,0,4,0" Opacity="0" Orientation="Vertical"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

这篇关于LongListSelector与列表项选择风格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆