天天看點

[c#][Windows Phone | Windows]FlipView循環滾動,圖檔輪播

想把FlipView内填充的圖檔能夠自動的滾動播放 <FlipView.ItemTemplate>

<DataTemplate> 這裡填充資料的綁定,但是綁定不可能是無限的啊,于是采取一些方法去做。

例子,分别有3張圖檔,紅黃藍3種顔色,黑色邊框為目前資料綁定的範圍。

[c#][Windows Phone | Windows]FlipView循環滾動,圖檔輪播

現在有一個思路,擷取到現在滾動播放圖檔的索引序号,序号範圍應該是012,那麼隻要讓012這幾個數字重複就行,那麼我們将示意圖改一下

[c#][Windows Phone | Windows]FlipView循環滾動,圖檔輪播

初始為1,然後設定定時器,不斷+1,當遇到最後一張,既4時,将圖檔顯示改為1,由于是同一張圖檔,是以看不出有什麼變化,是以繼續往後面放圖檔即可。左滑同理。

先上xaml

<FlipView Name="dataFlipView" Height="200" VerticalAlignment="Top" SelectionChanged="dataFlipView_SelectionChanged" >
	<FlipView.ItemTemplate>
		<DataTemplate>
			<Grid Name="FlipViewItemGrid" Tapped="FlipViewItemGrid_Tapped">
				<Image x:Name="BannerImage" Source="{Binding Src}" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center"/>
			</Grid>
		</DataTemplate>
	</FlipView.ItemTemplate>
</FlipView>
           

.cs: 先定義一個定時器

DispatcherTimer _timer = new DispatcherTimer();//定義一個定時器
           

構造函數裡添加切換的時間,并綁定事件

_timer.Interval = TimeSpan.FromSeconds(7.0);
_timer.Tick += ChangeImage;
           

ChangeImage:

private void ChangeImage(object sender, object e)
{
	try
	{
		dataFlipView.SelectionChanged -= dataFlipView_SelectionChanged;
		if (dataFlipView.Items != null && dataFlipView.Items.Count > 1 && dataFlipView.SelectedIndex < dataFlipView.Items.Count - 1)
                {

                    dataFlipView.SelectedIndex++;
                }
                else
                {
                    dataFlipView.SelectedIndex = 1;
                }
                Debug.WriteLine(dataFlipView.SelectedIndex);
                dataFlipView.SelectionChanged += dataFlipView_SelectionChanged;
            }
	catch (Exception)
        {
        	Debug.WriteLine("首頁,圖檔切換異常");
        }
}
           

繼續閱讀