src/Tizen.NUI.Wearable/src/public/CircularPagination.cs

   1 /*
   2  * Copyright(c) 2021 Samsung Electronics Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  *
  16  */
  17 using System;
  18 using System.Collections.Generic;
  19 using System.ComponentModel;
  20 using Tizen.NUI.BaseComponents;
  21 using Tizen.NUI.Components;
  22
  23 namespace Tizen.NUI.Wearable
  24 {
  25     /// <summary>
  26     /// CircularPagination shows the number of pages available and the currently active page.
  27     /// Especially, CircularPagination provides indicators specific to wearable device.
  28     /// </summary>
  29     /// <since_tizen> 8 </since_tizen>
  30     [Obsolete("This has been deprecated in API12")]
  31     [EditorBrowsable(EditorBrowsableState.Never)]
  32     public class CircularPagination : Control
  33     {
  34         private CircularPaginationStyle circularPaginationStyle;
  35
  36         private VisualView container;
  37
  38         private List<ImageVisual> indicatorList = new List<ImageVisual>();
  39
  40         private bool isSymmetrical = true;
  41         private int middleIndex = 9;
  42         private int indicatorCount = 0;
  43         private int leftIndicatorCount = 0;
  44         private int rightIndicatorCount = 0;
  45         private int selectedIndex = -1;
  46         private bool isCenterImageSet = false; // When CenterIndicatorImageURL is set, this variable becomes true.
  47         private bool isCurrentIndicatorCentered = false; // When the current indicator is the center one, this variable becomes true.
  48         private bool isOddNumber = true;
  49         private bool uninitializedLeftIndicator = true; // Need it when the indicators are asymmetry and the right indicator count is set earlier than left one.
  50
  51         Position2D[] oddArray = new Position2D[] { new Position2D(36, 74), new Position2D(47, 60), new Position2D(60, 47), new Position2D(74, 36),
  52                                                    new Position2D(89, 26), new Position2D(105, 18), new Position2D(122, 11), new Position2D(139, 7),
  53                                                    new Position2D(157, 4), new Position2D(175, 3), new Position2D(193, 4), new Position2D(211, 7),
  54                                                    new Position2D(228, 11), new Position2D(245, 18), new Position2D(261, 26), new Position2D(276, 36),
  55                                                    new Position2D(290, 47), new Position2D(303, 60), new Position2D(314, 73) };
  56
  57         Position2D[] evenArray = new Position2D[] { new Position2D(41, 67), new Position2D(53, 53), new Position2D(67, 41), new Position2D(81, 31),
  58                                                    new Position2D(97, 22), new Position2D(113, 14), new Position2D(131, 9), new Position2D(148, 5),
  59                                                    new Position2D(166, 3), new Position2D(184, 3), new Position2D(202, 5), new Position2D(220, 9),
  60                                                    new Position2D(237, 14), new Position2D(253, 22), new Position2D(269, 31), new Position2D(283, 41),
  61                                                    new Position2D(297, 53), new Position2D(309, 67) };
  62
  63         static CircularPagination()
  64         {
  65             ThemeManager.AddPackageTheme(DefaultThemeCreator.Instance);
  66         }
  67
  68         /// <summary>
  69         /// Creates a new instance of a CircularPagination.
  70         /// </summary>
  71         /// <since_tizen> 8 </since_tizen>
  72         [Obsolete("This has been deprecated in API12")]
  73         [EditorBrowsable(EditorBrowsableState.Never)]
  74         public CircularPagination() : base()
  75         {
  76             Initialize();
  77         }
  78
  79         /// <summary>
  80         /// Creates a new instance of a CircularPagination using style.
  81         /// </summary>
  82         /// <since_tizen> 8 </since_tizen>
  83         [Obsolete("This has been deprecated in API12")]
  84         [EditorBrowsable(EditorBrowsableState.Never)]
  85         public CircularPagination(CircularPaginationStyle style) : base(style)
  86         {
  87             Initialize();
  88         }
  89
  90         /// <summary>
  91         /// Gets or sets the size of the indicator.
  92         /// </summary>
  93         /// <since_tizen> 8 </since_tizen>
  94         [Obsolete("This has been deprecated in API12")]
  95         [EditorBrowsable(EditorBrowsableState.Never)]
  96         public Size IndicatorSize
  97         {
  98             get
  99             {
 100                 return circularPaginationStyle?.IndicatorSize;
 101             }
 102             set
 103             {
 104                 if (value == null || circularPaginationStyle == null)
 105                 {
 106                     return;
 107                 }
 108                 circularPaginationStyle.IndicatorSize = value;
 109                 UpdateVisual();
 110             }
 111         }
 112
 113         /// <summary>
 114         /// Gets or sets the background resource of indicator.
 115         /// </summary>
 116         /// <since_tizen> 8 </since_tizen>
 117         [Obsolete("This has been deprecated in API12")]
 118         [EditorBrowsable(EditorBrowsableState.Never)]
 119         public Selector<string> IndicatorImageURL
 120         {
 121             get
 122             {
 123                 return circularPaginationStyle?.IndicatorImageURL;
 124             }
 125             set
 126             {
 127                 if (value == null || circularPaginationStyle == null)
 128                 {
 129                     return;
 130                 }
 131                 circularPaginationStyle.IndicatorImageURL = value;
 132                 UpdateVisual();
 133             }
 134         }
 135
 136         /// <summary>
 137         /// Gets or sets the background resource of the center indicator.
 138         /// </summary>
 139         /// <since_tizen> 8 </since_tizen>
 140         [Obsolete("This has been deprecated in API12")]
 141         [EditorBrowsable(EditorBrowsableState.Never)]
 142         public Selector<string> CenterIndicatorImageURL
 143         {
 144             get
 145             {
 146                 if (isCenterImageSet)
 147                 {
 148                     return circularPaginationStyle?.CenterIndicatorImageURL;
 149                 }
 150                 else
 151                 {
 152                     Log.Info("NUI", "CenterIndicatorImageURL is not set yet. \n");
 153                     return "";
 154                 }
 155
 156             }
 157             set
 158             {
 159                 if (value == null || circularPaginationStyle == null)
 160                 {
 161                     return;
 162                 }
 163                 circularPaginationStyle.CenterIndicatorImageURL = value;
 164                 isCenterImageSet = true;
 165                 UpdateVisual();
 166             }
 167         }
 168
 169         /// <summary>
 170         /// Checks whether the indicators are symmetrical or not.
 171         ///
 172         /// The default value is true.
 173         /// If the value is true, the user just can set IndicatorCount.
 174         /// If false, the user should set both the number of Left Indicators and the number of Right Indicators.
 175         /// Please refer to LeftIndicatorCount and RightIndicatorCount.
 176         /// </summary>
 177         /// <since_tizen> 8 </since_tizen>
 178         [Obsolete("This has been deprecated in API12")]
 179         [EditorBrowsable(EditorBrowsableState.Never)]
 180         public bool IsSymmetrical
 181         {
 182             get
 183             {
 184                 return isSymmetrical;
 185             }
 186             set
 187             {
 188                 if (isSymmetrical == value)
 189                 {
 190                     return;
 191                 }
 192                 if (value == false)
 193                 {
 194                     isOddNumber = true;
 195                     CreateIndicator(middleIndex);
 196                 }
 197
 198                 isSymmetrical = value;
 199                 UpdateContainer();
 200                 UpdateVisual();
 201             }
 202         }
 203
 204         /// <summary>
 205         /// Gets or sets the number of the pages/indicators.
 206         ///
 207         /// This value is for symmetrical indicators.
 208         /// </summary>
 209         /// <since_tizen> 8 </since_tizen>
 210         [Obsolete("This has been deprecated in API12")]
 211         [EditorBrowsable(EditorBrowsableState.Never)]
 212         public int IndicatorCount
 213         {
 214             get
 215             {
 216                 return indicatorCount;
 217             }
 218             set
 219             {
 220                 if (indicatorCount == value || indicatorCount < 0 || value <= 0)
 221                 {
 222                     return;
 223                 }
 224                 if (isSymmetrical == false)
 225                 {
 226                     Log.Info("NUI", "This property is not for asymmetric pagination. Change to symmetrical pagination.\n");
 227                     isSymmetrical = true;
 228                 }
 229
 230                 if (value % 2 == 1) // Odd number
 231                 {
 232                     isOddNumber = true;
 233                 }
 234                 else // Even number
 235                 {
 236                     isOddNumber = false;
 237                 }
 238
 239                 if (indicatorCount < value)
 240                 {
 241                     int arrayIndex = 0;
 242                     if (isOddNumber)
 243                     {
 244                         arrayIndex = (19 - value) / 2;
 245                     }
 246                     else
 247                     {
 248                         arrayIndex = (18 - value) / 2;
 249                     }
 250                     if (arrayIndex < 0) return;
 251
 252                     for (int i = (indicatorCount + 1); i <= value; i++)
 253                     {
 254                         CreateIndicator(arrayIndex);
 255                         arrayIndex++;
 256                     }
 257
 258                     // If selectedIndex is not set yet, the default value is middle index.
 259                     if (selectedIndex == -1)
 260                     {
 261                         selectedIndex = value / 2;
 262                         SelectIn(indicatorList[selectedIndex]);
 263                     }
 264                 }
 265                 else
 266                 {
 267                     for (int i = value; i < indicatorCount; i++)
 268                     {
 269                         ImageVisual indicator = indicatorList[i];
 270                         container.RemoveVisual("Indicator" + i);
 271                     }
 272                     indicatorList.RemoveRange(value, indicatorCount - value);
 273
 274                     if (selectedIndex >= value)
 275                     {
 276                         selectedIndex = value - 1;
 277                         SelectIn(indicatorList[selectedIndex]);
 278                     }
 279                 }
 280                 indicatorCount = value;
 281
 282                 UpdateContainer();
 283                 UpdateVisual();
 284             }
 285         }
 286
 287         /// <summary>
 288         /// Gets or sets the number of the left pages/indicators.
 289         ///
 290         /// This value can be set when IsSymmetrical API is false.
 291         /// </summary>
 292         /// <since_tizen> 8 </since_tizen>
 293         [Obsolete("This has been deprecated in API12")]
 294         [EditorBrowsable(EditorBrowsableState.Never)]
 295         public int LeftIndicatorCount
 296         {
 297             get
 298             {
 299                 return leftIndicatorCount;
 300             }
 301             set
 302             {
 303                 if (isSymmetrical == true)
 304                 {
 305                     Log.Info("NUI", "This variable is not for symmetric pagination. \n");
 306                     isSymmetrical = false;
 307                     //return;
 308                 }
 309                 if (leftIndicatorCount == value || leftIndicatorCount < 0 || value > 9 || value < 0)
 310                 {
 311                     return;
 312                 }
 313
 314                 isOddNumber = true;
 315
 316                 if (leftIndicatorCount < value)
 317                 {
 318                     for (int i = (middleIndex - value); i < (middleIndex - leftIndicatorCount); i++)
 319                     {
 320                         CreateIndicator(i);
 321                         selectedIndex++;
 322                     }
 323                 }
 324                 else
 325                 {
 326                     for (int i = 0; i < (leftIndicatorCount - value); i++)
 327                     {
 328                         ImageVisual indicator = indicatorList[i];
 329                         container.RemoveVisual("Indicator" + i);
 330                     }
 331                     indicatorList.RemoveRange(0, (leftIndicatorCount - value)); // LeftIndicator starts from index 0.
 332
 333                     if (selectedIndex == 0)
 334                     {
 335                         selectedIndex++;
 336                         SelectIn(indicatorList[selectedIndex]);
 337                     }
 338                     else
 339                     {
 340                         selectedIndex--;
 341                         SelectIn(indicatorList[selectedIndex]);
 342                     }
 343                 }
 344                 leftIndicatorCount = value;
 345                 indicatorCount = leftIndicatorCount + rightIndicatorCount + 1;
 346
 347                 // When RightIndicatorCount is set before, then selectedIndex should be updated using the current LeftIndicatorCount.
 348                 if (uninitializedLeftIndicator && selectedIndex == 0)
 349                 {
 350                     selectedIndex = leftIndicatorCount;
 351                 }
 352                 uninitializedLeftIndicator = false;
 353
 354                 UpdateContainer();
 355                 UpdateAsymmetry();
 356             }
 357         }
 358
 359         /// <summary>
 360         /// Gets or sets the number of the right pages/indicators.
 361         ///
 362         /// This value can be set when IsSymmetrical API is false.
 363         /// </summary>
 364         /// <since_tizen> 8 </since_tizen>
 365         [Obsolete("This has been deprecated in API12")]
 366         [EditorBrowsable(EditorBrowsableState.Never)]
 367         public int RightIndicatorCount
 368         {
 369             get
 370             {
 371                 return rightIndicatorCount;
 372             }
 373             set
 374             {
 375                 if (isSymmetrical == true)
 376                 {
 377                     Log.Info("NUI", "This variable is not for symmetric pagination. \n");
 378                     isSymmetrical = false;
 379                     //return;
 380                 }
 381                 if (rightIndicatorCount == value || rightIndicatorCount < 0 || value > 9 || value < 0)
 382                 {
 383                     return;
 384                 }
 385
 386                 isOddNumber = true;
 387
 388                 if (rightIndicatorCount < value)
 389                 {
 390                     for (int i = (middleIndex + rightIndicatorCount + 1); i <= (middleIndex + value); i++)
 391                     {
 392                         CreateIndicator(i);
 393                     }
 394                 }
 395                 else
 396                 {
 397                     for (int i = (leftIndicatorCount + value + 1); i < (leftIndicatorCount + rightIndicatorCount); i++)
 398                     {
 399                         ImageVisual indicator = indicatorList[i];
 400                         container.RemoveVisual("Indicator" + i);
 401                     }
 402                     indicatorList.RemoveRange((leftIndicatorCount + value), (rightIndicatorCount - value));
 403
 404                     if (selectedIndex >= (leftIndicatorCount + rightIndicatorCount))
 405                     {
 406                         selectedIndex--;
 407                         SelectIn(indicatorList[selectedIndex]);
 408                     }
 409                 }
 410                 rightIndicatorCount = value;
 411                 indicatorCount = leftIndicatorCount + rightIndicatorCount + 1;
 412
 413                 UpdateContainer();
 414                 UpdateAsymmetry();
 415             }
 416         }
 417
 418         /// <summary>
 419         /// Gets or sets the index of the select indicator.
 420         ///
 421         /// If no value is set, the default value is the center indicator.
 422         /// </summary>
 423         /// <since_tizen> 8 </since_tizen>
 424         [Obsolete("This has been deprecated in API12")]
 425         [EditorBrowsable(EditorBrowsableState.Never)]
 426         public int SelectedIndex
 427         {
 428             get
 429             {
 430                 return selectedIndex;
 431             }
 432             set
 433             {
 434                 if (selectedIndex == value || value < 0 || value >= indicatorCount)
 435                 {
 436                     return;
 437                 }
 438
 439                 // TODO : Here it needs to add virtual function for Animation.
 440
 441                 if (selectedIndex >= 0)
 442                 {
 443                     if ((isSymmetrical && selectedIndex < indicatorCount) ||
 444                          (!isSymmetrical && selectedIndex <= (middleIndex + rightIndicatorCount)))
 445                     {
 446                         CheckCenterIndicator(selectedIndex);
 447                         SelectOut(indicatorList[selectedIndex]);
 448                     }
 449                 }
 450                 selectedIndex = value;
 451                 if (selectedIndex >= 0)
 452                 {
 453                     if ((isSymmetrical && selectedIndex < indicatorCount) ||
 454                          (!isSymmetrical && selectedIndex <= (middleIndex + rightIndicatorCount)))
 455                     {
 456                         CheckCenterIndicator(selectedIndex);
 457                         SelectIn(indicatorList[selectedIndex]);
 458                     }
 459                 }
 460             }
 461         }
 462
 463         /// <summary>
 464         /// Retrieves the position of a indicator by index.
 465         /// </summary>
 466         /// <param name="index">Indicator index</param>
 467         /// <returns>The position of a indicator by index</returns>
 468         /// <since_tizen> 8 </since_tizen>
 469         [Obsolete("This has been deprecated in API12")]
 470         [EditorBrowsable(EditorBrowsableState.Never)]
 471         public Position GetIndicatorPosition(int index)
 472         {
 473             if (index < 0 || index >= indicatorList.Count)
 474             {
 475                 return null;
 476             }
 477             return new Position(indicatorList[index].Position.X, indicatorList[index].Position.Y);
 478         }
 479
 480         /// <summary>
 481         /// Sets the position of a indicator by index.
 482         /// </summary>
 483         /// <param name="index">Indicator index</param>
 484         /// <param name="position">The position of a indicator by index</param>
 485         /// <exception cref="ArgumentNullException">This exception can occur by the position is null.</exception>
 486         /// <since_tizen> 8 </since_tizen>
 487         [Obsolete("This has been deprecated in API12")]
 488         [EditorBrowsable(EditorBrowsableState.Never)]
 489         public virtual void SetIndicatorPosition(int index, Position position)
 490         {
 491             if (position == null)
 492             {
 493                 throw new ArgumentNullException(nameof(position));
 494             }
 495             // Update odd / even Array and List by each converted index.
 496             if (isOddNumber)
 497             {
 498                 if (isSymmetrical)
 499                 {
 500                     oddArray[(middleIndex - (indicatorCount / 2) + index)] = position;
 501                 }
 502                 else // IsSymmetrical is false and it means the number of left indicators is different from that of right ones.
 503                 {
 504                     oddArray[(middleIndex - leftIndicatorCount) + index] = position;
 505                 }
 506                 indicatorList[index].Position = new Vector2(position.X, position.Y);
 507             }
 508             else // Only symmetry circular pagination can be even number.
 509             {
 510                 evenArray[(middleIndex - (indicatorCount / 2) + index)] = position;
 511                 indicatorList[index].Position = new Vector2(position.X, position.Y);
 512             }
 513             UpdateVisual();
 514         }
 515
 516         /// <summary>
 517         /// You can override it to do your select out operation.
 518         /// </summary>
 519         /// <param name="selectOutIndicator">The indicator will be selected out</param>
 520         /// <since_tizen> 8 </since_tizen>
 521         [Obsolete("This has been deprecated in API12")]
 522         [EditorBrowsable(EditorBrowsableState.Never)]
 523         protected virtual void SelectOut(VisualMap selectOutIndicator)
 524         {
 525             if (!(selectOutIndicator is ImageVisual visual)) return;
 526             if (isCurrentIndicatorCentered)
 527             {
 528                 visual.URL = circularPaginationStyle?.CenterIndicatorImageURL?.Normal;
 529             }
 530             else
 531             {
 532                 visual.URL = circularPaginationStyle?.IndicatorImageURL?.Normal;
 533             }
 534             visual.Opacity = 0.5f;
 535         }
 536
 537         /// <summary>
 538         /// You can override it to do your select in operation.
 539         /// </summary>
 540         /// <param name="selectInIndicator">The indicator will be selected in</param>
 541         /// <since_tizen> 8 </since_tizen>
 542         [Obsolete("This has been deprecated in API12")]
 543         [EditorBrowsable(EditorBrowsableState.Never)]
 544         protected virtual void SelectIn(VisualMap selectInIndicator)
 545         {
 546             if (!(selectInIndicator is ImageVisual visual)) return;
 547             if (isCurrentIndicatorCentered)
 548             {
 549                 visual.URL = circularPaginationStyle?.CenterIndicatorImageURL?.Selected;
 550             }
 551             else
 552             {
 553                 visual.URL = circularPaginationStyle?.IndicatorImageURL?.Selected;
 554             }
 555             visual.Opacity = 1.0f;
 556         }
 557
 558         /// <summary>
 559         /// you can override it to create your own default style.
 560         /// </summary>
 561         /// <since_tizen> 8 </since_tizen>
 562         [Obsolete("This has been deprecated in API12")]
 563         [EditorBrowsable(EditorBrowsableState.Never)]
 564         protected override ViewStyle CreateViewStyle()
 565         {
 566             return new CircularPaginationStyle();
 567         }
 568
 569         /// <summary>
 570         /// you can override it to clean-up your own resources.
 571         /// </summary>
 572         /// <param name="type">DisposeTypes</param>
 573         /// <since_tizen> 8 </since_tizen>
 574         [Obsolete("This has been deprecated in API12")]
 575         [EditorBrowsable(EditorBrowsableState.Never)]
 576         protected override void Dispose(DisposeTypes type)
 577         {
 578             if (disposed)
 579             {
 580                 return;
 581             }
 582
 583             if (type == DisposeTypes.Explicit)
 584             {
 585                 container.RemoveAll();
 586                 indicatorList.Clear();
 587
 588                 this.Remove(container);
 589                 container.Dispose();
 590                 container = null;
 591             }
 592
 593             base.Dispose(type);
 594         }
 595
 596         private void Initialize()
 597         {
 598             circularPaginationStyle = ViewStyle as CircularPaginationStyle;
 599             if (circularPaginationStyle == null)
 600             {
 601                 throw new Exception("CircularPagination style is null.");
 602             }
 603
 604             container = new VisualView()
 605             {
 606                 Name = "Container",
 607                 ParentOrigin = Tizen.NUI.ParentOrigin.TopLeft,
 608                 PivotPoint = Tizen.NUI.PivotPoint.TopLeft,
 609                 PositionUsesPivotPoint = true,
 610             };
 611             this.Add(container);
 612         }
 613
 614         // The parameter, index, is for the index of either oddArray or evenArray.
 615         private void CreateIndicator(int index)
 616         {
 617             if (circularPaginationStyle == null || circularPaginationStyle.IndicatorSize == null)
 618             {
 619                 return;
 620             }
 621
 622             ImageVisual indicator = new ImageVisual
 623             {
 624                 URL = circularPaginationStyle.IndicatorImageURL?.Normal,
 625                 Size = new Size2D((int)circularPaginationStyle.IndicatorSize.Width, (int)circularPaginationStyle.IndicatorSize.Height),
 626                 Opacity = 0.5f,
 627             };
 628
 629             if (isOddNumber)
 630             {
 631                 indicator.Position = oddArray[index];
 632             }
 633             else
 634             {
 635                 indicator.Position = evenArray[index];
 636             }
 637
 638             container.AddVisual("Indicator" + indicatorList.Count, indicator);
 639             indicatorList.Add(indicator);
 640         }
 641
 642         private void CheckCenterIndicator(int index)
 643         {
 644             if (isCenterImageSet &&
 645                 (isSymmetrical && (index == indicatorCount / 2)) ||
 646                 (!isSymmetrical && (index == leftIndicatorCount)))
 647             {
 648                 isCurrentIndicatorCentered = true;
 649             }
 650             else
 651             {
 652                 isCurrentIndicatorCentered = false;
 653             }
 654         }
 655
 656         private void UpdateContainer()
 657         {
 658             if (circularPaginationStyle == null || circularPaginationStyle.IndicatorSize == null || container == null)
 659             {
 660                 return;
 661             }
 662             if (indicatorList.Count > 0)
 663             {
 664                 container.SizeWidth = (circularPaginationStyle.IndicatorSize.Width) * indicatorList.Count;
 665             }
 666             else
 667             {
 668                 container.SizeWidth = 0;
 669             }
 670             container.SizeHeight = circularPaginationStyle.IndicatorSize.Height;
 671         }
 672
 673         private void UpdateVisual()
 674         {
 675             if (null == circularPaginationStyle.IndicatorSize) return;
 676             var indicatorImageURL = circularPaginationStyle.IndicatorImageURL;
 677             if (null == indicatorImageURL) return;
 678             if (indicatorCount <= 0) return;
 679
 680             for (int i = 0; i < indicatorList.Count; i++)
 681             {
 682                 ImageVisual indicator = indicatorList[i];
 683                 indicator.Size = new Size2D((int)circularPaginationStyle.IndicatorSize.Width, (int)circularPaginationStyle.IndicatorSize.Height);
 684
 685                 CheckCenterIndicator(i);
 686
 687                 if (i == selectedIndex)
 688                 {
 689                     // If the center image is set before, then should update the center visual separately.
 690                     if (isCurrentIndicatorCentered)
 691                     {
 692                         indicator.URL = circularPaginationStyle.CenterIndicatorImageURL?.Selected;
 693                     }
 694                     else
 695                     {
 696                         indicator.URL = indicatorImageURL.Selected;
 697                     }
 698                     indicator.Opacity = 1.0f;
 699                 }
 700                 else
 701                 {
 702                     // If the center image is set before, then should update the center visual separately.
 703                     if (isCurrentIndicatorCentered)
 704                     {
 705                         indicator.URL = circularPaginationStyle.CenterIndicatorImageURL?.Normal;
 706                     }
 707                     else
 708                     {
 709                         indicator.URL = indicatorImageURL.Normal;
 710                     }
 711                     indicator.Opacity = 0.5f;
 712                 }
 713
 714                 if (isOddNumber)
 715                 {
 716                     if (isSymmetrical)
 717                     {
 718                         indicator.Position = oddArray[middleIndex - (indicatorCount / 2) + i];
 719                     }
 720                     else
 721                     {
 722                         indicator.Position = oddArray[(middleIndex - leftIndicatorCount) + i];
 723                     }
 724
 725                 }
 726                 else
 727                 {
 728                     indicator.Position = evenArray[middleIndex - (indicatorCount / 2) + i];
 729                 }
 730             }
 731         }
 732
 733         private void UpdateAsymmetry()
 734         {
 735             if (null == circularPaginationStyle.IndicatorSize) return;
 736             var indicatorImageURL = circularPaginationStyle.IndicatorImageURL;
 737             if (null == indicatorImageURL) return;
 738
 739             int listCount = indicatorList.Count;
 740
 741             for (int i = 0; i < listCount; i++)
 742             {
 743                 container.RemoveVisual("Indicator" + i);
 744             }
 745             container.RemoveAll();
 746             indicatorList.Clear();
 747
 748             for (int i = 0; i < listCount; i++)
 749             {
 750                 ImageVisual newOne = new ImageVisual
 751                 {
 752                     Size = new Size2D((int)circularPaginationStyle.IndicatorSize.Width, (int)circularPaginationStyle.IndicatorSize.Height),
 753                     Position = oddArray[i + (middleIndex - leftIndicatorCount)]
 754                 };
 755
 756                 if (isCenterImageSet && !isSymmetrical && (i == leftIndicatorCount))
 757                 {
 758                     newOne.URL = circularPaginationStyle.CenterIndicatorImageURL?.Normal;
 759                 }
 760                 else
 761                 {
 762                     newOne.URL = indicatorImageURL.Normal;
 763                 }
 764                 newOne.Opacity = 0.5f;
 765                 container.AddVisual("Indicator" + i, newOne);
 766                 indicatorList.Add(newOne);
 767             }
 768
 769             // If selectedIndex is not set yet, the default value is middle index.
 770             if (selectedIndex == -1)
 771             {
 772                 selectedIndex = leftIndicatorCount;
 773             }
 774
 775             if (isCenterImageSet && (selectedIndex == leftIndicatorCount))
 776             {
 777                 indicatorList[selectedIndex].URL = circularPaginationStyle.CenterIndicatorImageURL?.Selected;
 778                 indicatorList[selectedIndex].Opacity = 1.0f;
 779             }
 780             else
 781             {
 782                 indicatorList[selectedIndex].URL = indicatorImageURL.Selected;
 783                 indicatorList[selectedIndex].Opacity = 1.0f;
 784             }
 785         }
 786     }
 787 }