I want to disable any of Pivot's Headers

Question

I want to disable a Pivot item's header according to the conditions.

<Pivot>
    <Pivot.Resources>
        <Style TargetType="PivotHeaderItem">
            <Setter Property="IsEnabled" Value="false"/>
        </Style>
    </Pivot.Resources>
    <PivotItem Header="Header1" IsEnabled = false>
        <!-- Something Content -->
    </PivotItem>
    <PivotItem Header="Header2">
        <!-- Something Content -->
    </PivotItem>
    <PivotItem Header="Header3">
        <!-- Something Content -->
    </PivotItem>
</Pivot>

<PivotItem IsEnabled = false>
- When I did this, the header and content of this PivotItem was disabled.
<Style TargetType="PivotHeaderItem"><Setter Property="IsEnabled" Value="true"/></Style>
- When I did this, all the headers were disabled.

I thought I should find the PivotHeaderItem in the Pivot and set isEnabled to false, but I can't find it.

What should I do?

When trying to reproduce, I am not even able to disable a PivotItem by setting IsEnabled = false. Could you maybe share a bit more of your code? — Leander
I have tried your code and I am still not able to disable the pivot items. I have experience with this being a thing, and always just removed the PivotItem from the Pivot when I wanted to disable it. What I also know is that the PivotHeader does not have an IsEnabled property. Could you maybe explain why you would only want to disable the header while keeping the content of the PivotItem enabled? — Leander

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2020-09-14T12:22:03

I thought I should find the PivotHeaderItem in the Pivot and set isEnabled to false, but I can't find it.

For your scenario, we suggest you implement Pivot with mvvm model and give class model a bool property to manage PivotHeaderItem. if you want to disable it you could hide it.

For example

<Pivot
    x:Name="MyPivot"
    Title="EMAIL"
    Visibility="Visible">
    <Pivot.ItemTemplate>
        <DataTemplate>
            <PivotItem>
                <Frame x:Name="PivotItemContent" />
            </PivotItem>
        </DataTemplate>
    </Pivot.ItemTemplate>

    <Pivot.HeaderTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding HeaderContent}" Visibility="{Binding IsEnable}" />           
        </DataTemplate>
    </Pivot.HeaderTemplate>
</Pivot>

public ObservableCollection<Model> Items = new ObservableCollection<Model>() { 
    new Model{HeaderContent="One",IsEnable= true }, 
    new Model { HeaderContent = "Two", IsEnable = false },
    new Model { HeaderContent = "Three", IsEnable = true }, 
    new Model { HeaderContent = "Four", IsEnable = false } };

public MainPage()
{
    this.InitializeComponent();         
    MyPivot.ItemsSource = Items;
}

Model class

public class Model:ViewModelBase
{
    private bool _isEnable;
    public bool IsEnable
    {
        get { return _isEnable; }
        set
        {
            SetProperty(ref _isEnable, value);
        }
    }    
    public string HeaderContent { get; set; }
}

If we want to disable specific PivotHeaderItem we just need to find the matched and set IsEnable property as false.

Items[0].IsEnable = false;

Update

For pivot control without mvvm binding. we could use KeyTipTarget to get PivotHeaderItem, then set it disable.

var item = (PivotItem)TestPivot.Items[0];
var keyTipTarget = (PivotHeaderItem)item.KeyTipTarget;
keyTipTarget.IsEnabled = false;

I want to disable any of Pivot's Headers

1 Answers