2

In my app I need to display a collection of Images exactly like in the Windows Phone 8 Photo App where you can swipe right and left between the images.

I've tried both the Panorama and Pivot control but both controls don't behave like WinRTs FlipView.

Panorama fits quite well but appears to have the "Right-Peek" Amount hardwired into the control. (please correct me if I'm wrong)

Pivot in turn shows blackness during swipes (finger still down) and only displays the next image when you release your finger and the control scrolls the next item into place.

Any suggestions?

4

3 に答える 3

3

これは、WINRT FlipView コントロールのような WP8 用にカスタマイズされた FlipView コントロールです...

ステップ 1: 新しいユーザー コントロールを追加し、「FlipView.xaml」という名前を付けます。

ステップ 2 : "FlipView.xaml" に次の xaml を追加します。

 <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
    <ContentPresenter  Name="contentPresenter"/>
    <Button BorderThickness="0" Name="leftButton" FontSize="70" Margin="-25" HorizontalAlignment="Left" VerticalAlignment="Center" Content="&lt;" Click="Button_Click"/>
    <Button BorderThickness="0" Name="rightButton" FontSize="70" Margin="-25" HorizontalAlignment="Right" VerticalAlignment="Center" Content="&gt;" Click="Button_Click_1"/>
</Grid>

ステップ 3: 「FlipView.cs」に次のコードを追加します。

public partial class FlipView : UserControl
{
    public FlipView()
    {
        InitializeComponent();
        Datasource = new List<object>();
        SelectedIndex = 0;
    }

    private IList Datasource;
    public static readonly DependencyProperty ItemTemplateProperty =
        DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(FlipView), new PropertyMetadata(default(DataTemplate)));

    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set
        {
            SetValue(ItemTemplateProperty, value);
            contentPresenter.ContentTemplate = value;
            contentPresenter.Content = SelectedItem;
        }
    }

    public static readonly DependencyProperty ItemsSourceProperty =
       DependencyProperty.Register("ItemsSource", typeof(IList), typeof(FlipView), new PropertyMetadata(default(IList)));

    public IList ItemsSource
    {
        get { return (IList)GetValue(ItemsSourceProperty); }
        set
        {
            SetValue(ItemsSourceProperty, value);
            Datasource = value;
            SelectedIndex = SelectedIndex;
        }
    }

    public static readonly DependencyProperty SelectedIndexProperty =
        DependencyProperty.Register("SelectedIndex", typeof(int), typeof(FlipView), new PropertyMetadata(default(int)));

    public int SelectedIndex
    {
        get { return (int)GetValue(SelectedIndexProperty); }
        set
        {
            SetValue(SelectedIndexProperty, value);

            rightButton.Visibility = leftButton.Visibility = Visibility.Visible;
            if (SelectedIndex == 0)
            {
                leftButton.Visibility = Visibility.Collapsed;
            }

            if (SelectedIndex + 1 == Datasource.Count)
            {
                rightButton.Visibility = Visibility.Collapsed;
                SelectedItem = Datasource[SelectedIndex];
            }

            if (Datasource.Count > SelectedIndex + 1)
            {
                SelectedItem = Datasource[SelectedIndex];
            }
        }
    }

    public static readonly DependencyProperty SelectedItemProperty =
        DependencyProperty.Register("SelectedItem", typeof(object), typeof(FlipView), new PropertyMetadata(default(object)));

    public object SelectedItem
    {
        get { return (object)GetValue(SelectedItemProperty); }
        set
        {
            SetValue(SelectedItemProperty, value);
            contentPresenter.Content = SelectedItem;
        }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        SelectedIndex--;
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        SelectedIndex++;
    }
}

ステップ 4 : メインページで、flipview Usercontrol を使用する名前空間を追加します。

例: xmlns:FlipViewControl="clr-namespace:ImageFlip" (注: ソリューション名によって異なります)。

ステップ 5 : 名前空間を使用して、flipview コントロールを次のように追加します。

  <Grid x:Name="LayoutRoot" Background="Transparent">
    <FlipViewControl:FlipView Name="imgViewer">
        <FlipViewControl:FlipView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" Stretch="Fill"/>
            </DataTemplate>
        </FlipViewControl:FlipView.ItemTemplate>
    </FlipViewControl:FlipView>
</Grid>

ステップ 6 : mainpage.cs に次のコードを追加します。

 // Constructor
    public MainPage()
    {
        InitializeComponent();

        // Sample code to localize the ApplicationBar
        //BuildLocalizedApplicationBar();
        imgViewer.ItemsSource = new List<string> { "/Images/1.jpg", "/Images/2.jpg", "/Images/3.jpg" };
    }

これが役立つことを願っています。

ありがとう

于 2014-06-11T09:53:38.903 に答える
1

Windows Phone の FlipView に直接相当するものはありません。パノラマ コントロールとピボット コントロールは機能が大きく異なり、目的も異なります。

Telerik には、写真アプリで使用されるネイティブ コントロールと非常によく似たSlideViewコントロールがあります。Nokia Premium Developer Program
の一部として Telerik コントロールを無料で入手することもできます。(デベロッパー センターのサブスクリプションを持っていない場合は、調査する価値があります。)

于 2013-07-15T17:13:41.003 に答える
0

私はそれが同じ解決策ではないことを知っていますが、このカバーフローの例をここで微調整することができます...画像が積み重ねられずに並べられるようにしますか?

于 2013-07-16T10:48:59.777 に答える