Skip to content

Commit

Permalink
animations and bug fixes
Browse files Browse the repository at this point in the history 
- added selection indicator and chevron animations
- fixed bugs in icon content, overflow selection, closing flyout
  • Loading branch information
@ojhad
ojhad committed Mar 10, 2020
1 parent b31128d commit 6615eed
Show file tree
Hide file tree
Showing 11 changed files with 390 additions and 189 deletions.
10 changes: 1 addition & 9 deletions dev/Generated/NavigationViewItem.properties.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ void NavigationViewItemProperties::EnsureProperties()
winrt::name_of<winrt::NavigationViewItem>(),
false /* isAttached */,
ValueHelper<bool>::BoxValueIfNecessary(false),
winrt::PropertyChangedCallback(&OnIsChildSelectedPropertyChanged));
nullptr);
}
if (!s_IsExpandedProperty)
{
Expand Down Expand Up @@ -149,14 +149,6 @@ void NavigationViewItemProperties::OnIconPropertyChanged(
winrt::get_self<NavigationViewItem>(owner)->OnIconPropertyChanged(args);
}

void NavigationViewItemProperties::OnIsChildSelectedPropertyChanged(
winrt::DependencyObject const& sender,
winrt::DependencyPropertyChangedEventArgs const& args)
{
auto owner = sender.as<winrt::NavigationViewItem>();
winrt::get_self<NavigationViewItem>(owner)->OnIsChildSelectedPropertyChanged(args);
}

void NavigationViewItemProperties::OnMenuItemsPropertyChanged(
winrt::DependencyObject const& sender,
winrt::DependencyPropertyChangedEventArgs const& args)
Expand Down
4 changes: 0 additions & 4 deletions dev/Generated/NavigationViewItem.properties.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,6 @@ class NavigationViewItemProperties
winrt::DependencyObject const& sender,
winrt::DependencyPropertyChangedEventArgs const& args);

static void OnIsChildSelectedPropertyChanged(
winrt::DependencyObject const& sender,
winrt::DependencyPropertyChangedEventArgs const& args);

static void OnMenuItemsPropertyChanged(
winrt::DependencyObject const& sender,
winrt::DependencyPropertyChangedEventArgs const& args);
Expand Down
320 changes: 210 additions & 110 deletions dev/NavigationView/NavigationView.cpp
View file

Large diffs are not rendered by default.

19 changes: 10 additions & 9 deletions dev/NavigationView/NavigationView.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,19 +128,19 @@ class NavigationView :
bool DoesNavigationViewItemHaveChildren(const winrt::NavigationViewItem& nvi);
bool IsTopLevelItem(const winrt::NavigationViewItemBase& nvib);
winrt::IInspectable GetChildren(const winrt::NavigationViewItem& nvi);
bool IsContainerInFlyout(const winrt::NavigationViewItemBase& nvib);

// Hierarchy related functions
void ToggleIsExpandedNavigationViewItem(const winrt::NavigationViewItem& nvi);
void ChangeIsExpandedNavigationViewItem(const winrt::NavigationViewItem& nvi, bool isExpanded);
void ShowHideChildrenItemsRepeater(const winrt::NavigationViewItem& nvi);
winrt::NavigationViewItem FindLowestLevelContainerToDisplaySelectionIndicator();
void UpdateIsChildSelectedForIndexPath(const winrt::IndexPath& ip, bool isChildSelected);
void UpdateIsChildSelected(const winrt::IndexPath& prevIP, const winrt::IndexPath& nextIP);
void CollapseAllTopLevelMenuItems(winrt::NavigationViewPaneDisplayMode oldDisplayMode);
void CollapseAllMenuItems(const winrt::ItemsRepeater& ir);
void CollapseAllMenuItems(winrt::NavigationViewPaneDisplayMode oldDisplayMode);
void CollapseAllMenuItemsUnderRepeater(const winrt::ItemsRepeater& ir);
void RaiseExpandingEvent(const winrt::NavigationViewItemBase& container);
void RaiseCollapsedEvent(const winrt::NavigationViewItemBase& container);
void CloseFlyoutIfRequired(const winrt::IndexPath& selectedIndex);
void CloseFlyoutIfRequired();

// Force realization functions
winrt::NavigationViewItemBase ResolveContainerForItem(const winrt::IInspectable& item, int index);
Expand Down Expand Up @@ -269,9 +269,11 @@ class NavigationView :
void UpdateTitleBarPadding();

