none
WP8.1如何将FlipView中的图片缩放呢? RRS feed

  • 问题

  • 我在Image上用Manipulation事件实现了缩放图片,但FlipView就不再响应左右滑动的事件了。

    XCaiEr

    2014年12月15日 8:30

答案

  • 你好,

    如果实现了缩放,确实无法左右滑动了,我这边有个你可以考虑的Workaround,就是在图片下方放置容器,是为了显示图片注释,我们在这个容器上左右滑动就可以使FlipView正常左右滑动了:

    XAML:

    <FlipView x:Name="flipView1" Width="280" Height="270" 
                  BorderBrush="Black" BorderThickness="1" ItemsSource="{Binding}">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Image ManipulationMode="All" Width="280" Height="270" Source="{Binding Image}" Stretch="UniformToFill" ManipulationDelta="Image_ManipulationDelta">
                                <Image.RenderTransform>
                                    <CompositeTransform />
                                </Image.RenderTransform>
                            </Image>
                            <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                                <TextBlock Text="{Binding Name}" FontFamily="Segoe UI" FontSize="26.667" 
                                           Foreground="#CCFFFFFF" Padding="15,20"/>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>

    Code Behind:

    public class SampleDataItem
    {
            public Uri Image { get; set; }
            public string Name { get; set; }
    
            public SampleDataItem(Uri uri, string name)
            {
                Image = uri;
                Name = name;
            }
    }
    
    ......
    
    private ObservableCollection<object> _items = new ObservableCollection<object>();
    public ObservableCollection<object> Items
    {
                get { return this._items; }
    }
    
    public MainPage()
    {
                this.InitializeComponent();
    
                this.NavigationCacheMode = NavigationCacheMode.Required;
    
                Items.Add(new SampleDataItem(new Uri("ms-appx:///Assets/pic1.jpg"), "pic1"));
                Items.Add(new SampleDataItem(new Uri("ms-appx:///Assets/Build.png"), "pic2"));
    
                this.DataContext = Items;
    }
    
    private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
                    var transform = (CompositeTransform)((Image)sender).RenderTransform;
    
                    // Scale Manipulation
                    transform.ScaleX *= e.Delta.Scale;
                    transform.ScaleY *= e.Delta.Scale;
    
                    e.Handled = true;
    }

    动态图:


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    2014年12月16日 9:12
    版主

全部回复

  • 你好,

    如果实现了缩放,确实无法左右滑动了,我这边有个你可以考虑的Workaround,就是在图片下方放置容器,是为了显示图片注释,我们在这个容器上左右滑动就可以使FlipView正常左右滑动了:

    XAML:

    <FlipView x:Name="flipView1" Width="280" Height="270" 
                  BorderBrush="Black" BorderThickness="1" ItemsSource="{Binding}">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Image ManipulationMode="All" Width="280" Height="270" Source="{Binding Image}" Stretch="UniformToFill" ManipulationDelta="Image_ManipulationDelta">
                                <Image.RenderTransform>
                                    <CompositeTransform />
                                </Image.RenderTransform>
                            </Image>
                            <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                                <TextBlock Text="{Binding Name}" FontFamily="Segoe UI" FontSize="26.667" 
                                           Foreground="#CCFFFFFF" Padding="15,20"/>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>

    Code Behind:

    public class SampleDataItem
    {
            public Uri Image { get; set; }
            public string Name { get; set; }
    
            public SampleDataItem(Uri uri, string name)
            {
                Image = uri;
                Name = name;
            }
    }
    
    ......
    
    private ObservableCollection<object> _items = new ObservableCollection<object>();
    public ObservableCollection<object> Items
    {
                get { return this._items; }
    }
    
    public MainPage()
    {
                this.InitializeComponent();
    
                this.NavigationCacheMode = NavigationCacheMode.Required;
    
                Items.Add(new SampleDataItem(new Uri("ms-appx:///Assets/pic1.jpg"), "pic1"));
                Items.Add(new SampleDataItem(new Uri("ms-appx:///Assets/Build.png"), "pic2"));
    
                this.DataContext = Items;
    }
    
    private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
                    var transform = (CompositeTransform)((Image)sender).RenderTransform;
    
                    // Scale Manipulation
                    transform.ScaleX *= e.Delta.Scale;
                    transform.ScaleY *= e.Delta.Scale;
    
                    e.Handled = true;
    }

    动态图:


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    2014年12月16日 9:12
    版主
  • 你好,

    如果实现了缩放,确实无法左右滑动了,我这边有个你可以考虑的Workaround,就是在图片下方放置容器,是为了显示图片注释,我们在这个容器上左右滑动就可以使FlipView正常左右滑动了:

    XAML:

    <FlipView x:Name="flipView1" Width="280" Height="270" 
                  BorderBrush="Black" BorderThickness="1" ItemsSource="{Binding}">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Image ManipulationMode="All" Width="280" Height="270" Source="{Binding Image}" Stretch="UniformToFill" ManipulationDelta="Image_ManipulationDelta">
                                <Image.RenderTransform>
                                    <CompositeTransform />
                                </Image.RenderTransform>
                            </Image>
                            <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                                <TextBlock Text="{Binding Name}" FontFamily="Segoe UI" FontSize="26.667" 
                                           Foreground="#CCFFFFFF" Padding="15,20"/>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>

    Code Behind:

    public class SampleDataItem
    {
            public Uri Image { get; set; }
            public string Name { get; set; }
    
            public SampleDataItem(Uri uri, string name)
            {
                Image = uri;
                Name = name;
            }
    }
    
    ......
    
    private ObservableCollection<object> _items = new ObservableCollection<object>();
    public ObservableCollection<object> Items
    {
                get { return this._items; }
    }
    
    public MainPage()
    {
                this.InitializeComponent();
    
                this.NavigationCacheMode = NavigationCacheMode.Required;
    
                Items.Add(new SampleDataItem(new Uri("ms-appx:///Assets/pic1.jpg"), "pic1"));
                Items.Add(new SampleDataItem(new Uri("ms-appx:///Assets/Build.png"), "pic2"));
    
                this.DataContext = Items;
    }
    
    private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
                    var transform = (CompositeTransform)((Image)sender).RenderTransform;
    
                    // Scale Manipulation
                    transform.ScaleX *= e.Delta.Scale;
                    transform.ScaleY *= e.Delta.Scale;
    
                    e.Handled = true;
    }

    动态图:


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    其实不加容器,在图片外也是能左右滑动切换的,可是这样的体验并不好。

    WP8.1中Flipview 图片缩放的问题 这个是我就这个问题发的另外一个帖子,是用Scrollview实现了缩放,不过也并不能完美的解决问题,我想要得到一个系统相册那样的效果,望进一步赐教,谢谢啦!


    XCaiEr

    2014年12月16日 11:45
  • 你好,

    可能 FlipView 是不能实现你的需求的,那个帖子中 Bill一开始的建议是用ScrollView,但是有你提到的比例问题,我觉得最好继续在那个帖子中讨论,尝试解决这个问题


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    2014年12月21日 7:03
    版主