private void Selector_UpdateSelectedState(AppSelectorButton sbButton) { foreach (AppSelectorButton button in _buttonList) { if (((Panel)button.Content).Children[2] is TextBlockEx) { TextBlockEx text = (TextBlockEx)((Panel)button.Content).Children[2]; if (button.ID == sbButton.ID) { text.ShowBoldText(true); //if (IsListView) //{ // button.Background = new SolidColorBrush(Colors.Blue); //} } else { text.ShowBoldText(false); //if (IsListView) //{ // button.Background = button.NormalBackground; //} } } } }
private TextBlockEx CreateWord(string name, string text) { TextBlockEx _textBlock = new TextBlockEx() { Name = name, Text = text, TextStyle = this.TextStyle, Margin = StyleHelper.GetApplicationThickness(LayoutThicknesses.HeroMargin), Opacity = 0d }; return(_textBlock); }
private void RenderUI() { // get the layoutroot _layoutRoot = (Grid)this.GetTemplateChild("LayoutRoot"); if (null == _layoutRoot) { return; } // clear any children _layoutRoot.Children.Clear(); // get our sizes double arrowWidth = StyleHelper.GetApplicationDouble(LayoutSizes.SwipeToContinueArrowWidth); double spacer = StyleHelper.GetApplicationDouble(LayoutSizes.SwipeToContinueSpacer); // set up grid _layoutRoot.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto }); _layoutRoot.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(arrowWidth) }); _layoutRoot.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(arrowWidth) }); _layoutRoot.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(arrowWidth) }); _layoutRoot.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(arrowWidth) }); _layoutRoot.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(arrowWidth) }); _layoutRoot.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(spacer) }); _layoutRoot.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto }); // add a translate transform to the layout root _translateGrid = new TranslateTransform() { X = 0 }; _layoutRoot.RenderTransform = _translateGrid; // manipulation mode _layoutRoot.ManipulationMode = ManipulationModes.TranslateRailsX; // attach to the manipulation events _layoutRoot.ManipulationStarted += Grid_ManipulationStarted; _layoutRoot.ManipulationDelta += Grid_ManipulationDelta; _layoutRoot.ManipulationCompleted += Grid_ManipulationCompleted; // create arrow bitmap _arrowBitmapImage = new BitmapImage() { UriSource = new Uri(ARROW_URI), DecodePixelWidth = (int)arrowWidth, }; // create arrows _arrowLeftmost = new Image() { Width = arrowWidth, Opacity = 0.0, Source = _arrowBitmapImage }; Grid.SetRow(_arrowLeftmost, 0); Grid.SetColumn(_arrowLeftmost, 0); _layoutRoot.Children.Add(_arrowLeftmost); _arrowLeft = new Image() { Width = arrowWidth, Opacity = 0.0, Source = _arrowBitmapImage }; Grid.SetRow(_arrowLeft, 0); Grid.SetColumn(_arrowLeft, 1); _layoutRoot.Children.Add(_arrowLeft); _arrowMiddle = new Image() { Width = arrowWidth, Opacity = 0.0, Source = _arrowBitmapImage }; Grid.SetRow(_arrowMiddle, 0); Grid.SetColumn(_arrowMiddle, 2); _layoutRoot.Children.Add(_arrowMiddle); _arrowRight = new Image() { Width = arrowWidth, Opacity = 0.0, Source = _arrowBitmapImage }; Grid.SetRow(_arrowRight, 0); Grid.SetColumn(_arrowRight, 3); _layoutRoot.Children.Add(_arrowRight); _arrowRightmost = new Image() { Width = arrowWidth, Opacity = 0.0, Source = _arrowBitmapImage }; Grid.SetRow(_arrowRightmost, 0); Grid.SetColumn(_arrowRightmost, 4); _layoutRoot.Children.Add(_arrowRightmost); // create textblock _textSwipe = new TextBlockEx() { TextStyle = TextStyles.Swipe, HorizontalAlignment = HorizontalAlignment.Left, VerticalAlignment = VerticalAlignment.Center, Opacity = 0.0, }; _textSwipe.SetBinding(TextBlockEx.TextProperty, new Binding() { Source = this, Path = new PropertyPath("SwipeText"), Mode = BindingMode.OneWay }); Grid.SetRow(_textSwipe, 0); Grid.SetColumn(_textSwipe, 6); _layoutRoot.Children.Add(_textSwipe); // animation calculations double staggerDelayIn = ANIM_STAGGER_TEXT; // text fade in _storyboardText = AnimationHelper.CreateEasingAnimation(_textSwipe, "(UIElement.Opacity)", 0.0, 0.0, 1.0, null, null, ANIM_FADEIN_TEXT, staggerDelayIn, false, false, new RepeatBehavior(1d)); staggerDelayIn += ANIM_FADEIN_TEXT + ANIM_STAGGER_FIRSTARROW; // right most arrow fade in _storyboardRightmostArrow = AnimationHelper.CreateEasingAnimation(_arrowRightmost, "(UIElement.Opacity)", 0.0, 0.0, 1.0, null, null, ANIM_FADEIN_ARROW, staggerDelayIn, false, false, new RepeatBehavior(1d)); staggerDelayIn += ANIM_FADEIN_ARROW + ANIM_STAGGER_NEXTARROWS + ANIM_REST_ARROW; // right arrow fade in _storyboardRightArrow = AnimationHelper.CreateEasingAnimation(_arrowRight, "(UIElement.Opacity)", 0.0, 0.0, 1.0, null, null, ANIM_FADEIN_ARROW, staggerDelayIn, false, false, new RepeatBehavior(1d)); staggerDelayIn += ANIM_FADEIN_ARROW + ANIM_STAGGER_NEXTARROWS + ANIM_REST_ARROW; // middle arrow fade in _storyboardMiddleArrow = AnimationHelper.CreateEasingAnimation(_arrowMiddle, "(UIElement.Opacity)", 0.0, 0.0, 1.0, null, null, ANIM_FADEIN_ARROW, staggerDelayIn, false, false, new RepeatBehavior(1d)); staggerDelayIn += ANIM_FADEIN_ARROW + ANIM_STAGGER_NEXTARROWS + ANIM_REST_ARROW; // left arrow fade in _storyboardLeftArrow = AnimationHelper.CreateEasingAnimation(_arrowLeft, "(UIElement.Opacity)", 0.0, 0.0, 1.0, null, null, ANIM_FADEIN_ARROW, staggerDelayIn, false, false, new RepeatBehavior(1d)); staggerDelayIn += ANIM_FADEIN_ARROW + ANIM_STAGGER_NEXTARROWS + ANIM_REST_ARROW; // left most arrow fade in _storyboardLeftmostArrow = AnimationHelper.CreateEasingAnimation(_arrowLeftmost, "(UIElement.Opacity)", 0.0, 0.0, 1.0, null, null, ANIM_FADEIN_ARROW, staggerDelayIn, false, false, new RepeatBehavior(1d)); staggerDelayIn += ANIM_FADEIN_ARROW + ANIM_STAGGER_NEXTARROWS + ANIM_REST_ARROW; //// set up fade animations //_storyboardFadeIn = AnimationHelper.CreateStandardEasingAnimation(_layoutRoot, "Opacity", 0.0, 0.0, 1.0, 100d, 0d, false, false, new RepeatBehavior(1d)); //_storyboardFadeOut = AnimationHelper.CreateStandardEasingAnimation(_layoutRoot, "Opacity", 1.0, 1.0, 0.0, 100d, 0d, false, false, new RepeatBehavior(1d)); }
private void GenerateButton(ImagePair imagePair, int i, int position) { Grid grid = new Grid() { Margin = new Thickness(0), Padding = new Thickness(0) }; if (this.ShowMessages && this.MainOrientation == Orientation.Vertical) { grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(.5, GridUnitType.Star) }); grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(.5, GridUnitType.Star) }); grid.ColumnSpacing = WIDTH_GRID_COLUMNSPACING; } Grid.SetRow(imagePair.NotSelected, 0); Grid.SetColumn(imagePair.NotSelected, 0); grid.Children.Add(imagePair.NotSelected); Grid.SetRow(imagePair.Selected, 0); Grid.SetColumn(imagePair.Selected, 0); grid.Children.Add(imagePair.Selected); HorizontalAlignment horizontalAlignment = HorizontalAlignment.Center; // if we need to show messages then align left if (this.MainOrientation == Orientation.Vertical && this.ShowMessages && !string.IsNullOrWhiteSpace(imagePair.Message)) { horizontalAlignment = HorizontalAlignment.Left; TextBlockEx tbMessage = new TextBlockEx() { Name = "TheText", Text = imagePair.Message, TextStyle = TextStyles.AppSelectorText, FontSize = 20, Opacity = 1, VerticalAlignment = VerticalAlignment.Center, TextStyleBold = TextStyles.AppSelectorTextBold }; if (i == 0) { tbMessage.ShowBoldText(true); } Grid.SetRow(tbMessage, 0); Grid.SetColumn(tbMessage, 1);// kk this isnt working just yet. grid.Children.Add(tbMessage); } AppSelectorButton sbButton = new AppSelectorButton() { ID = i, HorizontalAlignment = horizontalAlignment, VerticalAlignment = VerticalAlignment.Center, Content = grid }; //if (!IsListView) //{ // sbButton.Background = new SolidColorBrush(Colors.Transparent); //} //else //{ // sbButton.NormalBackground = (i % 2 == 0 ? BackGroundWhiteAcrylic : BackGroundGrayAcrylic); // if (i == 0) // { // sbButton.Background = new SolidColorBrush(Colors.Blue); // } // else // { // sbButton.Background = sbButton.NormalBackground; // } //} //only set the dimensions of the button if the control variables are passed in // and the orientation is correct if (this.ButtonHeight > 0) { sbButton.Height = this.ButtonHeight; } // if u need to show messages, dont set the width b/c theres no way to figure out the width // if there is text if (this.ButtonWidth > 0 && (!this.ShowMessages && !(this.MainOrientation == Orientation.Vertical))) { sbButton.Width = this.ButtonWidth; } if (null != _buttonStyle) { sbButton.Style = _buttonStyle; } ; if (imagePair.IsClearButton) {// these buttons get their own handler and dont change the selection of the app selector sbButton.AddHandler(PointerReleasedEvent, new PointerEventHandler(Selector_ClearButtonClick), true); } else { sbButton.AddHandler(PointerReleasedEvent, new PointerEventHandler(Selector_ButtonClick), true); } grid.PointerEntered += pointerEntered; if (this.MainOrientation == Orientation.Horizontal) { Grid.SetRow(sbButton, 0); Grid.SetColumn(sbButton, position); } else // vertical { Grid.SetColumn(sbButton, 0); Grid.SetRow(sbButton, position); } if (!imagePair.IsClearButton) {// clear button is not a part of the regular buttons this.Buttons.Add(sbButton); } _layoutRoot.Children.Add(sbButton); _buttonList.Add(sbButton); }
private void GenerateButton(AppSelectorData AppSelectorData, int index) { btnGrid = new Grid() { Margin = new Thickness(0), Padding = new Thickness(0) }; if (this.ShowMessages && this.MainOrientation == Orientation.Vertical) { btnGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(.5, GridUnitType.Star) }); btnGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(.5, GridUnitType.Star) }); btnGrid.ColumnSpacing = WIDTH_GRID_COLUMNSPACING; } ImagePair images = new ImagePair() { //ID = i, Selected = new Image() { Width = this.ButtonWidth, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center, Opacity = 1.0 }, NotSelected = new Image() { Width = this.ButtonWidth, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center, Opacity = 1.0 } }; if (!string.IsNullOrEmpty(AppSelectorData.Source_NotSelectedImage)) { images.NotSelected.Source = new BitmapImage() { UriSource = new Uri(AppSelectorData.Source_NotSelectedImage), DecodePixelWidth = (int)this.ButtonWidth }; } else if (!string.IsNullOrEmpty(AppSelectorData.SourceSVG_NotSelectedImage)) { images.NotSelected.Source = new SvgImageSource(new Uri(AppSelectorData.SourceSVG_NotSelectedImage)); } if (!string.IsNullOrEmpty(AppSelectorData.Source_SelectedImage)) { images.Selected.Source = new BitmapImage() { UriSource = new Uri(AppSelectorData.Source_SelectedImage), DecodePixelWidth = (int)this.ButtonWidth }; } else if (!string.IsNullOrEmpty(AppSelectorData.SourceSVG_SelectedImage)) { images.Selected.Source = new SvgImageSource(new Uri(AppSelectorData.SourceSVG_SelectedImage)); } //images.Selected.Source Grid.SetRow(images.NotSelected, 0); Grid.SetColumn(images.NotSelected, 0); btnGrid.Children.Add(images.NotSelected); Grid.SetRow(images.Selected, 0); Grid.SetColumn(images.Selected, 0); btnGrid.Children.Add(images.Selected); if (this.MainOrientation == Orientation.Vertical && this.ShowMessages) { TextBlockEx tbMessage = new TextBlockEx() { Name = "Text", Text = AppSelectorData.Message, TextStyle = TextStyles.AppSelectorText, FontSize = 20, Opacity = 1, VerticalAlignment = VerticalAlignment.Center, TextStyleBold = TextStyles.AppSelectorTextBold //TextStyleBold = (IsListView ? TextStyles.AppSelectorTextDarkBold: TextStyles.AppSelectorTextBold) }; if (index == 0) { tbMessage.ShowBoldText(true); } Grid.SetRow(tbMessage, 0); Grid.SetColumn(tbMessage, 1);// kk this isnt working just yet. btnGrid.Children.Add(tbMessage); } if (!AppSelectorData.IsClearButton) { this.ImagePairs.Add(index, images); } HorizontalAlignment horizontalAlignment = HorizontalAlignment.Center; // if we need to show messages then align left if (this.MainOrientation == Orientation.Vertical && this.ShowMessages) { horizontalAlignment = HorizontalAlignment.Left; } AppSelectorButton sbButton = new AppSelectorButton() { ID = index, Background = new SolidColorBrush(Colors.Transparent), HorizontalAlignment = horizontalAlignment, VerticalAlignment = VerticalAlignment.Center, Content = btnGrid }; //if (!IsListView) //{ // sbButton.Background = new SolidColorBrush(Colors.Transparent); //} //else //{ // sbButton.NormalBackground = (index % 2 == 0 ? BackGroundWhiteAcrylic : BackGroundGrayAcrylic); // if (index == 0) // { // sbButton.Background = new SolidColorBrush(Colors.Blue); // } // else // { // sbButton.Background = sbButton.NormalBackground; // } //} //only set the dimensions of the button if the control variables are passed in // and the orientation is correct if (this.ButtonHeight > 0) { sbButton.Height = this.ButtonHeight; } // if u need to show messages, dont set the width b/c theres no way to figure out the width // if there is text if (this.ButtonWidth > 0 && (!this.ShowMessages && !(this.MainOrientation == Orientation.Vertical))) { sbButton.Width = this.ButtonWidth; } if (null != _buttonStyle) { sbButton.Style = _buttonStyle; } ; if (AppSelectorData.IsClearButton) {// these buttons get their own handler and dont change the selection of the app selector sbButton.AddHandler(PointerReleasedEvent, new PointerEventHandler(Selector_ClearButtonClick), true); } else { sbButton.AddHandler(PointerReleasedEvent, new PointerEventHandler(Selector_ButtonClick), true); } btnGrid.PointerEntered += pointerEntered; if (this.MainOrientation == Orientation.Horizontal) { Grid.SetRow(sbButton, 0); Grid.SetColumn(sbButton, index); } else // vertical { Grid.SetColumn(sbButton, 0); Grid.SetRow(sbButton, index); } if (!AppSelectorData.IsClearButton) {// clear button is not a part of the regular buttons this.Buttons.Add(sbButton); } _layoutRoot.Children.Add(sbButton); _buttonList.Add(sbButton); }
private void RenderUI() { // get the master row container _rowMaster = (StackPanel)this.GetTemplateChild("RowMaster"); // exit if we can't find it if (null == _rowMaster) { return; } // clear the children _rowMaster.Children.Clear(); int _rowCount = 0; // create rows for (int row = 0; row < this.WordRows; row++) { // create row stackpanel and add to the master StackPanel stackPanel = new StackPanel() { Orientation = Orientation.Horizontal, HorizontalAlignment = HorizontalAlignment.Center, }; _rowMaster.Children.Add(stackPanel); _rowCount++; } // break the words into text blocks List <string> words = this.Words.Split(" ").ToList <string>(); // calculate word positions; int wordsPerLine = words.Count / this.WordRows; int wordsLeftover = words.Count - (wordsPerLine * this.WordRows); int wordIndex = 0; //// loop through the rows for (int i = 0; i < _rowCount; i++) { StackPanel row = (StackPanel)_rowMaster.Children[i]; //foreach (StackPanel row in _rowMaster.Children) //{ int wordsThisLine = wordsPerLine; if (i == _rowCount - 1 && wordsLeftover > 0) { wordsThisLine++; wordsLeftover--; } for (int k = 0; k < wordsThisLine; k++) { // get the word string word = words.ElementAt(wordIndex); // create the name string name = String.Format("Word_{0}", wordIndex); // create the textblock TextBlockEx textBlockWord = CreateWord(name, word); // save it to reset opacity for animation _wordTextBlocks.Add(textBlockWord); // add it to the row row.Children.Add(textBlockWord); // increment the word index wordIndex++; } } // animation index int animationIndex = 0; // loop through the words to animate them foreach (TextBlockEx textBlockEx in _wordTextBlocks) { double staggerDelay = this.StaggerDelayMilliseconds + (animationIndex * this.DurationPerWordInMilliseconds); _storyboards.Add( AnimationHelper.CreateStandardAnimation(textBlockEx, "(TextBlockEx.Opacity)", 0.0, 0.0, 1.0, this.DurationPerWordInMilliseconds, staggerDelay, false, false, new RepeatBehavior(1d))); animationIndex++; } }
private void RenderUI() { // get the layoutroot _layoutRoot = (Border)this.GetTemplateChild("LayoutRoot"); if (null == _layoutRoot) { return; } // clear its children _layoutRoot.Child = null; // calculate element widths double gridWidth = this.Width; // calculate rows GridLength headlineRowHeight = (String.IsNullOrWhiteSpace(this.Headline)) ? new GridLength(0) : GridLength.Auto; GridLength ledeRowHeight = (String.IsNullOrWhiteSpace(this.Lede)) ? new GridLength(0) : new GridLength(1.0, GridUnitType.Star); double rowSpacing = (String.IsNullOrWhiteSpace(this.Headline) || String.IsNullOrWhiteSpace(this.Lede)) || !this.IsRowSpacingActive ? 0d : 10d; // create the grid _layoutGrid = new Grid() { Name = "LayoutGrid", Width = gridWidth, RowSpacing = rowSpacing }; _layoutGrid.RowDefinitions.Add(new RowDefinition() { Height = headlineRowHeight }); _layoutGrid.RowDefinitions.Add(new RowDefinition() { Height = ledeRowHeight }); _layoutGrid.ColumnDefinitions.Add(new ColumnDefinition()); // add it to the root _layoutRoot.Child = _layoutGrid; // if we have a headline if (!String.IsNullOrWhiteSpace(this.Headline)) { // create headline // ================= _headline = new TextBlockEx() { Name = "Headline", TextAlignment = this.HeaderAlignment, TextWrapping = TextWrapping.WrapWholeWords, Width = gridWidth, TextStyle = this.HeadlineStyle, TranslateDirection = this.Direction(), Opacity = this.HeadlineOpacity }; Grid.SetRow(_headline, 0); Grid.SetColumn(_headline, 0); // set headline binding _headline.SetBinding(TextBlockEx.TextProperty, new Binding() { Source = this, Path = new PropertyPath("Headline"), Mode = BindingMode.OneWay }); // add to the grid _layoutGrid.Children.Add(_headline); //// update layout //this.UpdateLayout(); } // if we have a lede if (!String.IsNullOrWhiteSpace(this.Lede)) { double _ledeWidth = this.LedeWidth > 0 ? LedeWidth : gridWidth; // create lede // ================= _lede = new TextBlockEx() { Name = "Lede", TextAlignment = this.HeaderAlignment, TextWrapping = TextWrapping.WrapWholeWords, Width = _ledeWidth, TextStyle = this.LedeStyle, HorizontalAlignment = this.HorizontalAlignment, TranslateDirection = this.Direction(), Opacity = this.LedeOpacity }; Grid.SetRow(_lede, 1); Grid.SetColumn(_lede, 0); // if there's a call to action if ((!String.IsNullOrWhiteSpace(this.CTAText)) && (null != this.CTAUri)) { // get style for the cta run Style ledeStyle = StyleHelper.GetApplicationStyle(this.LedeStyle); Style ctaStyle = StyleHelper.GetApplicationStyle(this.CTATextStyle); // create the lede _ledeRun = new Run() { Text = this.Lede + CHAR_NBSPACE + CHAR_NBSPACE }; StyleHelper.SetRunStyleFromStyle(_ledeRun, ledeStyle); _lede.AddInline(_ledeRun); // create the hyperlink _ledeCTALink = new Hyperlink() { //NavigateUri = (this.CTAUri) // can't do this because we need to catch the Click event ourselves }; // create the text for the hyperlink _ledeCTAText = new Run() { Text = this.CTAText.ToUpper() }; StyleHelper.SetRunStyleFromStyle(_ledeCTAText, ctaStyle); _ledeCTALink.Inlines.Add(_ledeCTAText); _lede.AddInline(_ledeCTALink); // add the click handler for the link _ledeCTALink.Click += CTALink_Click; } else { // no CTA, so this is simple text; set lede binding _lede.SetBinding(TextBlockEx.TextProperty, new Binding() { Source = this, Path = new PropertyPath("Lede"), Mode = BindingMode.OneWay }); } // add to the grid _layoutGrid.Children.Add(_lede); } }
private void RenderUI() { // get the layout base (a border here) _layoutRoot = (Canvas)this.GetTemplateChild("LayoutRoot"); // if we can't get the layout root, we can't do anything if (null == _layoutRoot) { return; } double batteryHeight = this.Width * .383; double chargeHeight = batteryHeight - (2 * MARGIN_CHARGE_TOP); double batteryHorizontalCenter = this.Width / 2; double batteryVerticalCenter = batteryHeight / 2; double TEXT_WIDTH = 100d; double LEFT_HOURS = batteryHorizontalCenter - TEXT_WIDTH - (MARGIN_CHARGE_LEFT / 2); double LEFT_HOURS_TEXT = batteryHorizontalCenter + (MARGIN_CHARGE_LEFT / 2); double TOP_TEXT = batteryVerticalCenter - (chargeHeight / 2); // set up the canvas _layoutRoot.Width = this.Width; _layoutRoot.Height = batteryHeight; // create the battery _imageBattery = new ImageEx() { Name = "Battery", ImageSource = URI_IMAGE_BATTERY, ImageWidth = this.Width }; Canvas.SetLeft(_imageBattery, LEFT_BATTERY); Canvas.SetTop(_imageBattery, TOP_BATTERY); Canvas.SetZIndex(_imageBattery, Z_ORDER_BATTERY); _layoutRoot.Children.Add(_imageBattery); // create the charge _imageCharge = new Image() { Name = "ChargeBar", Source = new BitmapImage(new Uri(URI_IMAGE_CHARGE)), Stretch = Stretch.Fill, Width = CHARGE_START_WIDTH, Height = chargeHeight }; Canvas.SetLeft(_imageCharge, LEFT_CHARGE); Canvas.SetTop(_imageCharge, TOP_CHARGE); Canvas.SetZIndex(_imageCharge, Z_ORDER_CHARGE); _layoutRoot.Children.Add(_imageCharge); // create the percent overlay _hours = new AnimatableInteger() { HourIntegerMax = this.HourIntegerMax, Width = TEXT_WIDTH, Height = chargeHeight, VerticalAlignment = VerticalAlignment.Center, DurationInMilliseconds = this.DurationInMilliseconds, StaggerDelayInMilliseconds = this.StaggerDelayInMilliseconds }; Canvas.SetLeft(_hours, LEFT_HOURS); Canvas.SetTop(_hours, TOP_TEXT); Canvas.SetZIndex(_hours, Z_ORDER_CONTROLS); _layoutRoot.Children.Add(_hours); double chargeEndWidth = this.Width - ((2 * MARGIN_CHARGE_LEFT) + CHARGE_START_WIDTH + 5); // create the charge animation _chargeStoryboard = SetupChargeAnimation(_imageCharge, CHARGE_START_WIDTH, chargeEndWidth, this.DurationInMilliseconds, this.StaggerDelayInMilliseconds); // create hour text overlay _hoursText = new TextBlockEx() { Text = this.HourText, Width = TEXT_WIDTH, Height = chargeHeight, VerticalAlignment = VerticalAlignment.Center, HorizontalAlignment = HorizontalAlignment.Left, TextAlignment = TextAlignment.Left, TextStyle = TextStyles.PopupBatteryLife }; Canvas.SetLeft(_hoursText, LEFT_HOURS_TEXT); Canvas.SetTop(_hoursText, TOP_TEXT); Canvas.SetZIndex(_hoursText, Z_ORDER_CONTROLS); _layoutRoot.Children.Add(_hoursText); }
private void RenderUI() { // get the layoutroot _layoutRoot = (Grid)this.GetTemplateChild("LayoutRoot"); if (null == _layoutRoot) { return; } // clear any children _layoutRoot.Children.Clear(); // get ellipse size double ellipseSize = StyleHelper.GetApplicationDouble(LayoutSizes.SwipeLeftEllipseRadius); // set up grid _layoutRoot.Width = WIDTH_CONTROL; _layoutRoot.RowSpacing = StyleHelper.GetApplicationDouble(LayoutSizes.SwipeLeftSpacer); _layoutRoot.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(ellipseSize) }); _layoutRoot.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1.0, GridUnitType.Auto) }); _layoutRoot.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Star) }); // test //TestHelper.AddGridCellBorders(_layoutRoot, 2, 1, Colors.DeepSkyBlue); // create textblock _textSwipe = new TextBlockEx() { Name = "SwipeText", TextStyle = TextStyles.Swipe, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center }; _textSwipe.SetBinding(TextBlockEx.TextProperty, new Binding() { Source = this, Path = new PropertyPath("SwipeText"), Mode = BindingMode.OneWay }); Grid.SetRow(_textSwipe, 1); Grid.SetColumn(_textSwipe, 0); _layoutRoot.Children.Add(_textSwipe); // create the ellipse _ellipseSwipe = new Ellipse() { Width = ellipseSize, Height = ellipseSize, HorizontalAlignment = HorizontalAlignment.Right, VerticalAlignment = VerticalAlignment.Center, Stroke = new SolidColorBrush(Colors.White), Fill = new SolidColorBrush(Colors.White), Opacity = 0.0 }; Grid.SetRow(_ellipseSwipe, 0); Grid.SetColumn(_ellipseSwipe, 0); _layoutRoot.Children.Add(_ellipseSwipe); // add a translate transform to the ellipse _translateEllipse = new TranslateTransform() { X = 0 }; _ellipseSwipe.RenderTransform = _translateEllipse; // set up control fades _storyboardFadeIn = AnimationHelper.CreateEasingAnimation(_layoutRoot, "Opacity", 0.0, 0.0, 1.0, this.DurationInMilliseconds, this.StaggerDelayInMilliseconds + ANIM_STAGGER_TEXT_FADEIN, false, false, new RepeatBehavior(1)); _storyboardFadeOut = AnimationHelper.CreateEasingAnimation(_layoutRoot, "Opacity", 0.0, 1.0, 0.0, this.DurationInMilliseconds, this.StaggerDelayInMilliseconds + ANIM_STAGGER_TEXT_FADEOUT, false, false, new RepeatBehavior(1)); // set up ellipse fades _storyboardEllipseFadeIn = AnimationHelper.CreateEasingAnimationWithNotify(_ellipseSwipe, this.FadeIn_Complete, "Opacity", 0.0, 0.0, 1.0, null, null, ANIM_DURATION_ELLIPSE_FADE, this.StaggerDelayInMilliseconds + ANIM_STAGGER_ELLIPSE_FADEIN, false, false, new RepeatBehavior(1)); _storyboardEllipseFadeOut = AnimationHelper.CreateEasingAnimation(_ellipseSwipe, "Opacity", 0.0, 1.0, 0.0, ANIM_DURATION_ELLIPSE_FADE, 0d, false, false, new RepeatBehavior(1)); // fade out original stagger: this.StaggerDelayInMilliseconds + ANIM_STAGGER_ELLIPSE_FADEOUT QuinticEase quinticEase = new QuinticEase() { EasingMode = EasingMode.EaseInOut }; // set up ellipse move _storyboardEllipseMove = AnimationHelper.CreateEasingAnimationWithNotify(_ellipseSwipe, this.Move_Complete, "(Ellipse.RenderTransform).(TranslateTransform.X)", 0.0, 0.0, -1 * WIDTH_CONTROL + ellipseSize, quinticEase, quinticEase, ANIM_DURATION_ELLIPSE_MOVE, 0d, false, false, new RepeatBehavior(1)); // move original stagger: this.StaggerDelayInMilliseconds + ANIM_STAGGER_ELLIPSE_MOVE }