void RaiseDisplayModeChanged(const winrt::NavigationViewDisplayMode& displayMode);
void AnimateSelectionChanged(const winrt::IInspectable& lastItem, const winrt::IInspectable& currentItem);
void AnimateSelectionChanged(const winrt::IInspectable& currentItem);
void AnimateSelectionChangedToItem(const winrt::IInspectable& selectedItem);
void PlayIndicatorAnimations(const winrt::UIElement& indicator, float yFrom, float yTo, winrt::Size beginSize, winrt::Size endSize, bool isOutgoing);
void PlayIndicatorNonSameLevelAnimations(const winrt::UIElement& indicator, bool isOutgoing, bool fromTop);
void PlayIndicatorNonSameLevelTopPrimaryAnimation(const winrt::UIElement& indicator, bool isOutgoing);
void OnAnimationComplete(const winrt::IInspectable& sender, const winrt::CompositionBatchCompletedEventArgs& args);
void ResetElementAnimationProperties(const winrt::UIElement& element, float desiredOpacity);
winrt::NavigationViewItem NavigationViewItemOrSettingsContentFromData(const winrt::IInspectable& data);
Expand Down Expand Up @@ -336,8 +338,11 @@ class NavigationView :
tracker_ref<winrt::Grid> m_topNavGrid{ this };
tracker_ref<winrt::Border> m_topNavContentOverlayAreaGrid{ this };

// Indicator animations
tracker_ref<winrt::UIElement> m_prevIndicator{ this };
tracker_ref<winrt::UIElement> m_nextIndicator{ this };
tracker_ref<winrt::UIElement> m_activeIndicator{ this };
tracker_ref<winrt::IInspectable> m_lastSelectedItemPendingAnimationInTopNav{ this };

tracker_ref<winrt::FrameworkElement> m_togglePaneTopPadding{ this };
tracker_ref<winrt::FrameworkElement> m_contentPaneTopPadding{ this };
Expand All @@ -362,10 +367,6 @@ class NavigationView :
tracker_ref<winrt::ColumnDefinition> m_paneHeaderToggleButtonColumn{ this };
tracker_ref<winrt::RowDefinition> m_paneHeaderContentBorderRow{ this };

int m_indexOfLastSelectedItemInTopNav{ 0 };
tracker_ref<winrt::IInspectable> m_lastSelectedItemPendingAnimationInTopNav{ this };
std::vector<int> m_itemsRemovedFromMenuFlyout{};

tracker_ref<winrt::NavigationViewItem> m_lastItemExpandedIntoFlyout{ this };

// Event Tokens
Expand Down
1 change: 0 additions & 1 deletion dev/NavigationView/NavigationView.idl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,7 +341,6 @@ unsealed runtimeclass NavigationViewItem : NavigationViewItemBase
[MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
[MUX_DEFAULT_VALUE("false")]
Boolean HasUnrealizedChildren{ get; set; };
[MUX_PROPERTY_CHANGED_CALLBACK(TRUE)]
[MUX_DEFAULT_VALUE("false")]
Boolean IsChildSelected{ get; set; };

Expand Down
83 changes: 46 additions & 37 deletions dev/NavigationView/NavigationViewItem.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,29 +261,26 @@ void NavigationViewItem::OnMenuItemsSourcePropertyChanged(const winrt::Dependenc
UpdateVisualStateForChevron();
}

void NavigationViewItem::OnIsChildSelectedPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args)
{
ShowSelectionIndicatorIfRequired();
}

void NavigationViewItem::OnHasUnrealizedChildrenPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args)
{
UpdateVisualStateForChevron();
}

void NavigationViewItem::ShowSelectionIndicatorIfRequired()
bool NavigationViewItem::ShowSelectionIndicatorIfRequired()
{
if (!IsSelected())
{
if (!IsRepeaterVisible() && IsChildSelected())
{
ShowSelectionIndicator(true);
return true;
}
else
{
ShowSelectionIndicator(false);
}
}
return false;
}

void NavigationViewItem::ShowSelectionIndicator(bool visible)
Expand All @@ -297,8 +294,11 @@ void NavigationViewItem::ShowSelectionIndicator(bool visible)

