none
请问 Image 如何实现与 GridView Item 一样的点击效果 RRS feed

答案

  • Hi,

    我的方法是使用了自定义控件和PointerDownThemeAnimation这个动画。在你的工程上右键添加一个Templated Control会有一个generic.xaml和CustomControl1.cs文件产生,下面是源代码:

    generic.xaml:

    <Style TargetType="local:CustomControl1">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:CustomControl1">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="TapStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerDown">
                                        <Storyboard>
                                            <PointerDownThemeAnimation TargetName="contentRectangle" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerUp">
                                        <Storyboard>
                                            <PointerUpThemeAnimation TargetName="contentRectangle" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="contentRectangle" 
                        Width="{TemplateBinding Width}" 
                        Height="{TemplateBinding Height}" 
                        Fill="{TemplateBinding Background}" />
                        </Grid>
                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    CustomControl1.cs:

    public sealed class CustomControl1 : Control
        {
            public CustomControl1()
            {
                this.DefaultStyleKey = typeof(CustomControl1);
            }
    
            protected override void OnPointerPressed(PointerRoutedEventArgs e)
            {
                this.CapturePointer(e.Pointer);
                VisualStateManager.GoToState(this, "PointerDown", true);
            }
    
            protected override void OnPointerReleased(PointerRoutedEventArgs e)
            {
                VisualStateManager.GoToState(this, "PointerUp", true);
                this.ReleasePointerCapture(e.Pointer);
            }
        }

    MainPage.xaml:

      <local:CustomControl1 Height="200" Width="200" Tapped="CustomControl1_Tapped_1">
                <local:CustomControl1.Background>
                    <ImageBrush ImageSource="image/test1.png" />
                </local:CustomControl1.Background>
            </local:CustomControl1>

    MainPage.xaml.cs:

      private void CustomControl1_Tapped_1(object sender, TappedRoutedEventArgs e)
            {
                Debug.WriteLine("Tapped");
            }
    

    参考:

    http://blogs.msdn.com/b/windowsappdev/archive/2012/10/15/building-a-custom-control-using-xaml-and-c.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.pointerdownthemeanimation.aspx


    Aaron
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2013年3月19日 8:17
    版主
  • 我采用的是 Behavior

     public class PressedBehavior : Behavior<FrameworkElement>
        {
            Storyboard storyboard;
            protected override void OnAttached()
            {
                base.OnAttached();
                storyboard = new Storyboard();
                PointerDownThemeAnimation pda = new PointerDownThemeAnimation();
                Storyboard.SetTarget(pda, this.AssociatedObject);
                storyboard.Children.Add(pda);
    
                this.AssociatedObject.PointerPressed += AssociatedObject_PointerPressed;
                this.AssociatedObject.PointerReleased += AssociatedObject_PointerReleased;
            }
    
            void AssociatedObject_PointerReleased(object sender, PointerRoutedEventArgs e)
            {
                storyboard.Stop();
            }
    
            void AssociatedObject_PointerPressed(object sender, PointerRoutedEventArgs e)
            {
                storyboard.Begin();
            }
    
            protected override void OnDetaching()
            {
                base.OnDetaching();
            }
        }

    <Image>
     <i:Interaction.Behaviors>
         <i:BehaviorCollection>
              <ac:PressedBehavior></ac:PressedBehavior>
              </i:BehaviorCollection>
         </i:Interaction.Behaviors>
    </Image>


    Big Big Pig.

    2013年3月25日 1:28

全部回复

  • Hi,

    我的方法是使用了自定义控件和PointerDownThemeAnimation这个动画。在你的工程上右键添加一个Templated Control会有一个generic.xaml和CustomControl1.cs文件产生,下面是源代码:

    generic.xaml:

    <Style TargetType="local:CustomControl1">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:CustomControl1">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="TapStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerDown">
                                        <Storyboard>
                                            <PointerDownThemeAnimation TargetName="contentRectangle" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerUp">
                                        <Storyboard>
                                            <PointerUpThemeAnimation TargetName="contentRectangle" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="contentRectangle" 
                        Width="{TemplateBinding Width}" 
                        Height="{TemplateBinding Height}" 
                        Fill="{TemplateBinding Background}" />
                        </Grid>
                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    CustomControl1.cs:

    public sealed class CustomControl1 : Control
        {
            public CustomControl1()
            {
                this.DefaultStyleKey = typeof(CustomControl1);
            }
    
            protected override void OnPointerPressed(PointerRoutedEventArgs e)
            {
                this.CapturePointer(e.Pointer);
                VisualStateManager.GoToState(this, "PointerDown", true);
            }
    
            protected override void OnPointerReleased(PointerRoutedEventArgs e)
            {
                VisualStateManager.GoToState(this, "PointerUp", true);
                this.ReleasePointerCapture(e.Pointer);
            }
        }

    MainPage.xaml:

      <local:CustomControl1 Height="200" Width="200" Tapped="CustomControl1_Tapped_1">
                <local:CustomControl1.Background>
                    <ImageBrush ImageSource="image/test1.png" />
                </local:CustomControl1.Background>
            </local:CustomControl1>

    MainPage.xaml.cs:

      private void CustomControl1_Tapped_1(object sender, TappedRoutedEventArgs e)
            {
                Debug.WriteLine("Tapped");
            }
    

    参考:

    http://blogs.msdn.com/b/windowsappdev/archive/2012/10/15/building-a-custom-control-using-xaml-and-c.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.pointerdownthemeanimation.aspx


    Aaron
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2013年3月19日 8:17
    版主
  • 我采用的是 Behavior

     public class PressedBehavior : Behavior<FrameworkElement>
        {
            Storyboard storyboard;
            protected override void OnAttached()
            {
                base.OnAttached();
                storyboard = new Storyboard();
                PointerDownThemeAnimation pda = new PointerDownThemeAnimation();
                Storyboard.SetTarget(pda, this.AssociatedObject);
                storyboard.Children.Add(pda);
    
                this.AssociatedObject.PointerPressed += AssociatedObject_PointerPressed;
                this.AssociatedObject.PointerReleased += AssociatedObject_PointerReleased;
            }
    
            void AssociatedObject_PointerReleased(object sender, PointerRoutedEventArgs e)
            {
                storyboard.Stop();
            }
    
            void AssociatedObject_PointerPressed(object sender, PointerRoutedEventArgs e)
            {
                storyboard.Begin();
            }
    
            protected override void OnDetaching()
            {
                base.OnDetaching();
            }
        }

    <Image>
     <i:Interaction.Behaviors>
         <i:BehaviorCollection>
              <ac:PressedBehavior></ac:PressedBehavior>
              </i:BehaviorCollection>
         </i:Interaction.Behaviors>
    </Image>


    Big Big Pig.

    2013年3月25日 1:28
  • 我试了一下,是Ok!的,谢谢 Aaron Xue
    2013年3月29日 1:11
  • 因为时间关系,我只试和用了 Aaron Xue 的建议,但是,必须感谢你也提供了另一个非常好的解决方案。
    2013年3月29日 1:12