Updating ScrollViewer, FlipView, CalendarView, PipsPager to use carets (

#4376)
microsoft · Mar 15, 2021 · 471ea55 · 471ea55
1 parent a4c3714
commit 471ea55
Show file tree

Hide file tree

Showing 13 changed files with 85 additions and 170 deletions.
diff --git a/dev/CommonStyles/CalendarView_21h1_themeresources.xaml b/dev/CommonStyles/CalendarView_21h1_themeresources.xaml
diff --git a/dev/CommonStyles/CalendarView_themeresources.xaml b/dev/CommonStyles/CalendarView_themeresources.xaml
@@ -107,9 +107,6 @@
 
     <Style TargetType="CalendarView" BasedOn="{StaticResource CalendarViewRevealStyle}" />
 
-    <x:String x:Key="CalendarViewPreviousButtonCaretUp">&#xE0E4;</x:String>
-    <x:String x:Key="CalendarViewNextButtonCaretDown">&#xE0E5;</x:String>
-
     <Style x:Key="CalendarViewRevealStyle" TargetType="CalendarView">
         <Setter Property="FocusBorderBrush" Value="{ThemeResource CalendarViewFocusBorderBrush}" />
         <Setter Property="SelectedHoverBorderBrush" Value="{ThemeResource CalendarViewSelectedHoverBorderBrush}" />
@@ -460,8 +457,8 @@
                                     <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
                                 <Button x:Name="HeaderButton" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HeaderText}" IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HasMoreViews}" Style="{StaticResource NavigationButtonStyle}" Foreground="{TemplateBinding Foreground}" Padding="12,0,0,0" HorizontalContentAlignment="Left" />
-                                <Button x:Name="PreviousButton" Grid.Column="1" Content="{ThemeResource CalendarViewPreviousButtonCaretUp}" FontFamily="{ThemeResource SymbolThemeFontFamily}" IsTabStop="True" Padding="1" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Center" IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HasMoreContentBefore}" Style="{StaticResource NavigationButtonStyle}" />
-                                <Button x:Name="NextButton" Grid.Column="2" Content="{ThemeResource CalendarViewNextButtonCaretDown}" FontFamily="{ThemeResource SymbolThemeFontFamily}" IsTabStop="True" Padding="1" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Center" IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HasMoreContentAfter}" Style="{StaticResource NavigationButtonStyle}" />
+                                <Button x:Name="PreviousButton" Grid.Column="1" Content="&#xEDDB;" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="8" IsTabStop="True" Padding="1" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Center" IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HasMoreContentBefore}" Style="{StaticResource NavigationButtonStyle}" />
+                                <Button x:Name="NextButton" Grid.Column="2" Content="&#xEDDC;" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="8" IsTabStop="True" Padding="1" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Center" IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.HasMoreContentAfter}" Style="{StaticResource NavigationButtonStyle}" />
                             </Grid>
                             <Grid x:Name="Views" Grid.Row="1">
                                 <Grid.Clip>

diff --git a/dev/CommonStyles/CommonStyles.vcxitems b/dev/CommonStyles/CommonStyles.vcxitems
@@ -26,12 +26,6 @@
       <Type>ThemeResources</Type>
       <Priority>1</Priority>
     </Page>
-    <Page Include="$(MSBuildThisFileDirectory)Common_21h1_themeresources.xaml">
-      <ControlsResourcesVersion>Version2</ControlsResourcesVersion>
-      <Version>21H1</Version>
-      <Type>ThemeResources</Type>
-      <Priority>1</Priority>
-    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Common_themeresources_any.xaml">
       <ControlsResourcesVersion>Any</ControlsResourcesVersion>
       <Version>RS1</Version>
@@ -272,12 +266,6 @@
       <Version>RS1</Version>
       <Type>ThemeResources</Type>
     </Page>
-    <Page Include="$(MSBuildThisFileDirectory)CalendarView_21h1_themeresources.xaml">
-      <ControlsResourcesVersion>Version2</ControlsResourcesVersion>
-      <Version>21H1</Version>
-      <Type>ThemeResources</Type>
-    </Page>
-
     <Page Include="$(MSBuildThisFileDirectory)CheckBox_themeresources.xaml">
       <ControlsResourcesVersion>Version2</ControlsResourcesVersion>
       <Version>RS1</Version>