void NavigationViewItem::UpdateVisualStateForIconAndContent(bool showIcon, bool showContent)
{
auto stateName = showIcon ? (showContent ? L"IconOnLeft": L"IconOnly") : L"ContentOnly";
winrt::VisualStateManager::GoToState(*this, stateName, false /*useTransitions*/);
if (auto const presenter = m_navigationViewItemPresenter.get())
{
auto stateName = showIcon ? (showContent ? L"IconOnLeft" : L"IconOnly") : L"ContentOnly";
winrt::VisualStateManager::GoToState(presenter, stateName, false /*useTransitions*/);
}
}

void NavigationViewItem::UpdateVisualStateForNavigationViewPositionChange()
Expand Down Expand Up @@ -456,10 +456,11 @@ void NavigationViewItem::UpdateVisualState(bool useTransitions)

if (IsOnLeftNav())
{
winrt::VisualStateManager::GoToState(*this, m_isClosedCompact ? L"ClosedCompact" : L"NotClosedCompact", useTransitions);

// Backward Compatibility with RS4-, new implementation prefer IconOnLeft/IconOnly/ContentOnly
winrt::VisualStateManager::GoToState(*this, shouldShowIcon ? L"IconVisible" : L"IconCollapsed", useTransitions);
if (auto const presenter = m_navigationViewItemPresenter.get())
{
// Backward Compatibility with RS4-, new implementation prefer IconOnLeft/IconOnly/ContentOnly
winrt::VisualStateManager::GoToState(m_navigationViewItemPresenter.get(), shouldShowIcon ? L"IconVisible" : L"IconCollapsed", useTransitions);
}
}

UpdateVisualStateForToolTip();
Expand Down Expand Up @@ -529,44 +530,47 @@ void NavigationViewItem::SetRepeaterVisibilityAndUpdatePositionIfRequired(bool s
auto visibility = shouldShowRepeater ? winrt::Visibility::Visible : winrt::Visibility::Collapsed;
m_repeater.get().Visibility(visibility);


if (ShouldRepeaterShowInFlyout() && shouldShowRepeater)
if (ShouldRepeaterShowInFlyout())
{
winrt::FlyoutBase::ShowAttachedFlyout(m_rootGrid.get());
}
else if(ShouldRepeaterShowInFlyout() && !shouldShowRepeater)
{
if (auto const flyout = winrt::FlyoutBase::GetAttachedFlyout(m_rootGrid.get()))
if (shouldShowRepeater)
{
winrt::FlyoutBase::ShowAttachedFlyout(m_rootGrid.get());
}
else
{
flyout.Hide();
if (auto const flyout = winrt::FlyoutBase::GetAttachedFlyout(m_rootGrid.get()))
{
flyout.Hide();
}
}
}

ShowSelectionIndicatorIfRequired();
}

void NavigationViewItem::ReparentRepeater()
{
if (auto const repeater = m_repeater.get())
if (HasChildren())
{
if (ShouldRepeaterShowInFlyout() && !m_isRepeaterParentedToFlyout)
if (auto const repeater = m_repeater.get())
{
// Reparent repeater to flyout
m_rootGrid.get().Children().RemoveAtEnd();
m_flyoutContentGrid.get().Children().Append(repeater);
m_isRepeaterParentedToFlyout = true;
if (ShouldRepeaterShowInFlyout() && !m_isRepeaterParentedToFlyout)
{
// Reparent repeater to flyout
m_rootGrid.get().Children().RemoveAtEnd();
m_flyoutContentGrid.get().Children().Append(repeater);
m_isRepeaterParentedToFlyout = true;

PropagateDepthToChildren(0);
}
else if (!ShouldRepeaterShowInFlyout() && m_isRepeaterParentedToFlyout)
{
m_flyoutContentGrid.get().Children().RemoveAtEnd();
m_rootGrid.get().Children().Append(repeater);
m_isRepeaterParentedToFlyout = false;
PropagateDepthToChildren(0);
}
else if (!ShouldRepeaterShowInFlyout() && m_isRepeaterParentedToFlyout)
{
m_flyoutContentGrid.get().Children().RemoveAtEnd();
m_rootGrid.get().Children().Append(repeater);
m_isRepeaterParentedToFlyout = false;

PropagateDepthToChildren(1);
PropagateDepthToChildren(1);
}
ReparentContent();
}
ReparentContent();
}
}

