Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PipsPager: apply different pip sizes for different orientations #4607

Merged
merged 10 commits into from
Apr 1, 2021
Merged

PipsPager: apply different pip sizes for different orientations #4607

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
094ecbe
add button orientation size change
beervoley Mar 22, 2021
919a583
update automation peer
beervoley Mar 22, 2021
0205c77
remove one space
beervoley Mar 22, 2021
a27cc43
update tests
beervoley Mar 22, 2021
ff5fba3
try to fix tests
beervoley Mar 22, 2021
cc01b03
try to fix tests 2
beervoley Mar 22, 2021
7891cd2
attempt to fix tests
beervoley Mar 23, 2021
b7285b2
Update tests and address PR comments
beervoley Mar 24, 2021
73b7a8c
merge master
beervoley Mar 31, 2021
4f0d47a
Merge remote-tracking branch 'origin' into user/vsiliush/pips-pager-f…
beervoley Apr 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions dev/PipsPager/InteractionTests/PipsPagerTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
using Windows.UI.Xaml.Tests.MUXControls.InteractionTests.Infra;
using Windows.UI.Xaml.Tests.MUXControls.InteractionTests.Common;
using Common;
using Microsoft.Windows.Apps.Test.Foundation.Controls;
#if USING_TAEF
using WEX.TestExecution;
using WEX.TestExecution.Markup;
Expand Down Expand Up @@ -315,5 +316,51 @@ public void KeyboardPageSelectTest()
VerifySelectedPageIndex(2);
}
}
[TestMethod]
[TestProperty("TestSuite", "F")]
public void PipSizeWithDifferentOrientationsTest()
{
using (var setup = new TestSetupHelper("PipsPager Tests"))
{
Button getButtonSizesButton = FindElement.ByName<Button>("GetPipsPagersButtonSizes");
beervoley marked this conversation as resolved.
Show resolved Hide resolved
getButtonSizesButton.InvokeAndWait();

TextBlock horizontalOrientationPipsPagerButtonWidth = FindElement.ByName<TextBlock>("HorizontalOrientationPipsPagerButtonWidth");
TextBlock horizontalOrientationPipsPagerButtonHeight = FindElement.ByName<TextBlock>("HorizontalOrientationPipsPagerButtonHeight");

TextBlock verticalOrientationPipsPagerButtonWidth = FindElement.ByName<TextBlock>("VerticalOrientationPipsPagerButtonWidth");
TextBlock verticalOrientationPipsPagerButtonHeight = FindElement.ByName<TextBlock>("VerticalOrientationPipsPagerButtonHeight");

Verify.AreEqual("12", horizontalOrientationPipsPagerButtonWidth.DocumentText);
Verify.AreEqual("20", horizontalOrientationPipsPagerButtonHeight.DocumentText);
Verify.AreEqual("20", verticalOrientationPipsPagerButtonWidth.DocumentText);
Verify.AreEqual("12", verticalOrientationPipsPagerButtonHeight.DocumentText);
}
}

[TestMethod]
[TestProperty("TestSuite", "F")]
public void PipSizeAfterOrientationChangeTest()
{
using (var setup = new TestSetupHelper("PipsPager Tests"))
{
Button getButtonSizesButton = FindElement.ByName<Button>("GetPipsPagersButtonSizes");
getButtonSizesButton.InvokeAndWait();

TextBlock horizontalOrientationPipsPagerButtonWidth = FindElement.ByName<TextBlock>("HorizontalOrientationPipsPagerButtonWidth");
TextBlock horizontalOrientationPipsPagerButtonHeight = FindElement.ByName<TextBlock>("HorizontalOrientationPipsPagerButtonHeight");
Verify.AreEqual("12", horizontalOrientationPipsPagerButtonWidth.DocumentText);
Verify.AreEqual("20", horizontalOrientationPipsPagerButtonHeight.DocumentText);

elements = new PipsPagerElements();
SetOrientation(Microsoft.Windows.Apps.Test.Automation.OrientationType.Vertical);
VerifyOrientationChanged(Microsoft.Windows.Apps.Test.Automation.OrientationType.Vertical);

getButtonSizesButton.InvokeAndWait();

Verify.AreEqual("20", horizontalOrientationPipsPagerButtonWidth.DocumentText);
Verify.AreEqual("12", horizontalOrientationPipsPagerButtonHeight.DocumentText);
}
}
}
}
111 changes: 86 additions & 25 deletions dev/PipsPager/PipsPager.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,19 @@ constexpr auto c_nextPageButtonName = L"NextPageButton"sv;
constexpr auto c_pipsPagerRepeaterName = L"PipsPagerItemsRepeater"sv;
constexpr auto c_pipsPagerScrollViewerName = L"PipsPagerScrollViewer"sv;

