WinRT FlipView 类似 WP8 中的控件答案

【问题标题】：WinRT FlipView like control in WP8WinRT FlipView 类似 WP8 中的控件
【发布时间】：2013-07-15 05:27:44
【问题描述】：

在我的应用程序中，我需要像在 Windows Phone 8 照片应用程序中一样显示一组图像，您可以在其中左右滑动图像。

我已经尝试过 Panorama 和 Pivot 控件，但是这两个控件的行为都不像 WinRTs FlipView。

全景图非常适合，但似乎将“右窥”量硬连线到控件中。（如有错误请指正）

在滑动过程中，Pivot 依次显示黑色（手指仍然向下），并且仅在您松开手指并且控件将下一个项目滚动到位时才显示下一个图像。

有什么建议吗？

【问题讨论】：

标签： windows-phone-8 windows-phone

【解决方案1】：

这是为 WP8 定制的 FlipView 控件，如 WINRT 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 步：现在在主页上，添加命名空间以使用翻转视图用户控件

示例： 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" };
    }

希望这会有所帮助。

谢谢

【讨论】：

【解决方案2】：

没有直接等效于 Windows Phone 中的 FlipView。 Panorama 和 Pivot 控件具有非常不同的功能，并且设计用于不同的目的。

Telerik 有一个 SlideView 控件，它与照片应用程序使用的本机控件非常相似。
作为Nokia Premium Developer Program 的一部分，您还可以免费获得 Telerik 控件。（如果您没有订阅开发中心，则值得调查。）

【讨论】：

检查了 RadSlideView。非常适合我的用例。与自己编写相比，99 美元是一种偷窃——当然，如果它是稳定的。
@OliverWeichhold 过去我在项目中使用它时非常好。

【解决方案3】：

我知道这不是同一个解决方案，但也许你可以调整这个coverflow example here... 以便图像不是堆叠而是并排？

【讨论】：