Skip to content

Commit

Permalink
(GH-3910) Improve FlipViewItem
Browse files Browse the repository at this point in the history 
- Add a default style
- Add a BannerText property
  • Loading branch information
@punker76
punker76 committed Nov 24, 2020
1 parent 60fa721 commit 48e4895
Show file tree
Hide file tree
Showing 6 changed files with 185 additions and 62 deletions.
18 changes: 10 additions & 8 deletions src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/OtherExamples.xaml
View file
Expand Up @@ -160,30 +160,32 @@
<mah:FlipView x:Name="FlipView1st"
Height="200"
Margin="0 0 5 0"
Foreground="{DynamicResource MahApps.Brushes.ThemeBackground}"
SelectionChanged="FlipView_SelectionChanged">
Foreground="{DynamicResource MahApps.Brushes.ThemeBackground}">
<mah:FlipView.Items>
<Grid Background="#2E8DEF">
<mah:FlipViewItem Background="#2E8DEF"
BannerText="Cupcakes!"
BorderBrush="Black"
BorderThickness="1">
<iconPacks:PackIconModern Width="60"
Height="60"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Kind="FoodCupcake" />
</Grid>
<Grid Background="#00A600">
</mah:FlipViewItem>
<mah:FlipViewItem Background="#00A600" BannerText="XBox!">
<iconPacks:PackIconModern Width="60"
Height="60"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Kind="Xbox" />
</Grid>
<Grid Background="#BF1E4B">
</mah:FlipViewItem>
<mah:FlipViewItem Background="#BF1E4B" BannerText="Chess!">
<iconPacks:PackIconModern Width="60"
Height="60"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Kind="ChessHorse" />
</Grid>
</mah:FlipViewItem>
</mah:FlipView.Items>
</mah:FlipView>
<StackPanel HorizontalAlignment="Center"
Expand Down
18 changes: 0 additions & 18 deletions src/MahApps.Metro.Samples/MahApps.Metro.Demo/ExampleViews/OtherExamples.xaml.cs
View file
Expand Up @@ -5,7 +5,6 @@
using System;
using System.Windows.Controls;
using System.Windows.Threading;
using MahApps.Metro.Controls;

namespace MetroDemo.ExampleViews
{
Expand Down Expand Up @@ -33,22 +32,5 @@ void Tick(object sender, EventArgs e)
customTransitioning.Content = new TextBlock { Text = "Custom transistion! " + dateTime, SnapsToDevicePixels = true };
SecondcustomTransitioning.Content = new TextBlock { Text = "Second custom transistion! " + dateTime, SnapsToDevicePixels = true };
}

private void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var flipview = ((FlipView)sender);
switch (flipview.SelectedIndex)
{
case 0:
flipview.BannerText = "Cupcakes!";
break;
case 1:
flipview.BannerText = "Xbox!";
break;
case 2:
flipview.BannerText = "Chess!";
break;
}
}
}
}
87 changes: 52 additions & 35 deletions src/MahApps.Metro/Controls/FlipView.cs
View file
Expand Up @@ -16,10 +16,6 @@

