UWP: Rolling Uploader and uwppivotheader

UWP: Rolling Uploader and uwppivotheader

In UWP development, ghost is really a fascinating and hateful control. To implement some effects of scrolling headers, some bosses even removed the original Header and used a ListView or ListBox to draw their own headers, but this would make the control very complicated.

Since the handler is a templated control, there should be a way to directly scroll the Header.

Post first:

First, customize the custom Style from generic. xaml Lookup (The location should be in C: \ Program Files (x86) \ Windows Kits \ 10 \ DesignTime \ CommonConfiguration \ Neutral \ UAP \ (your SDK version) \ Generic ), you can also right-click the xaml designer and edit the Style.

Find <VisualStateGroup x: Name = "NavigationButtonsVisibility"> in the Style, to </VisualStateGroup>, including the two rows, comment out all, you can cancel the buttons on both sides.

For analysis, there are two statuses:

When the HeaderPanel width is smaller than the padding width, that is, when Headers does not overflow, the Header position is fixed;

When the HeaderPanel width is greater than the padding width, that is, when Headers overflows, the selected Header is moved to the first place.

The Style is controlled by the VisualStateGroup HeaderStates. Therefore, comment out the VisualStateGroup HeaderStates, which cancels the state conversion between dynamic headers and fixed headers.

Find <inclutheaderpanel x: Name = "Header"> to </inclutheaderpanel> and comment out all. This is a dynamic Header. We only need static headers.

Then, change the Visibility of <inclutheaderpanel x: Name = "StaticHeader"> to Visible, so that the static Header is used by default and will not be moved even if the Headers overflows.

Finally, set a layer of ScrollViewer outside the Grid of the PivotHeaderPanel, and the code will look like the following:

 

<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollMode="Disabled" >    <Grid Background="{ThemeResource PivotHeaderBackground}">        <Grid.RenderTransform>            <CompositeTransform x:Name="HeaderOffsetTranslateTransform" />        </Grid.RenderTransform>        <PivotHeaderPanel x:Name="StaticHeader" Visibility="Visible" >            <PivotHeaderPanel.RenderTransform>                <CompositeTransform x:Name="StaticHeaderTranslateTransform"/>            </PivotHeaderPanel.RenderTransform>        </PivotHeaderPanel>        <!--<PivotHeaderPanel x:Name="Header" >            <PivotHeaderPanel.RenderTransform>                <CompositeTransform x:Name="HeaderTranslateTransform"/>            </PivotHeaderPanel.RenderTransform>        </PivotHeaderPanel>-->    </Grid></ScrollViewer>

 

Run it and try to see if the Header can be rolled around with the scroll wheel.

 

This article is now complete. However, some may ask why your pipeline has the following Focus and I don't have it? Next, let's look:

There is no Header-related VisualState from the custom Style pasted by The xaml designer. Does Microsoft forget to write the VisualState such as Selected and Unselected? Actually not.

If you often deal with ItemsControl, you will find that controls such as ListView and GridView have an ItemContainerStyle attribute to control the Style of the Items container. In general, visual states such as Select are in this field, however, the detail does not provide the ItemContainerStyle of the Header?

In fact, inclutheaderitemcontainerstyle is also available, but Microsoft does not directly provide it to us. You need to manually copy it from the file and make it take effect in some unconventional ways.

First, open generic. xaml and search for inclutheaderitem globally. You can find the following section:

Copy this section and you have three options:

Note: Do not set x: Key and x: Name for the final Style with BaseOn in 1, 2, and 3! (If Style resources of x: Key and x: Name are not set, all child controls matching the TargetType will be applied to them .)

In this way, we can customize the custom theaderitemcontainerstyle.

Find <VisualStateGroup x: Name = "SelectionStates"> and add the following paragraphs to the Selected, SelectedPointerOver, and SelectedPressed Storyboard:

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusPipe" Storyboard.TargetProperty="Visibility">    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /></ObjectAnimationUsingKeyFrames>

In this way, the following Focus can be displayed when the Header is selected.