locked
The mess of the PIVOT control in Universal Windows RRS feed

  • General discussion

  • Dear Microsoft,

    Want to bring a little awareness about a control that was redesigned since Windows Phone 8.1: The PIVOT control. The underlying design of this control has serious issues, and i am facing these issues at this moment, while developing my Universal Windows Application that is targetted to run on Windows Mobile 10 and Windows 10.

    Suggest Microsoft investigates these issues and ensures that these get fixed. Reason: If not fixed, these workarounds will end-up in thousands of other Mobile application developers code, making it nearly impossible for Microsoft to reverse these errors.

    The issues with the PIVOT control are:

    Problem 1: It is not easy to change the background (color) of the PIVOT header section, while keeping the PIVOT content according the template. Complicated workarounds are required to accomplish this.

    Problem 2: It is not easy to increase the height of the PIVOT header controls only. Again, complicated workarounds are required to achieve this.

    Problem 3: It is not easy to change the color of the PIVOT header text.

    Let us tacle each one by one:

    Problem 1: The background color problem.

    Changing the background of a PIVOT header is not possible by default. First of all, you cannot select the PIVOT header, and redefining the PIVOT header in XAML with other controls may be an option, but seems to be a rather drastic solution for something simple.

    Found on the internet however a solution, which is by creating a new style in Blend of the PIVOT control, and then redefining it.

    One could end-up with XAML code like this (just pasting a section of the code):

                <Pivot.Resources>
                    <Style x:Key="PivotStyle" TargetType="Pivot">
                        <Setter Property="Margin" Value="0"/>
                        <Setter Property="Padding" Value="0"/>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="IsTabStop" Value="False"/>
                        <Setter Property="ItemsPanel">
                            <Setter.Value>
                                <ItemsPanelTemplate>
                                    <Grid/>
                                </ItemsPanelTemplate>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Pivot">
                                    <Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                                        <Grid.Resources>
                                            <Style x:Key="BaseContentControlStyle" TargetType="ContentControl">
                                                <Setter Property="FontFamily" Value="Segoe UI"/>
                                                <Setter Property="FontWeight" Value="SemiBold"/>
                                                <Setter Property="FontSize" Value="15"/>
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="ContentControl">
                                                            <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" OpticalMarginAlignment="TrimSideBearings" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                            <Style x:Key="TitleContentControlStyle" BasedOn="{StaticResource BaseContentControlStyle}" TargetType="ContentControl">
                                                <Setter Property="FontFamily" Value="{ThemeResource PivotTitleFontFamily}"/>
                                                <Setter Property="FontWeight" Value="{ThemeResource PivotTitleThemeFontWeight}"/>
                                                <Setter Property="FontSize" Value="{ThemeResource PivotTitleFontSize}"/>
                                            </Style>

    Within the style definition, you have now exposure to all the controls and panels from which the PIVOT is made off. One can change the background color in the following XAML panel statement:

    <PivotHeaderPanelx:Name="Header">

    Change this statement to:

    <PivotHeaderPanelx:Name="Header"Background="{TemplateBindingBorderBrush}">

    The templatebinding to Borderbrush will link the BorderBrush property you configure on the Pivot XAML statement with this PivotHeaderPanel control background. One disadvantage however is that on the Pivot XAML statement, you cannot edit the color using the Blend GUI. You'll have to cut-paste the color directly in the XAML text. For example, this code will set now the background of the Pivot Header to the color "Aqua", by setting the styled bound BorderBrush color.

    <Pivotx:Name="PVT_VocabularyTrainer"BorderBrush="Aqua">

    Clearly, this is a workaround, until somebody is able to identify a better way.

    Problem 2: The Pivot Height problem.

    Within the Pivot Style XAML, one can set the height of the PIVOT Header like this:

    <PivotHeaderPanelx:Name="Header"Background="{TemplateBindingBorderBrush}"Height="70">

    On top of the Background binding, one can set the Height. Why is setting the Height so important? Well, if you redefine the PIVOT Header with a data template, there is simply no way to redefine the Height of the header, until somebody proves otherwise... I invite the community to come up with alternative solutions, again, without having to REDEFINE the HeaderTemplate like this:

    <Pivot.HeaderTemplate>

    <DataTemplate>

    </DataTemplate>

    </Pivot.HeaderTemplate>

    Problem 3: Change the color of the Pivot Text.

    This one is really nasty!!! One CANNOT change simply the Pivot Header text COLOR!!! There are no properties foreseen.

    One must instead redefine for that PIVOT the Template.

    If you apply the same Header template to PivotItem in Windows Phone 8.1 XAML, you will find that there is a bug in the control. The inactive PivotItem Headers do not get opacity change applied. This is obviously a problem, if you do not want to do same SelectedIndex manipulation to change the color programatically for all the inactive PivotItem headers.

    Lucliky, there is a way to fix this. You can redefine the PivotHeaderForegroundUnselectedBrush and PivotHeaderForegroundSelectedBrush to the active and inactive colors of your choice.

    <SolidColorBrush
    x:Key="PivotHeaderForegroundUnselectedBrush"
    Color="#B3DCF1" />
    <SolidColorBrush
    x:Key="PivotHeaderForegroundSelectedBrush"
    Color="#3ab2e1" />

    Still trying to identify the correct method of achieving this and working properly.

    <Pivot.Resources>

    <SolidColorBrushx:Key="PivotHeaderForegroundUnselectedBrush"Color="#B3DCF1" />

    <SolidColorBrushx:Key="PivotHeaderForegroundSelectedBrush"Color="#3ab2e1" />

    Conclusion: What a mess. Why did Microsoft design the Pivot in this way?

    Sven


    Owning a NOKIA Lumia 1520 Windows Phone owner running Windows Mobile 10, and being proud of it.



    • Edited by Sven VdV Sunday, August 9, 2015 8:36 AM
    Sunday, August 9, 2015 8:26 AM

All replies

  • It seems that whilst trying to kill off the Pivot for RT it became a 2nd class citizen and whilst it now has a new lease of life, it has been built upon the RT version and does have a number of problems. I would also add that we should have a proper tab control too, building up a pivot is one thing but realistically it would reduce the friction if we had a dedicated tab control.

    http://pauliom.wordpress.com


    • Edited by pkr2000 Sunday, August 9, 2015 9:19 AM
    Sunday, August 9, 2015 9:19 AM