win10 UWP FlipView

最新推荐文章于 2025-09-19 09:18:18 发布

原创最新推荐文章于 2025-09-19 09:18:18 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#FlipView #UWP #C#

c# 同时被 3 个专栏收录

436 篇文章

订阅专栏

UWP

181 篇文章

订阅专栏

win10

128 篇文章

订阅专栏

本文展示了如何使用FlipView控件实现图片轮播效果，包括自动和手动控制方式。

FlipView

可以让用户逐个浏览的项目集合

        <FlipView Grid.Row="0" Height="100" Margin="10,10,10,10">
            <Image Source="Assets/QQ.png"/>
            <Image Source="Assets/搜狐.png"/>
            <Image Source="Assets/暴风影音.png"/>
            <Image Source="Assets/芒果.png"/>
            <Image Source="Assets/迅雷看看.png"/>
        </FlipView>

这里写图片描述

上下滚动

        <FlipView Grid.Row="0" Height="100" Margin="10,10,10,10">
            <Image Source="Assets/QQ.png"/>
            <Image Source="Assets/搜狐.png"/>
            <Image Source="Assets/暴风影音.png"/>
            <Image Source="Assets/芒果.png"/>
            <Image Source="Assets/迅雷看看.png"/>
            <FlipView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </FlipView.ItemsPanel>
        </FlipView>

自动

FlipView x:Name=”xf”

在MainPage.xaml.cs

             DispatcherTimer time = new DispatcherTimer();
            time.Interval = new TimeSpan(0,0,1);           
            time.Tick += Time_Tick;
            time.Start();

        private void Time_Tick(object sender , object e)
        {
            int i = xf.SelectedIndex;
            i++;
            if (i >= xf.Items.Count)
            {
                i = 0;
            }
            xf.SelectedIndex = i;
        }