Disabling swipe on Pivot Control using IsLocked property is hiding PivotItem Headers

0
votes

I am trying to disable the swipe on a Pivot Control. Looking around on here and Google, it would seem that using the IsLocked property is the way to go. The problem I am getting is that if I set the property to True in the xaml then all the other PivotItem headers disappear.

Now I think I can still work with this but if I then set the IsLocked to false, change the PivotControl. SelectedIndex to say 1, wait for the LoadedPivotItem event to fire and then set IsLocked to true again the header disappears again.

Here is the code.

Note: PagePivot is a PivotControl

private void appbarNext_Click(object sender, System.EventArgs e)
{
    // Unlock the PivotControl
    PagePivot.IsLocked = false;

    // If we are at the first item then move to the next - (just testing everything out)
    if(PagePivot.SelectedIndex == 0)
    {
       PagePivot.SelectedIndex = 1;
    }            
} 

private void PagePivot_LoadedPivotItem(object sender, PivotItemEventArgs e)
{
    // Relock the PivotControl - this causes the headers to disappear again    
    PagePivot.IsLocked = true;
}

As I say, everything above works but as soon as I set the IsLocked = true, the headers disappear. I did look into setting IsHitTestVisable to false but then none of the controls in the pivot items work.

Screenshots:

1. On First Load, PivotControl Is locked, First item header showing.
2. Changed Selected Item, PivotControl Is locked after item has loaded.

4
c#wpfxamlwindows-phone-8
pls share screenshots – techloverr
@techloverr added screenshots. As you can see the first header is shown but once I switch to the next item the header is hidden. I imagine this is to do with the IsLocked property because during the transition from one pivotitem to the next the header is there but once IsLocked is set it disappears. – Gaz83
Did you find a solution, I am having the same problem as you! I believe it has to do with locking it before the animation of the headers has completed but I am not positive. I have tried to find an event in the Pivot Control to wait until the animation is complete to relock the pivot. I don't understand why the selected pivot cannot be changed programmatically when it is locked. – user2704766
No I haven't found a solution but I agree with what you say in that it's related to locking before the header animation completes – Gaz83

4 Answers

6
votes

For UWP I'd to override the pivot style and there is an element Pivot Panel so if we disable ManipulationMode=None swipe will be disabled and it'll work more like tabs.

<PivotPanel x:Name="Panel" VerticalAlignment="Stretch" ManipulationMode="None">
1
votes

Just simply is not enough time to update headers. This example may help

    Home_Pivot.IsLocked = false; 
    await Task.Delay(TimeSpan.FromMilliseconds(200));//Of course you can reduce the time
    SelectedPivotItem = i;//or Home_Pivot.SelectedIndex || Home_Pivot.SelectedItem
    Home_Pivot.IsLocked = true;
0
votes

This is by design an you should consider to keep it like that. If the user is not allowed to swipe to an other pivot than what's the point displaying it. They will just get flustrated as they can see the other pivot item but the swipe doesn't work.

0
votes

If you bind to the Header property, there is a simple workaround.

It looks like locking the Pivot causes the header of the other items to be set to an empty string internally.

To restore the header, simply fire a change notification or reset its value.

/// simply reset the header; the header is bound to ViewModel.DisplayName
private void ResetHeader(ViewModel itemToReset)
{
    // either
    NotifyOfPropertyChange("DisplayName");

    // if the above isn't accessible, you can reset the header value
    var name = itemToReset.DisplayName;
    itemToReset.DisplayName = "";
    itemToReset.DisplayName = name;
}

So, after you let the user enter data or are finished showing info, restore the navigation and the reset the header:

// restore previous state
Pivot.IsLocked = false;
ResetHeader(Items[0]);