constexpr auto c_pipsPagerButtonWidthPropertyName = L"PipsPagerButtonWidth"sv;
constexpr auto c_pipsPagerButtonHeightPropertyName = L"PipsPagerButtonHeight"sv;
constexpr auto c_pipsPagerVerticalOrientationButtonWidthPropertyName = L"PipsPagerVerticalOrientationButtonWidth"sv;
constexpr auto c_pipsPagerVerticalOrientationButtonHeightPropertyName = L"PipsPagerVerticalOrientationButtonHeight"sv;

constexpr auto c_pipsPagerHorizontalOrientationButtonWidthPropertyName = L"PipsPagerHorizontalOrientationButtonWidth"sv;
constexpr auto c_pipsPagerHorizontalOrientationButtonHeightPropertyName = L"PipsPagerHorizontalOrientationButtonHeight"sv;

constexpr auto c_pipsPagerHorizontalOrientationVisualState = L"HorizontalOrientationView"sv;
constexpr auto c_pipsPagerVerticalOrientationVisualState = L"VerticalOrientationView"sv;

constexpr auto c_pipsPagerButtonVerticalOrientationVisualState = L"VerticalOrientation"sv;
constexpr auto c_pipsPagerButtonHorizontalOrientationVisualState = L"HorizontalOrientation"sv;


PipsPager::PipsPager()
{
__RP_Marker_ClassById(RuntimeProfiler::ProfId_PipsPager);
Expand Down Expand Up @@ -116,7 +123,7 @@ void PipsPager::OnApplyTemplate()

void PipsPager::RaiseSelectedIndexChanged()
{
const auto args = winrt::make_self<PipsPagerSelectedIndexChangedEventArgs>(m_lastSelectedPageIndex, SelectedPageIndex());
const auto args = winrt::make_self<PipsPagerSelectedIndexChangedEventArgs>();
beervoley marked this conversation as resolved.
Show resolved Hide resolved
m_selectedIndexChangedEventSource(*this, *args);
}

Expand All @@ -127,15 +134,24 @@ winrt::Size PipsPager::GetDesiredPipSize(const winrt::Style& style) {
{
if (auto const element = itemTemplate.LoadContent().try_as<winrt::FrameworkElement>())
{
element.Style(style);
ApplyStyleToPipAndUpdateOrientation(element, style);
element.Measure({ std::numeric_limits<float>::infinity(), std::numeric_limits<float>::infinity() });
return element.DesiredSize();
}
}
}
/* Extract default sizes and return in case the code above fails */
auto pipHeight = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerButtonHeightPropertyName)));
auto pipWidth = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerButtonWidthPropertyName)));
double pipHeight;
beervoley marked this conversation as resolved.
Show resolved Hide resolved
double pipWidth;
if (Orientation() == winrt::Orientation::Horizontal)
{
pipHeight = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerVerticalOrientationButtonHeightPropertyName)));
pipWidth = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerVerticalOrientationButtonWidthPropertyName)));
}
else
{
pipHeight = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerHorizontalOrientationButtonHeightPropertyName)));
pipWidth = unbox_value<double>(ResourceAccessor::ResourceLookup(*this, box_value(c_pipsPagerHorizontalOrientationButtonWidthPropertyName)));
}
return { static_cast<float>(pipWidth), static_cast<float>(pipHeight) };
}

