Sharing barley UWP version development history-01. Responsive carousel top focus diagram, uwp-01

Sharing barley UWP version development history-01. Responsive carousel top focus diagram, uwp-01

Saying that one day, near work unintentional work, read a variety of articles on the internet, read a piece of "talking about damai.uwp version of the home page of the top picture linkage effect implementation method" (Pass: http://www.cnblogs.com/hippieZhou/p/4755290.html ), I was interested when I saw other people comment on my own products. After reading this article, hippieZhou kids shoes basically talked about the principle and essence of this automatic carousel control. I am here, follow the articles from Zhou and share more details.

What we want to share with you today is the work of this simple control in the responsive layout. I have used the XAML triggers provided by Microsoft and listened to the Size_Changed event through the soil method. I feel that it takes more time and effort to process this responsive layout than to implement the background logic. To sum up, both methods can achieve the final effect. The trigger is used. In XAML, the code is less and the control status is directly operated. However, this control involves too many things in the scaling process and requires some complex calculations. In the end, the control uses the traditional Size_Changed event to control the interface in the background.

The rotation control of barley UWP is used to display focus ads as clearly as possible on a large screen (I later set the width of the tube to 768. When the screen is medium (the width is less than 768 and greater than 480), with the changes in the form, ensure that the content of the center focus ad is displayed, and the display ratio remains unchanged, compress or expand the carousel ads on both sides. When the screen width is smaller than 480 on a small screen, the carousel images on both sides are hidden, and the central carousel image is scaled according to the original proportion of the Image Based on the current form width. The effect is shown as follows.

Looking at the code front-end code is actually very simple, that is, Zhou said, a total of three filpviews, as well as the gradient of coverage on both sides. Note that the Stretch is None because you need to manually control the scaling of the image.

<UserControl x: Class = "Damai. Windows10.App. AutoRollBannerView" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Damai. Windows10.App "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Mc: Ignorable =" d "d: DesignHeight =" 360 "d: DesignWidth =" 1200 "> <RelativePanel x: name = "layoutRoot" SizeChanged = "layoutRoot_SizeChanged"> <Grid x: Name = "gridLeftImage" Width = "1"> <FlipView x: name = "flipPre" BorderThickness = "0" ItemsSource = "{Binding}"> <FlipView. itemTemplate> <DataTemplate> <Image Source = "{Binding Path = Pic}" HorizontalAlignment = "Left" VerticalAlignment = "Top" Stretch = "None"/> </DataTempla Te> </FlipView. itemTemplate> </FlipView> <Rectangle. fill> <LinearGradientBrush StartPoint = "0, 0.5" EndPoint = "1, 0.5 "> <GradientStop Color =" Black "Offset =" 0 "/> <GradientStop Color =" #99000000 "Offset =" 1 "/> </LinearGradientBrush> </Rectangle. fill> </Rectangle> </Grid> <Grid x: Name = "gridCenterImage" RelativePanel. rightOf = "gridLeftImage"> <FlipView x: Name = "flipCenter" BorderThickness = "0" Item SSource = "{Binding}" SelectionChanged = "flipCenter_SelectionChanged"> <FlipView. itemTemplate> <DataTemplate> <Image Source = "{Binding Path = Pic}" ImageOpened = "ImageCenter_ImageOpened" ImageFailed = "ImageCenter_ImageFailed" leading = "Left" verticalignment = "Top" Tapped =" image_Tapped "/> </DataTemplate> </FlipView. itemTemplate> </FlipView> <! -- Navigation --> <StackPanel x: Name = "stackPanelIndex" Orientation = "Horizontal" verticalignment = "Bottom" HorizontalAlignment = "Right" Margin = "0, 14,14 "/> <Grid x: Name =" gridNoData "Background =" # D2D2D2 "verticalignment =" Stretch "HorizontalAlignment =" Stretch "> <Image x: name = "ImageNoData" Source = "/Assets/Images/Search/pic_Search_NoData.png" Width = "100" Visibility = "Visible" verticalignment = "Center" HorizontalAlignment = "Center"/> </Grid> <Grid x: name = "gridRightImage" RelativePanel. rightOf = "gridCenterImage"> <FlipView x: Name = "flipNext" BorderThickness = "0" ItemsSource = "{Binding}" IsEnabled = "False"> <FlipView. itemTemplate> <DataTemplate> <Grid> <Image Source = "{Binding Path = Pic}" HorizontalAlignment = "Left" VerticalAlignment = "Top" Stretch = "None"/> <Rectangle> <Rectangle. fill> <LinearGradientBrush StartPoint = "0, 0.5" EndPoint = "1, 0.5 "> <GradientStop Color =" # FF000000 "Offset =" 1 "/> <GradientStop Color =" #99000000 "/> </LinearGradientBrush> </Rectangle. fill> </Rectangle> </Grid> </DataTemplate> </FlipView. itemTemplate> </FlipView> </Grid> </RelativePanel> </UserControl>

For background code, how to regularly scroll, and so on, please refer to the previous articles by Zhou. Here we will not repeat them here. The only thing we do is to create a private method. When SizeChanged the control, in addition, it was called once during initialization.

 private void Refresh(double width)        {            if (this.DataSource == null || _init == false)            {                flipCenter.Width = width;                return;            }            if (width <= _imageWidth)            {                flipCenter.Height = this.ActualWidth / _scale;            }            else            {                flipCenter.Height = _imageWidth / _scale;            }            double leftWidth = width >= _imageWidth ? (double)(width - _imageWidth) / 2.0 : 0;            gridLeftImage.Width = leftWidth;            gridLeftImage.Height = flipCenter.Height;            gridRightImage.Width = leftWidth;            gridRightImage.Height = flipCenter.Height;        }

In this way, the rotation focus graph on the top of the barley UWP client is basically complete.

In the future, I will try my best to record the problems and solutions I encountered during the development process, share them with you, and try not to dig holes. Thank you.