Question

我喜欢在水平滚动列表中显示来自ObservableCollection的图像，就像在Windows应用商店中一样，但我会像FlipView一样滚动它，所有图像都可见。我现在有类似的东西：

<FlipView x:Name="MasterListView" ItemsSource="{x:Bind PopularTVSeries}" 
            Grid.Row="1" Margin="10,10,10,0" Height="278">
    <FlipView.ItemTemplate>
        <DataTemplate x:DataType="data:PopularTVSeries">
            <Image Source="{x:Bind poster_path}" Width="185" Height="278"
                   HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

Answer 1

有控件可以做到。

方法1：

使用UWPCommunityToolkit的Carousel XAML Control。安装Microsoft.Toolkit.Uwp.UI.Controls nuget包以使用它。

这是语法

<controls:Carousel x:Name="CarouselControl" InvertPositive="0"
                    ItemDepth="0" ItemMargin="0"
                    ItemRotationX="0" ItemRotationY="0"
                    ItemRotationZ="0" Orientation="Horizontal">
    <controls:Carousel.ItemTemplate>
        <DataTemplate>
            <Image/>
        </DataTemplate>
    </controls:Carousel.ItemTemplate>
</controls:Carousel>

欲了解更多信息，请下载UWP Community Toolkit Sample App

方法2：

AppStudio使用Carousel Control。安装WindowsAppStudio.Uwp nuget包以使用它。

这是语法

<controls:Carousel MaxItems="5" MinHeight="240" 
                   MaxHeight="480" GradientOpacity="0.3">
    <controls:Carousel.ItemTemplate>
        <DataTemplate>
            <Image/>
        </DataTemplate>
    </controls:Carousel.ItemTemplate>
</controls:Carousel>

欲了解更多信息，请下载Windows App Studio Sample App

方法3：

使用GridView

<GridView ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollMode="Enabled">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Image/>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

Answer 2

最终工作代码：

<controls:Carousel 
            ItemsSource="{x:Bind popularTVSeries}"
            x:Name="MasterListView"
            InvertPositive="True"
            ItemDepth="153"
            ItemMargin="0"
            ItemRotationX="0"
            ItemRotationY="29"
            ItemRotationZ ="0"
            Orientation="Horizontal"
            SelectedIndex="3"
            Grid.Row="1">

            <controls:Carousel.EasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </controls:Carousel.EasingFunction>

            <controls:Carousel.ItemTemplate>
                <DataTemplate x:DataType="data:PopularTVSeries">
                    <Image
                        Width="185"
                        Height="278"
                        VerticalAlignment="Bottom"
                        Source="{x:Bind poster_path}"
                        Stretch="Uniform" />
                </DataTemplate>
            </controls:Carousel.ItemTemplate>

        </controls:Carousel>

来自ObservableCollection的水平图像列表

2 个答案:

方法1：

方法2：

方法3：