diff --git a/dev/CommonStyles/Common_21h1_themeresources.xaml b/dev/CommonStyles/Common_21h1_themeresources.xaml
diff --git a/dev/CommonStyles/Common_themeresources.xaml b/dev/CommonStyles/Common_themeresources.xaml
@@ -47,15 +47,71 @@
     <!-- DateTimeFlyoutBorderPadding is defined since RS5. set it here to ensure it's always defined. -->
     <Thickness x:Key="DateTimeFlyoutBorderPadding">0</Thickness>
 
-    <!-- Caret/Chevron Icons -->
-    <x:String x:Key="ScrollBarCaretLeft">&#xE0E2;</x:String>
-    <x:String x:Key="ScrollBarCaretRight">&#xE0E3;</x:String>
-    <x:String x:Key="ScrollBarCaretUp">&#xE0E4;</x:String>
-    <x:String x:Key="ScrollBarCaretDown">&#xE0E5;</x:String>
-
-    <x:String x:Key="FlipViewCaretLeft">&#xE0E2;</x:String>
-    <x:String x:Key="FlipViewCaretRight">&#xE0E3;</x:String>
-    <x:String x:Key="FlipViewCaretUp">&#xE0E4;</x:String>
-    <x:String x:Key="FlipViewCaretDown">&#xE0E5;</x:String>
-
+    <Style TargetType="LoopingSelector">
+        <Setter Property="ShouldLoop" Value="True" />
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+        <Setter Property="ItemTemplate">
+            <Setter.Value>
+                <DataTemplate>
+                    <StackPanel VerticalAlignment="Center">
+                        <TextBlock Text="{Binding PrimaryText}" FontFamily="{ThemeResource ContentControlThemeFontFamily}" />
+                    </StackPanel>
+                </DataTemplate>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Control">
+                    <Grid>
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UpButton" Storyboard.TargetProperty="Visibility">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DownButton" Storyboard.TargetProperty="Visibility">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                        <ScrollViewer x:Name="ScrollViewer"
+                            VerticalSnapPointsType="Mandatory"
+                            VerticalSnapPointsAlignment="Near"
+                            VerticalScrollBarVisibility="Hidden"
+                            HorizontalScrollMode="Disabled"
+                            ZoomMode="Disabled"
+                            Template="{StaticResource ScrollViewerScrollBarlessTemplate}" />
+                        <RepeatButton x:Name="UpButton"
+                            Content="&#xEDDB;"
+                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                            FontSize="8"
+                            Height="22"
+                            Padding="0"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Top"
+                            Visibility="Collapsed"
+                            Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
+                            Background="{ThemeResource LoopingSelectorButtonBackground}"
+                            IsTabStop="False" />
+                        <RepeatButton x:Name="DownButton"
+                            Content="&#xEDDC;"
+                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                            FontSize="8"
+                            Height="22"
+                            Padding="0"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Bottom"
+                            Visibility="Collapsed"
+                            Style="{StaticResource DateTimePickerFlyoutButtonStyle}"
+                            Background="{ThemeResource LoopingSelectorButtonBackground}"
+                            IsTabStop="False" />
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 </ResourceDictionary>
diff --git a/dev/CommonStyles/FlipView_themeresources.xaml b/dev/CommonStyles/FlipView_themeresources.xaml
@@ -153,7 +153,7 @@
                                         FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                         FontSize="12"
                                         Foreground="{ThemeResource FlipViewNextPreviousArrowForeground}"
-                                        Glyph="{ThemeResource FlipViewCaretRight}"
+                                        Glyph="&#xEDDA;"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         MirroredWhenRightToLeft="True"
@@ -202,7 +202,7 @@
                                         FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                         FontSize="12"
                                         Foreground="{ThemeResource FlipViewNextPreviousArrowForeground}"
-                                        Glyph="{ThemeResource FlipViewCaretLeft}"
+                                        Glyph="&#xEDD9;"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         MirroredWhenRightToLeft="True"
@@ -251,7 +251,7 @@
                                         FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                         FontSize="12"
                                         Foreground="{ThemeResource FlipViewNextPreviousArrowForeground}"
-                                        Glyph="{ThemeResource FlipViewCaretDown}"
+                                        Glyph="&#xEDDC;"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         UseLayoutRounding="False" />
@@ -299,7 +299,7 @@
                                         FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                         FontSize="12"
                                         Foreground="{ThemeResource FlipViewNextPreviousArrowForeground}"
-                                        Glyph="{ThemeResource FlipViewCaretUp}"
+                                        Glyph="&#xEDDB;"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
                                         UseLayoutRounding="False" />