none
listbox拖动时,选中的listitem的变化问题 RRS feed

  • 问题

  • 想做这样的效果:
    拖动listbox时, 只改变首次点到的那个item的style,变一下颜色或大小。我用了以下代码,在模拟器上可以,但是手机上手指一滑动,选中的item也会变化,有什么方法可以解决?

    <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <TextBlock x:Name="textBlock" Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}">
                                        
                                        <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                        <VisualState x:Name="Normal"/>
                                                        <VisualState x:Name="MouseOver">
                                                                <Storyboard>
                                                                        <ColorAnimation Duration="0" To="#FFEF5858" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                                                                        <DoubleAnimation Duration="0" To="48" Storyboard.TargetProperty="(TextBlock.FontSize)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                                                                </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Disabled"/>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="FocusStates">
                                                        <VisualState x:Name="Unfocused"/>
                                                        <VisualState x:Name="Focused"/>
                                                </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        
                                </TextBlock>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}" ItemContainerStyle="{StaticResource ListBoxItemStyle}"/>

    2012年5月16日 3:07

答案

  • 出现这样效果的原因是你将改变颜色和字体大小的Animation放在<VisualState x:Name="MouseOver">里,当鼠标滑过出现动画。可以尝试将它们放到<VisualState x:Name="Selected">里,当某一item被选择时颜色和字体大小改变;但此时鼠标移开时,item不会变回原状。

    <VisualStateGroup x:Name="SelectionStates">
        <VisualState x:Name="Unselected"/>
        <VisualState x:Name="Selected">
            <Storyboard>
                <ColorAnimation Duration="0" To="#FFEF5858" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                <DoubleAnimation Duration="0" To="48" Storyboard.TargetProperty="(TextBlock.FontSize)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>

    如果你要实现TiltEffect类似的效果,可以参考上面链接中的例子定义一个DependencyProperty,定义全局的效果。有关依赖属性的更多信息,请参考:

    http://msdn.microsoft.com/zh-cn/library/cc221408(v=vs.95).aspx

    希望能帮助到你。


    2012年5月17日 9:25
    版主
  • 找不到Title1是因为Storyboard1和Textblock(Title1)在不同的namespace里。可以尝试在后台代码中定义StoryBoard,然后在Title1_ManipulationStarted方法里设置或更改其TargetName。

    参考下面链接中的例子在后台定义storyboard。

    http://forums.silverlight.net/p/244155/610676.aspx/1?Re+How+to+Convert+to+C+codebehind+from+XAML+thanks+

    2012年5月18日 6:50
    版主