namespace MahApps.Metro.Controls
{
public class FlipViewItem : ContentControl
{
}

/// <summary>
/// A control that imitate a slide show with back/forward buttons.
/// </summary>
Expand Down Expand Up @@ -219,11 +215,10 @@ private static void OnIsBannerEnabledPropertyChangedCallback(DependencyObject d,
{
var flipView = (FlipView)d;

void ChangeFlipViewBannerVisibility()
void CheckFlipViewBannerVisibility()
{
if ((bool)e.NewValue)
{
flipView.ChangeBannerText(flipView.BannerText);
flipView.ShowBanner();
}
else
Expand All @@ -234,15 +229,15 @@ void ChangeFlipViewBannerVisibility()

if (flipView.IsLoaded)
{
ChangeFlipViewBannerVisibility();
CheckFlipViewBannerVisibility();
}
else
{
//wait to be loaded?
flipView.ExecuteWhenLoaded(() =>
{
flipView.ApplyTemplate();
ChangeFlipViewBannerVisibility();
CheckFlipViewBannerVisibility();
});
}
}
Expand Down Expand Up @@ -336,23 +331,24 @@ public double BannerOpacity
private const string PART_ForwardButton = "PART_ForwardButton";
private const string PART_Presenter = "PART_Presenter";
private const string PART_UpButton = "PART_UpButton";
/// <summary>
/// To counteract the double Loaded event issue.
/// </summary>
private bool loaded;
private bool allowSelectedIndexChangedCallback = true;
private Button backButton;
private Grid bannerGrid;
private Label bannerLabel;
private Button downButton;
private Button backButton;
private Button forwardButton;
private Button downButton;
private Button upButton;
private Storyboard hideBannerStoryboard;
private Storyboard hideControlStoryboard;
private EventHandler hideControlStoryboardCompletedHandler;
/// <summary>
/// To counteract the double Loaded event issue.
/// </summary>
private bool loaded;
private TransitioningContentControl presenter;
private Storyboard showBannerStoryboard;
private Storyboard showControlStoryboard;
private Button upButton;
private object savedBannerText;

static FlipView()
{
Expand Down Expand Up @@ -422,20 +418,25 @@ private static object CoerceSelectedIndexProperty(DependencyObject d, object val
public void GoBack()
{
this.allowSelectedIndexChangedCallback = false;
this.presenter.Transition = this.Orientation == Orientation.Horizontal ? this.RightTransition : this.UpTransition;
if (this.SelectedIndex > 0)
try
{
this.SelectedIndex--;
}
else
{
if (this.CircularNavigation)
this.presenter.Transition = this.Orientation == Orientation.Horizontal ? this.RightTransition : this.UpTransition;
if (this.SelectedIndex > 0)
{
this.SelectedIndex--;
}
else
{
this.SelectedIndex = this.Items.Count - 1;
if (this.CircularNavigation)
{
this.SelectedIndex = this.Items.Count - 1;
}
}
}

this.allowSelectedIndexChangedCallback = true;
finally
{
this.allowSelectedIndexChangedCallback = true;
}
}

/// <summary>
Expand All @@ -444,20 +445,25 @@ public void GoBack()
public void GoForward()
{
this.allowSelectedIndexChangedCallback = false;
this.presenter.Transition = this.Orientation == Orientation.Horizontal ? this.LeftTransition : this.DownTransition;
if (this.SelectedIndex < this.Items.Count - 1)
try
{
this.SelectedIndex++;
}
else
{
if (this.CircularNavigation)
this.presenter.Transition = this.Orientation == Orientation.Horizontal ? this.LeftTransition : this.DownTransition;
if (this.SelectedIndex < this.Items.Count - 1)
{
this.SelectedIndex = 0;
this.SelectedIndex++;
}
else
{
if (this.CircularNavigation)
{
this.SelectedIndex = 0;
}
}
}

this.allowSelectedIndexChangedCallback = true;
finally
{
this.allowSelectedIndexChangedCallback = true;
}
}

/// <summary>
Expand Down Expand Up @@ -592,6 +598,16 @@ protected override void OnMouseDown(MouseButtonEventArgs e)
protected override void OnSelectionChanged(SelectionChangedEventArgs e)
{
base.OnSelectionChanged(e);

var oldItem = e.RemovedItems?.OfType<FlipViewItem>().FirstOrDefault();
if (oldItem is null)
{
this.savedBannerText = this.BannerText;
}

var newItem = e.AddedItems?.OfType<FlipViewItem>().FirstOrDefault();
this.SetCurrentValue(BannerTextProperty, newItem is null ? this.savedBannerText : newItem.BannerText);

this.DetectControlButtonsStatus();
}

Expand Down Expand Up @@ -817,6 +833,7 @@ private void ShowBanner()
{
if (this.IsBannerEnabled)
{
this.ChangeBannerText(this.BannerText);
this.bannerGrid?.BeginStoryboard(this.showBannerStoryboard);
}
}
Expand Down
60 changes: 60 additions & 0 deletions src/MahApps.Metro/Controls/FlipViewItem.cs
View file
@@ -0,0 +1,60 @@
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using System.Windows;
using System.Windows.Controls;

namespace MahApps.Metro.Controls
{
public class FlipViewItem : ContentControl
{
/// <summary>Identifies the <see cref="BannerText"/> dependency property.</summary>
public static readonly DependencyProperty BannerTextProperty
= DependencyProperty.Register(nameof(BannerText),
typeof(object),
typeof(FlipViewItem),
new FrameworkPropertyMetadata("Banner",
FrameworkPropertyMetadataOptions.AffectsRender,
(d, e) => ((FlipViewItem)d).ExecuteWhenLoaded(() => ((FlipViewItem)d).Owner?.SetCurrentValue(FlipView.BannerTextProperty, e.NewValue))));

/// <summary>
/// Gets or sets the banner text.
/// </summary>
public object BannerText
{
get => this.GetValue(BannerTextProperty);
set => this.SetValue(BannerTextProperty, value);
}

/// <summary>Identifies the <see cref="Owner"/> dependency property.</summary>
private static readonly DependencyPropertyKey OwnerPropertyKey =
DependencyProperty.RegisterReadOnly(nameof(Owner),
typeof(FlipView),
typeof(FlipViewItem),
new PropertyMetadata(null));

/// <summary>Identifies the <see cref="Owner"/> dependency property.</summary>
public static readonly DependencyProperty OwnerProperty = OwnerPropertyKey.DependencyProperty;

public FlipView Owner
{
get => (FlipView)this.GetValue(OwnerProperty);
protected set => this.SetValue(OwnerPropertyKey, value);
}

static FlipViewItem()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(FlipViewItem), new FrameworkPropertyMetadata(typeof(FlipViewItem)));
}

/// <inheritdoc />
public override void OnApplyTemplate()
{
base.OnApplyTemplate();

var flipView = ItemsControl.ItemsControlFromItemContainer(this) as FlipView;
this.SetValue(OwnerPropertyKey, flipView);
}
}
}

0 comments on commit 48e4895

Please sign in to comment.