Let's talk about the implementation of the association effect between images on the top of the UWP homepage of damai.com.

Let's talk about the implementation of the association effect between images on the top of the UWP homepage of damai.com.

With the release of Windows 10, more and more vendors in China have launched their own general application clients, such as QQ, Weibo, and barley. To be honest, they are really well designed and fit the design style and product concept of Windows 10. for developers, when we find a good UI design style, we can't help but want to write similar effects on our own. When I visited Microsoft's developer community a few days ago, I saw someone asking damai.com how to implement the UWP homepage. So I installed it with curiosity and wanted to see what the effect was. As follows:

Do you have a feeling of being tall? (Of course, I am also a little white man !!!! Do not spray !!).. Anyway, I felt pretty good, so "it's my fault !!!" To implement it. Remember: all the major roads go to Rome. For Development, everyone can have their own solutions. It is correct to meet the requirements !!! I will share my own design plan for new users to learn from.

 

First, you can use three FlipView controls for image display. If you look at them carefully, you will find that the layout on both sides of the left and right has a gradient similar to the black color, all flipviews on the left and right sides can be placed in two grids respectively, and then the background color in the Grid is filled with a black gradient color. The specific XAML code is as follows:

 

1 <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 2 <Grid Height = "260" VerticalAlignment = "Top"> 3 <Grid. columnDefinitions> 4 <ColumnDefinition Width = "*"/> 5 <ColumnDefinition Width = "790"/> 6 <ColumnDefinition Width = "*"/> 7 </Grid. columnDefinitions> 8 <! -- Left --> 9 <Grid. column = "0"> 10 <Grid. background> 11 <LinearGradientBrush StartPoint = "0, 0.5" EndPoint = "1, 0.5 "> 12 <GradientStopCollection> 13 <GradientStop Offset =" 0.8 "Color =" Black "/> 14 <GradientStop Offset =" 1 "Color =" Gray "/> 15 </ gradientStopCollection> 16 </LinearGradientBrush> 17 </Grid. background> 18 <FlipView x: Name = "fvLeft" Opacity = "0.5" IsEnabled = "False"> 19 <FlipView. itemTemplate> 20 <DataTemplat E> 21 <Image Source = "{Binding}" Stretch = "None"/> 22 </DataTemplate> 23 </FlipView. itemTemplate> 24 </FlipView> 25 </Grid> 26 27 <! -- Medium --> 28 <FlipView x: Name = "fvCenter" Grid. column = "1"> 29 <FlipView. itemTemplate> 30 <DataTemplate> 31 <Image Source = "{Binding}" Stretch = "None"/> 32 </DataTemplate> 33 </FlipView. itemTemplate> 34 </FlipView> 35 36 <! -- Right --> 37 <Grid. column = "2"> 38 <Grid. background> 39 <LinearGradientBrush StartPoint = "1, 0.5" EndPoint = "0, 0.5 "> 40 <GradientStopCollection> 41 <GradientStop Offset =" 0.8 "Color =" Black "/> 42 <GradientStop Offset =" 1 "Color =" Gray "/> 43 </ gradientStopCollection> 44 </LinearGradientBrush> 45 </Grid. background> 46 <FlipView x: Name = "fvRight" Opacity = "0.3" IsEnabled = "False"> 47 <FlipView. itemTemplate> 48 <DataTemplate> 49 <Image Source = "{Binding}" Stretch = "None"/> 50 </DataTemplate> 51 </FlipView. itemTemplate> 52 </FlipView> 53 </Grid> 54 55 </Grid> 56 57 </Grid>

 

Secondly, we need to add image data to the page in the corresponding background code. You can add image data to the page constructor, or add image data to the page Loaded event, it depends on your requirements. I will add them to the page constructor here. In addition, you need to ensure that the images in these three regions are not the same, so that we can use the SelectedIndex attribute corresponding to FlipView for setting, you can write the code as follows:

 1         public MainPage() 2         { 3             this.InitializeComponent(); 4             this.fvLeft.ItemsSource = this.fvCenter.ItemsSource = this.fvRight.ItemsSource = new ObservableCollection<BitmapImage>() 5             { 6                 new BitmapImage(new System.Uri("ms-appx:///Images/00.png",System.UriKind.RelativeOrAbsolute)), 7                 new BitmapImage(new System.Uri("ms-appx:///Images/01.png",System.UriKind.RelativeOrAbsolute)), 8                 new BitmapImage(new System.Uri("ms-appx:///Images/02.png",System.UriKind.RelativeOrAbsolute)) 9             };10             this.fvCenter.SelectedIndex = 0;11             this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - 1;12             this.fvRight.SelectedIndex = this.fvCenter.SelectedIndex + 1;13         }

So far, we can successfully display images on the interface, but this is static. We need to make it flip every other time (I set it to 3 seconds, you can) show the next image, so we need to use a timer to play the image at regular intervals. The sample code is as follows:

 1         protected override void OnNavigatedTo(NavigationEventArgs e) 2         { 3             DispatcherTimer timer = new DispatcherTimer(); 4             timer.Interval = new System.TimeSpan(0, 0, 3); 5             timer.Tick += (sender, args) => 6             { 7                 this.fvCenter.SelectedIndex = this.fvCenter.SelectedIndex < this.fvCenter.Items.Count - 1 ? ++this.fvCenter.SelectedIndex : 0; 8             }; 9             timer.Start();10         }

After the code is written, you may be excited to run your program to see the effect, but you will find a very embarrassing thing: we require the three images to always be different, however, when we manually change the selected FlipView item in the middle, there will always be images that show the same, which is not the desired effect. So we need to solve it. you can solve it in many ways. Here I use the SelectionChanged event corresponding to FlipView in the middle area to monitor whether the three images are the same. If they are the same, I asked FlipView on the left to select from FlipView in the middle area-1; FlipView on the right side to select from FlipView in the middle area + 1; and artificially change the images on both sides of the left and right. I handle it like this:

 1         private void fvCenter_SelectionChanged(object sender, SelectionChangedEventArgs e) 2         { 3             if (this.fvCenter.SelectedIndex == 0) 4             { 5                 this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - 1; 6                 this.fvRight.SelectedIndex = 1; 7             } 8             else if (this.fvCenter.SelectedIndex == 1) 9             {10                 this.fvLeft.SelectedIndex = 0;11                 this.fvRight.SelectedIndex = this.fvRight.Items.Count - 1;12             }13             else if (this.fvCenter.SelectedIndex == this.fvCenter.Items.Count - 1)14             {15                 this.fvLeft.SelectedIndex = this.fvLeft.Items.Count - 2;16                 this.fvRight.SelectedIndex = 0;17             }18             else if ((this.fvCenter.SelectedIndex < (this.fvCenter.Items.Count - 1)) && this.fvCenter.SelectedIndex > -1)19             {20                 this.fvLeft.SelectedIndex = this.fvCenter.SelectedIndex - 1;21                 this.fvRight.SelectedIndex = this.fvCenter.SelectedIndex + 1;22             }23             else24             {25                 return;26             }27             Debug.Write(this.fvLeft.SelectedIndex);28         }

Write this, and run your program again to see if the effect is similar to that shown on the top of the homepage of barley UWP. hope so !!!!

Sample Code: Hurry up !!!