Expand Down Expand Up @@ -739,3 +743,8 @@ void NavigationViewItem::OnPresenterPointerCaptureLost(const winrt::IInspectable
m_isPointerOver = false;
UpdateVisualState(true);
}

void NavigationViewItem::RotateExpandCollapseChevron(bool isExpanded)
{
winrt::get_self<NavigationViewItemPresenter>(m_navigationViewItemPresenter.get())->RotateExpandCollapseChevron(isExpanded);
}
6 changes: 3 additions & 3 deletions dev/NavigationView/NavigationViewItem.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ class NavigationViewItem :
void OnIconPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args);
void OnMenuItemsPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args);
void OnMenuItemsSourcePropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args);
void OnIsChildSelectedPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args);
void OnHasUnrealizedChildrenPropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args);

winrt::UIElement GetSelectionIndicator();
Expand Down Expand Up @@ -70,6 +69,9 @@ class NavigationViewItem :
bool IsTopLevelItem() { return m_isTopLevelItem; };

void OnExpandCollapseChevronTapped(const winrt::IInspectable& sender, const winrt::TappedRoutedEventArgs& args);
bool ShowSelectionIndicatorIfRequired();
void RotateExpandCollapseChevron(bool isExpanded);
bool IsRepeaterVisible();

private:
void UpdateNavigationViewItemToolTip();
Expand Down Expand Up @@ -105,8 +107,6 @@ class NavigationViewItem :
void OnFlyoutClosing(const winrt::IInspectable& sender, const winrt::FlyoutBaseClosingEventArgs& args);
void PropagateDepthToChildren(int depth);
void UpdateItemIndentation();
bool IsRepeaterVisible();
void ShowSelectionIndicatorIfRequired();
void ShowSelectionIndicator(bool visible);

PropertyChanged_revoker m_splitViewIsPaneOpenChangedRevoker{};
Expand Down
23 changes: 23 additions & 0 deletions dev/NavigationView/NavigationViewItemPresenter.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@

static constexpr auto c_contentGrid = L"PresenterContentRootGrid"sv;
static constexpr auto c_expandCollapseChevron = L"ExpandCollapseChevron"sv;
static constexpr auto c_expandCollapseRotateExpandedStoryboard = L"ExpandCollapseRotateExpandedStoryboard"sv;
static constexpr auto c_expandCollapseRotateCollapsedStoryboard = L"ExpandCollapseRotateCollapsedStoryboard"sv;

NavigationViewItemPresenter::NavigationViewItemPresenter()
{
Expand Down Expand Up @@ -36,9 +38,30 @@ void NavigationViewItemPresenter::OnApplyTemplate()
navigationViewItem->UpdateVisualStateNoTransition();
}

m_chevronExpandedStoryboard.set(GetTemplateChildT<winrt::Storyboard>(c_expandCollapseRotateExpandedStoryboard, *this));
m_chevronCollapsedStoryboard.set(GetTemplateChildT<winrt::Storyboard>(c_expandCollapseRotateCollapsedStoryboard, *this));

UpdateMargin();
}

void NavigationViewItemPresenter::RotateExpandCollapseChevron(bool isExpanded)
{
if (isExpanded)
{
if (auto const openStoryboard = m_chevronExpandedStoryboard.get())
{
openStoryboard.Begin();
}
}
else
{
if (auto const closedStoryboard = m_chevronCollapsedStoryboard.get())
{
closedStoryboard.Begin();
}
}
}

winrt::UIElement NavigationViewItemPresenter::GetSelectionIndicator()
{
return m_helper.GetSelectionIndicator();
Expand Down
4 changes: 4 additions & 0 deletions dev/NavigationView/NavigationViewItemPresenter.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ class NavigationViewItemPresenter:
void UpdateContentLeftIndentation(double leftIndentation);

void IsExpandCollapseChevronVisible(bool isVisible);
void RotateExpandCollapseChevron(bool isExpanded);

private:
NavigationViewItem * GetNavigationViewItem();
Expand All @@ -38,4 +39,7 @@ class NavigationViewItemPresenter:
winrt::event_token m_expandCollapseChevronTappedToken{};

double m_leftIndentation{ 0 };

tracker_ref<winrt::Storyboard> m_chevronExpandedStoryboard{ this };
tracker_ref<winrt::Storyboard> m_chevronCollapsedStoryboard{ this };
};
Loading

0 comments on commit 6615eed

Please sign in to comment.