全部回复

  • toolkit中有个TiltEffect效果,基本上可以是那样的,我想再次基础上加个改变字体颜色 的动画,不知如何实现
    2012年5月16日 10:08
  • 你好,

    你的贴的代码是不是不完全?在我这边测试不出效果。WP中ListBox本身就实现了这一效果,当首次选中时改变item的字体颜色。请问你是要什么样的效果呢?

    下面文章中的例子中的ListBoxItem有倾斜效果字体颜色也改变了,供参考:

    http://www.developer.nokia.com/Community/Wiki/Windows_Phone%E9%87%8C%E7%9A%84%E5%80%BE%E6%96%9C%E6%95%88%E6%9E%9C

    2012年5月17日 3:46
    版主
  • 你好,我用的就是那段代码,只是改变了字体颜色和大小,当手指按到屏幕上拖动会看到效果的,但是比较慢的拖动会看到选中的item在变化。另外listbox本身的效果是选中后手指离开item的颜色确实变了,但是像我上面改变了style,listbox本是的效果就没有了。

    我要实现的是,但手指放都屏幕上拖动listbox时,只要求第一次接触到的那个item有变化,我上面那段代码在模拟器上可以,应该是鼠标定位比较准,在拖动的时候不会指到其他他item上。

    你上面给我的例子应该 就是我说的  toolkit中的TiltEffect效果, 但是下载到的源码中只有一个TiltEffect文件,且没有后缀,打开看着像个网页,不知道怎么回事

    2012年5月17日 6:21
  • 下面是用你定义的ListBoxItemStyle写的测试代码,但并不能重现你说的那个效果。

    <phone:PhoneApplicationPage.Resources>		
            <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <TextBlock x:Name="textBlock" Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}">
                                        
                                        <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                        <VisualState x:Name="Normal"/>
                                                        <VisualState x:Name="MouseOver">
                                                                <Storyboard>
                                                                        <ColorAnimation Duration="0" To="#FFEF5858" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                                                                        <DoubleAnimation Duration="0" To="48" Storyboard.TargetProperty="(TextBlock.FontSize)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                                                                </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Disabled"/>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="FocusStates">
                                                        <VisualState x:Name="Unfocused"/>
                                                        <VisualState x:Name="Focused"/>
                                                </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                            </TextBlock>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </phone:PhoneApplicationPage.Resources>
      
        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
           
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
               
                <ListBox x:Name="listbox" Width="100" Height="300" ItemContainerStyle="{StaticResource ListBoxItemStyle}"  />
            </Grid>
        </Grid>
     public partial class MainPage : PhoneApplicationPage
        {
            // Constructor
            public MainPage()
            {
                InitializeComponent();
                List<string> items = new List<string>();
                items.Add("item1");
                items.Add("item2");
                items.Add("item3");
                items.Add("item4");
                items.Add("item5");
                listbox.ItemsSource = items;
            }
        }

    >你上面给我的例子应该 就是我说的 toolkit中的TiltEffect效果, 但是下载到的源码中只有一TiltEffect文件,且没有后缀,打开看着像个网页,不知道怎么回事

    解压后打开文件夹,你会发现有TiltEffect文件夹和TiltEffect.sln文件,open with Microsoft Visual Studio 2010 Microsoft Expression Blend 4就能打开该程序了。

    希望有所帮助。

    2012年5月17日 7:12
    版主
  • 以下是我例子的链接,有时间帮我看看,谢谢

    https://skydrive.live.com/redir.aspx?cid=405a37cc068dd44a&resid=405A37CC068DD44A!115&parid=405A37CC068DD44A!111&authkey=!AK0zRbAKRlxkrwc

    看 first item下面的listbox
    • 已编辑 dop_nj 2012年5月17日 8:23
    2012年5月17日 8:21
  • 出现这样效果的原因是你将改变颜色和字体大小的Animation放在<VisualState x:Name="MouseOver">里,当鼠标滑过出现动画。可以尝试将它们放到<VisualState x:Name="Selected">里,当某一item被选择时颜色和字体大小改变;但此时鼠标移开时,item不会变回原状。

    <VisualStateGroup x:Name="SelectionStates">
        <VisualState x:Name="Unselected"/>
        <VisualState x:Name="Selected">
            <Storyboard>
                <ColorAnimation Duration="0" To="#FFEF5858" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                <DoubleAnimation Duration="0" To="48" Storyboard.TargetProperty="(TextBlock.FontSize)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>

    如果你要实现TiltEffect类似的效果,可以参考上面链接中的例子定义一个DependencyProperty,定义全局的效果。有关依赖属性的更多信息,请参考:

    http://msdn.microsoft.com/zh-cn/library/cc221408(v=vs.95).aspx

    希望能帮助到你。


    2012年5月17日 9:25
    版主
  • 谢谢,问题我以基本解决,链接如下:

    https://skydrive.live.com/redir.aspx?cid=405a37cc068dd44a&resid=405A37CC068DD44A!116&parid=405A37CC068DD44A!111&authkey=!AAkaQKZpR3FGBN0

    但是还有一个问题是,ListItem及Storyboard1写到MainPage下执行this.Storyboard1.Begin()会有异常,不知道是什么原因

    2012年5月17日 9:55
  • 找不到Title1是因为Storyboard1和Textblock(Title1)在不同的namespace里。可以尝试在后台代码中定义StoryBoard,然后在Title1_ManipulationStarted方法里设置或更改其TargetName。

    参考下面链接中的例子在后台定义storyboard。

    http://forums.silverlight.net/p/244155/610676.aspx/1?Re+How+to+Convert+to+C+codebehind+from+XAML+thanks+

    2012年5月18日 6:50
    版主