From 98a6b746dc409fa3c64bca4db2c3e6aa31e73470 Mon Sep 17 00:00:00 2001 From: Marcel Wagner Date: Tue, 19 May 2020 19:32:28 +0200 Subject: [PATCH] Align TabView visuals with Edge (#2201) * Add initial wip * More improvements, added shadow * remove unused corners * Improve hit testing * Switch to rounded corners * Add rounded corners * Switch to single shadow * Switch to TemplateSettings * Cleanup * CR feedback * Fix test failure * workaround vsm crash on --- dev/AutoSuggestBox/AutoSuggestBoxHelper.cpp | 10 ++-- dev/AutoSuggestBox/AutoSuggestBoxHelper.h | 1 - dev/ComboBox/ComboBoxHelper.cpp | 10 ++-- dev/ComboBox/ComboBoxHelper.h | 1 - ...TabViewItemTemplateSettings.properties.cpp | 46 +++++++++++++++++++ .../TabViewItemTemplateSettings.properties.h | 10 ++++ dev/ResourceHelper/ResourceAccessor.cpp | 7 ++- dev/ResourceHelper/ResourceAccessor.h | 1 + dev/TabView/InteractionTests/TabViewTests.cs | 2 +- dev/TabView/TabView.idl | 11 +++++ dev/TabView/TabView.xaml | 41 ++++++++++++++++- dev/TabView/TabViewItem.cpp | 17 +++++++ dev/TabView/TabView_themeresources.xaml | 2 +- dev/TabView/TestUI/TabViewPage.xaml | 8 +++- 14 files changed, 146 insertions(+), 21 deletions(-) diff --git a/dev/AutoSuggestBox/AutoSuggestBoxHelper.cpp b/dev/AutoSuggestBox/AutoSuggestBoxHelper.cpp index 6e0ed8a878..20f9bb7878 100644 --- a/dev/AutoSuggestBox/AutoSuggestBoxHelper.cpp +++ b/dev/AutoSuggestBox/AutoSuggestBoxHelper.cpp @@ -6,6 +6,7 @@ #include "AutoSuggestBoxHelper.h" #include "DispatcherHelper.h" #include "CornerRadiusFilterConverter.h" +#include "ResourceAccessor.h" static constexpr auto c_popupName = L"SuggestionsPopup"sv; static constexpr auto c_popupBorderName = L"SuggestionsContainer"sv; @@ -103,8 +104,8 @@ void AutoSuggestBoxHelper::OnAutoSuggestBoxLoaded(const winrt::IInspectable& sen void AutoSuggestBoxHelper::UpdateCornerRadius(const winrt::AutoSuggestBox& autoSuggestBox, bool isPopupOpen) { - auto textBoxRadius = unbox_value(ResourceLookup(autoSuggestBox, box_value(c_controlCornerRadiusKey))); - auto popupRadius = unbox_value(ResourceLookup(autoSuggestBox, box_value(c_overlayCornerRadiusKey))); + auto textBoxRadius = unbox_value(ResourceAccessor::ResourceLookup(autoSuggestBox, box_value(c_controlCornerRadiusKey))); + auto popupRadius = unbox_value(ResourceAccessor::ResourceLookup(autoSuggestBox, box_value(c_overlayCornerRadiusKey))); if (winrt::IControl7 autoSuggextBoxControl7 = autoSuggestBox) { @@ -158,8 +159,3 @@ bool AutoSuggestBoxHelper::IsPopupOpenDown(const winrt::AutoSuggestBox& autoSugg } return verticalOffset >= 0; } - -winrt::IInspectable AutoSuggestBoxHelper::ResourceLookup(const winrt::Control& control, const winrt::IInspectable& key) -{ - return control.Resources().HasKey(key) ? control.Resources().Lookup(key) : winrt::Application::Current().Resources().TryLookup(key); -} diff --git a/dev/AutoSuggestBox/AutoSuggestBoxHelper.h b/dev/AutoSuggestBox/AutoSuggestBoxHelper.h index 7f45bacf83..7f03ba398c 100644 --- a/dev/AutoSuggestBox/AutoSuggestBoxHelper.h +++ b/dev/AutoSuggestBox/AutoSuggestBoxHelper.h @@ -25,7 +25,6 @@ class AutoSuggestBoxHelper static void UpdateCornerRadius(const winrt::AutoSuggestBox& autoSuggestBox, bool isPopupOpen); static bool IsPopupOpenDown(const winrt::AutoSuggestBox& autoSuggestBox); - static winrt::IInspectable ResourceLookup(const winrt::Control& control, const winrt::IInspectable& key); }; class AutoSuggestEventRevokers diff --git a/dev/ComboBox/ComboBoxHelper.cpp b/dev/ComboBox/ComboBoxHelper.cpp index 7cc89c6c6c..f8520f5c04 100644 --- a/dev/ComboBox/ComboBoxHelper.cpp +++ b/dev/ComboBox/ComboBoxHelper.cpp @@ -6,6 +6,7 @@ #include "ComboBoxHelper.h" #include "DispatcherHelper.h" #include "CornerRadiusFilterConverter.h" +#include "ResourceAccessor.h" static constexpr auto c_popupBorderName = L"PopupBorder"sv; static constexpr auto c_editableTextName = L"EditableText"sv; @@ -93,8 +94,8 @@ void ComboBoxHelper::UpdateCornerRadius(const winrt::ComboBox& comboBox, bool is { if (comboBox.IsEditable()) { - auto textBoxRadius = unbox_value(ResourceLookup(comboBox, box_value(c_controlCornerRadiusKey))); - auto popupRadius = unbox_value(ResourceLookup(comboBox, box_value(c_overlayCornerRadiusKey))); + auto textBoxRadius = unbox_value(ResourceAccessor::ResourceLookup(comboBox, box_value(c_controlCornerRadiusKey))); + auto popupRadius = unbox_value(ResourceAccessor::ResourceLookup(comboBox, box_value(c_overlayCornerRadiusKey))); if (winrt::IControl7 comboBoxControl7 = comboBox) { @@ -149,8 +150,3 @@ bool ComboBoxHelper::IsPopupOpenDown(const winrt::ComboBox& comboBox) } return verticalOffset > 0; } - -winrt::IInspectable ComboBoxHelper::ResourceLookup(const winrt::Control& control, const winrt::IInspectable& key) -{ - return control.Resources().HasKey(key) ? control.Resources().Lookup(key) : winrt::Application::Current().Resources().TryLookup(key); -} diff --git a/dev/ComboBox/ComboBoxHelper.h b/dev/ComboBox/ComboBoxHelper.h index 42243471c3..bb47f2750e 100644 --- a/dev/ComboBox/ComboBoxHelper.h +++ b/dev/ComboBox/ComboBoxHelper.h @@ -25,7 +25,6 @@ class ComboBoxHelper static void UpdateCornerRadius(const winrt::ComboBox& comboBox, bool isDropDownOpen); static bool IsPopupOpenDown(const winrt::ComboBox& comboBox); - static winrt::IInspectable ResourceLookup(const winrt::Control& control, const winrt::IInspectable& key); }; class ComboBoxDropDownEventRevokers diff --git a/dev/Generated/TabViewItemTemplateSettings.properties.cpp b/dev/Generated/TabViewItemTemplateSettings.properties.cpp index 361ed9b514..b2f68f9a09 100644 --- a/dev/Generated/TabViewItemTemplateSettings.properties.cpp +++ b/dev/Generated/TabViewItemTemplateSettings.properties.cpp @@ -14,6 +14,8 @@ namespace winrt::Microsoft::UI::Xaml::Controls #include "TabViewItemTemplateSettings.g.cpp" GlobalDependencyProperty TabViewItemTemplateSettingsProperties::s_IconElementProperty{ nullptr }; +GlobalDependencyProperty TabViewItemTemplateSettingsProperties::s_LeftInsetRadiusMarginProperty{ nullptr }; +GlobalDependencyProperty TabViewItemTemplateSettingsProperties::s_RightInsetRadiusMarginProperty{ nullptr }; TabViewItemTemplateSettingsProperties::TabViewItemTemplateSettingsProperties() { @@ -33,11 +35,35 @@ void TabViewItemTemplateSettingsProperties::EnsureProperties() ValueHelper::BoxedDefaultValue(), nullptr); } + if (!s_LeftInsetRadiusMarginProperty) + { + s_LeftInsetRadiusMarginProperty = + InitializeDependencyProperty( + L"LeftInsetRadiusMargin", + winrt::name_of(), + winrt::name_of(), + false /* isAttached */, + ValueHelper::BoxedDefaultValue(), + nullptr); + } + if (!s_RightInsetRadiusMarginProperty) + { + s_RightInsetRadiusMarginProperty = + InitializeDependencyProperty( + L"RightInsetRadiusMargin", + winrt::name_of(), + winrt::name_of(), + false /* isAttached */, + ValueHelper::BoxedDefaultValue(), + nullptr); + } } void TabViewItemTemplateSettingsProperties::ClearProperties() { s_IconElementProperty = nullptr; + s_LeftInsetRadiusMarginProperty = nullptr; + s_RightInsetRadiusMarginProperty = nullptr; } void TabViewItemTemplateSettingsProperties::IconElement(winrt::IconElement const& value) @@ -49,3 +75,23 @@ winrt::IconElement TabViewItemTemplateSettingsProperties::IconElement() { return ValueHelper::CastOrUnbox(static_cast(this)->GetValue(s_IconElementProperty)); } + +void TabViewItemTemplateSettingsProperties::LeftInsetRadiusMargin(winrt::Thickness const& value) +{ + static_cast(this)->SetValue(s_LeftInsetRadiusMarginProperty, ValueHelper::BoxValueIfNecessary(value)); +} + +winrt::Thickness TabViewItemTemplateSettingsProperties::LeftInsetRadiusMargin() +{ + return ValueHelper::CastOrUnbox(static_cast(this)->GetValue(s_LeftInsetRadiusMarginProperty)); +} + +void TabViewItemTemplateSettingsProperties::RightInsetRadiusMargin(winrt::Thickness const& value) +{ + static_cast(this)->SetValue(s_RightInsetRadiusMarginProperty, ValueHelper::BoxValueIfNecessary(value)); +} + +winrt::Thickness TabViewItemTemplateSettingsProperties::RightInsetRadiusMargin() +{ + return ValueHelper::CastOrUnbox(static_cast(this)->GetValue(s_RightInsetRadiusMarginProperty)); +} diff --git a/dev/Generated/TabViewItemTemplateSettings.properties.h b/dev/Generated/TabViewItemTemplateSettings.properties.h index 2d6cba447b..1320115997 100644 --- a/dev/Generated/TabViewItemTemplateSettings.properties.h +++ b/dev/Generated/TabViewItemTemplateSettings.properties.h @@ -12,9 +12,19 @@ class TabViewItemTemplateSettingsProperties void IconElement(winrt::IconElement const& value); winrt::IconElement IconElement(); + void LeftInsetRadiusMargin(winrt::Thickness const& value); + winrt::Thickness LeftInsetRadiusMargin(); + + void RightInsetRadiusMargin(winrt::Thickness const& value); + winrt::Thickness RightInsetRadiusMargin(); + static winrt::DependencyProperty IconElementProperty() { return s_IconElementProperty; } + static winrt::DependencyProperty LeftInsetRadiusMarginProperty() { return s_LeftInsetRadiusMarginProperty; } + static winrt::DependencyProperty RightInsetRadiusMarginProperty() { return s_RightInsetRadiusMarginProperty; } static GlobalDependencyProperty s_IconElementProperty; + static GlobalDependencyProperty s_LeftInsetRadiusMarginProperty; + static GlobalDependencyProperty s_RightInsetRadiusMarginProperty; static void EnsureProperties(); static void ClearProperties(); diff --git a/dev/ResourceHelper/ResourceAccessor.cpp b/dev/ResourceHelper/ResourceAccessor.cpp index 32e6f17fad..86cfab777f 100644 --- a/dev/ResourceHelper/ResourceAccessor.cpp +++ b/dev/ResourceHelper/ResourceAccessor.cpp @@ -45,4 +45,9 @@ winrt::LoadedImageSurface ResourceAccessor::GetImageSurface(const wstring_view & } }(); return winrt::LoadedImageSurface::StartLoadFromUri(imageUri, imageSize); -} \ No newline at end of file +} + +winrt::IInspectable ResourceAccessor::ResourceLookup(const winrt::Control& control, const winrt::IInspectable& key) +{ + return control.Resources().HasKey(key) ? control.Resources().Lookup(key) : winrt::Application::Current().Resources().TryLookup(key); +} diff --git a/dev/ResourceHelper/ResourceAccessor.h b/dev/ResourceHelper/ResourceAccessor.h index da2b90b066..b830aee39e 100644 --- a/dev/ResourceHelper/ResourceAccessor.h +++ b/dev/ResourceHelper/ResourceAccessor.h @@ -25,6 +25,7 @@ class ResourceAccessor sealed public: static winrt::hstring GetLocalizedStringResource(const wstring_view &resourceName); static winrt::LoadedImageSurface GetImageSurface(const wstring_view &assetName, winrt::Size imageSize); + static winrt::IInspectable ResourceLookup(const winrt::Control& control, const winrt::IInspectable& key); static bool IsResourceIdNull(ResourceIdType resourceId) { diff --git a/dev/TabView/InteractionTests/TabViewTests.cs b/dev/TabView/InteractionTests/TabViewTests.cs index 8b69c266c7..8cb28a8792 100644 --- a/dev/TabView/InteractionTests/TabViewTests.cs +++ b/dev/TabView/InteractionTests/TabViewTests.cs @@ -118,7 +118,7 @@ public void TabSizeAndScrollButtonsTest() { using (var setup = new TestSetupHelper("TabView Tests")) { - UIObject smallerTab = FindElement.ByName("FirstTab"); + UIObject smallerTab = FindElement.ByName("SecondTab"); UIObject largerTab = FindElement.ByName("LongHeaderTab"); FindElement.ByName