Expand Down Expand Up @@ -259,14 +275,14 @@ void PipsPager::UpdateSelectedPip(const int index) {
if (const auto repeater = m_pipsPagerRepeater.get())
{
repeater.UpdateLayout();
if (const auto element = repeater.TryGetElement(m_lastSelectedPageIndex).try_as<winrt::Button>())
if (const auto pip = repeater.TryGetElement(m_lastSelectedPageIndex).try_as<winrt::Button>())
beervoley marked this conversation as resolved.
Show resolved Hide resolved
{
element.Style(NormalPipStyle());
ApplyStyleToPipAndUpdateOrientation(pip, NormalPipStyle());
}
if (const auto element = repeater.GetOrCreateElement(index).try_as<winrt::Button>())
if (const auto pip = repeater.GetOrCreateElement(index).try_as<winrt::Button>())
{
element.Style(SelectedPipStyle());
ScrollToCenterOfViewport(element, index);
ApplyStyleToPipAndUpdateOrientation(pip, SelectedPipStyle());
ScrollToCenterOfViewport(pip, index);
}
}
}
Expand Down Expand Up @@ -348,21 +364,18 @@ void PipsPager::UpdatePipsItems(const int numberOfPages, int maxVisualIndicators

void PipsPager::OnElementPrepared(winrt::ItemsRepeater sender, winrt::ItemsRepeaterElementPreparedEventArgs args)
{
if (auto const element = args.Element())
if (auto const element = args.Element().try_as<winrt::FrameworkElement>())
{
if (const auto pip = element.try_as<winrt::Button>())
{
auto const index = args.Index();
if (index != SelectedPageIndex())
{
pip.Style(NormalPipStyle());
}
auto const index = args.Index();
auto const style = index == SelectedPageIndex() ? SelectedPipStyle() : NormalPipStyle();
ApplyStyleToPipAndUpdateOrientation(element, style);

// Narrator says: Page 5, Button 5 of 30. Is it expected behavior?
winrt::AutomationProperties::SetName(pip, ResourceAccessor::GetLocalizedStringResource(SR_PipsPagerPageText) + L" " + winrt::to_hstring(index + 1));
winrt::AutomationProperties::SetPositionInSet(pip, index + 1);
winrt::AutomationProperties::SetSizeOfSet(pip, NumberOfPages());
winrt::AutomationProperties::SetName(element, ResourceAccessor::GetLocalizedStringResource(SR_PipsPagerPageText) + L" " + winrt::to_hstring(index + 1));
winrt::AutomationProperties::SetPositionInSet(element, index + 1);
winrt::AutomationProperties::SetSizeOfSet(element, NumberOfPages());

if (const auto pip = element.try_as<winrt::Button>())
beervoley marked this conversation as resolved.
Show resolved Hide resolved
{
auto pciRevokers = winrt::make_self<PipsPagerViewItemRevokers>();
pciRevokers->clickRevoker = pip.Click(winrt::auto_revoke,
[this, index](auto const& sender, auto const& args)
Expand Down Expand Up @@ -460,9 +473,49 @@ void PipsPager::OnOrientationChanged()
{
winrt::VisualStateManager::GoToState(*this, c_pipsPagerVerticalOrientationVisualState, false);
}
if (const auto repeater = m_pipsPagerRepeater.get())
{
if (const auto itemsSourceView = repeater.ItemsSourceView())
{
const auto itemCount = itemsSourceView.Count();
for (int i = 0; i < itemCount; i++)
{
if (const auto pip = repeater.TryGetElement(i).try_as<winrt::Control>())
{
UpdatePipOrientation(pip);
}
}
}
}
m_defaultPipSize = GetDesiredPipSize(NormalPipStyle());
m_selectedPipSize = GetDesiredPipSize(SelectedPipStyle());
SetScrollViewerMaxSize();
UpdateSelectedPip(SelectedPageIndex());
if (const auto selectedPip = GetSelectedItem())
{
ScrollToCenterOfViewport(selectedPip, SelectedPageIndex());
}
}

void PipsPager::ApplyStyleToPipAndUpdateOrientation(const winrt::FrameworkElement& pip, const winrt::Style& style)
{
pip.Style(style);
if (const auto control = pip.try_as<winrt::Control>())
{
control.ApplyTemplate();
beervoley marked this conversation as resolved.
Show resolved Hide resolved
UpdatePipOrientation(control);
}
}

void PipsPager::UpdatePipOrientation(const winrt::Control& pip)
{
if (Orientation() == winrt::Orientation::Horizontal)
{
winrt::VisualStateManager::GoToState(pip, c_pipsPagerButtonHorizontalOrientationVisualState, false);
}
else
{
winrt::VisualStateManager::GoToState(pip, c_pipsPagerButtonVerticalOrientationVisualState, false);
}
}

void PipsPager::OnNavigationButtonVisibilityChanged(const ButtonVisibility visibility, const wstring_view& collapsedStateName, const wstring_view& disabledStateName) {
Expand Down Expand Up @@ -670,6 +723,14 @@ void PipsPager::OnPropertyChanged(const winrt::DependencyPropertyChangedEventArg
}
}

winrt::UIElement PipsPager::GetSelectedItem() {
if (auto const repeater = m_pipsPagerRepeater.get())
{
return repeater.TryGetElement(SelectedPageIndex());
}
return nullptr;
}

winrt::AutomationPeer PipsPager::OnCreateAutomationPeer()
{
return winrt::make<PipsPagerAutomationPeer>(*this);
Expand Down
5 changes: 4 additions & 1 deletion dev/PipsPager/PipsPager.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ class PipsPager :
const wstring_view& disabledStateName);
void OnOrientationChanged();

winrt::UIElement GetSelectedItem();

/* Dependency property for pip buttons revokers */
GlobalDependencyProperty s_pipButtonHandlersProperty;

Expand All @@ -66,7 +68,8 @@ class PipsPager :
void ScrollToCenterOfViewport(const winrt::UIElement sender, const int index);
double CalculateScrollViewerSize(const double defaultPipSize, const double selectedPipSize, const int numberOfPages, int maxVisualIndicators);
void UpdateSelectedPip(const int index);

void UpdatePipOrientation(const winrt::Control& pip);
void ApplyStyleToPipAndUpdateOrientation(const winrt::FrameworkElement& pip, const winrt::Style& style);
/* Eventing */
void RaiseSelectedIndexChanged();

Expand Down
15 changes: 12 additions & 3 deletions dev/PipsPager/PipsPager.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,20 @@

<Button x:Name="PreviousPageButton"
ToolTipService.ToolTip="{Binding ElementName=PreviousPageButton, Path=(AutomationProperties.Name)}"
Style="{TemplateBinding PreviousButtonStyle}"/>
Style="{TemplateBinding PreviousButtonStyle}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />

<ScrollViewer x:Name="PipsPagerScrollViewer"
VerticalScrollBarVisibility="Hidden"
VerticalScrollMode="Disabled"
HorizontalScrollBarVisibility="Hidden"
HorizontalScrollMode="Disabled">
HorizontalScrollMode="Disabled"
IsHorizontalScrollChainingEnabled="False"
IsVerticalScrollChainingEnabled="False"
HorizontalAlignment="Center"
VerticalAlignment="Center"
>
<muxc:ItemsRepeater x:Name="PipsPagerItemsRepeater"
ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PipsPagerItems}">
<muxc:ItemsRepeater.Layout>
Expand All @@ -110,7 +117,9 @@

<Button x:Name="NextPageButton"
ToolTipService.ToolTip="{Binding ElementName=NextPageButton, Path=(AutomationProperties.Name)}"
Style="{TemplateBinding NextButtonStyle}"/>
Style="{TemplateBinding NextButtonStyle}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
Expand Down
10 changes: 8 additions & 2 deletions dev/PipsPager/PipsPagerAutomationPeer.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,17 @@ com_ptr<PipsPager> PipsPagerAutomationPeer::GetImpl()
return impl;
}

winrt::com_array<winrt::IInspectable> PipsPagerAutomationPeer::GetSelection()
winrt::com_array<winrt::Windows::UI::Xaml::Automation::Provider::IRawElementProviderSimple> PipsPagerAutomationPeer::GetSelection()
{
if (const auto pager = GetImpl())
{
return { winrt::box_value(pager->SelectedPageIndex()) };
if (auto pip = pager->GetSelectedItem())
{
if (auto peer = winrt::FrameworkElementAutomationPeer::CreatePeerForElement(pip))
{
return { ProviderFromPeer(peer) };
}
}
}
return {};
}
Expand Down
2 changes: 1 addition & 1 deletion dev/PipsPager/PipsPagerAutomationPeer.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ class PipsPagerAutomationPeer :
// ISelectionProvider
bool CanSelectMultiple() { return false; };
bool IsSelectionRequired() { return true; };
winrt::com_array<winrt::IInspectable> GetSelection();
winrt::com_array<winrt::Windows::UI::Xaml::Automation::Provider::IRawElementProviderSimple> GetSelection();

void RaiseSelectionChanged(double oldIndex, double newIndex);

Expand Down
13 changes: 1 addition & 12 deletions dev/PipsPager/PipsPagerSelectedIndexChangedEventArgs.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,4 @@

class PipsPagerSelectedIndexChangedEventArgs :
public winrt::implementation::PipsPagerSelectedIndexChangedEventArgsT<PipsPagerSelectedIndexChangedEventArgs>
{
public:
PipsPagerSelectedIndexChangedEventArgs(const int previousIndex, const int newIndex) :
m_previousPageIndex(previousIndex), m_newPageIndex(newIndex) {};

int NewPageIndex() { return m_newPageIndex; };
int PreviousPageIndex() { return m_previousPageIndex; };

private:
int m_newPageIndex = -1;
int m_previousPageIndex = -1;
};
{};
25 changes: 22 additions & 3 deletions dev/PipsPager/PipsPager_themeresources.xaml
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,18 @@
</ResourceDictionary.ThemeDictionaries>

<!-- PipsPager Resources -->

<!-- Deprecated Resources: might be removed later -->
<x:Double x:Key="PipsPagerButtonWidth">20</x:Double>
<x:Double x:Key="PipsPagerButtonHeight">12</x:Double>
<!-- Deprecated Resources: might be removed later -->

<x:Double x:Key="PipsPagerHorizontalOrientationButtonWidth">12</x:Double>
<x:Double x:Key="PipsPagerHorizontalOrientationButtonHeight">20</x:Double>

<x:Double x:Key="PipsPagerVerticalOrientationButtonWidth">20</x:Double>
<x:Double x:Key="PipsPagerVerticalOrientationButtonHeight">12</x:Double>


<Thickness x:Key="PipsPagerButtonBorderThickness">1</Thickness>
<Thickness x:Key="PipsPagerNavigationButtonBorderThickness">1</Thickness>
Expand Down Expand Up @@ -216,8 +226,6 @@
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin" Value="0" />
<Setter Property="Width" Value="{StaticResource PipsPagerButtonWidth}" />
<Setter Property="Height" Value="{StaticResource PipsPagerButtonHeight}" />
<Setter Property="Content" Value="{StaticResource PipsPagerNormalGlyph}" />
<Setter Property="FontSize" Value="{StaticResource PipsPagerNormalGlyphFontSize}" />
<Setter Property="Template">
Expand All @@ -227,7 +235,9 @@
x:Name="RootGrid"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
BorderThickness="{TemplateBinding BorderThickness}"
Width="{StaticResource PipsPagerHorizontalOrientationButtonWidth}"
Height="{StaticResource PipsPagerHorizontalOrientationButtonHeight}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
Expand Down Expand Up @@ -277,6 +287,15 @@
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="OrientationStates">
<VisualState x:Name="HorizontalOrientation"/>
<VisualState x:Name="VerticalOrientation">
<VisualState.Setters>
<Setter Target="RootGrid.Width" Value="{ThemeResource PipsPagerVerticalOrientationButtonWidth}"/>
<Setter Target="RootGrid.Height" Value="{ThemeResource PipsPagerVerticalOrientationButtonHeight}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<FontIcon
x:Name="Content"
Expand Down
Loading