PaneTabItem or ContentPane disable TabHeader on Custom Template

Justin Vuffray posted 6 months ago

Hi ! I've been looking for an answer since few days but I didn't.

Here's my problem. I have the second ContentPane that is disabled, but the display is exactly the same as the first one. I want to have a visual feedback to know the item is disabled (only change the foreground color of the tabheader is fine). Can anyone help me ?

<igDockManager:XamDockManager Theme="RoyalLight"

FlyoutAnimation="Slide"

UnpinnedTabHoverAction="Flyout"

Background="{DynamicResource BackgroundBrush}">

<igDockManager:XamDockManager.Resources>

</Style>

<Setter.Value>

<Border BorderBrush="{DynamicResource AlternateBackgroundBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"

IsEnabled="{TemplateBinding IsEnabled}">

<DockPanel Margin="{TemplateBinding Padding}" Background="{DynamicResource BackgroundBrush}"

IsEnabled="{TemplateBinding IsEnabled}">

<igDockManager:PaneHeaderPresenter DockPanel.Dock="Top"

BorderThickness="2"

BorderBrush="{DynamicResource BackgroundBrush}"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}"

ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"

DataContext="{Binding RelativeSource={x:Static RelativeSource.TemplatedParent}}"

Visibility="{TemplateBinding HeaderVisibility}"

Background="Green"

IsEnabled="{TemplateBinding IsEnabled}"/>

<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Visibility="{TemplateBinding ContentVisibility}"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}"

ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"

IsEnabled="{TemplateBinding IsEnabled}"/>

</DockPanel>

</Border>

</AdornerDecorator>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter.Value>

</DockPanel>

</DataTemplate>

</Setter.Value>

</Setter>

<Setter.Value>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

</igDockManager:XamDockManager.Resources>

<igDockManager:XamDockManager.Panes >

<igDockManager:SplitPane igDockManager:XamDockManager.InitialLocation="DockedBottom">

<igDockManager:TabGroupPane>

<igDockManager:ContentPane Header="Bottom Content"

CloseButtonVisibility="Collapsed"

WindowPositionMenuVisibility="Collapsed"

AllowFloatingOnly="False"

AllowDockingFloating="False"

AllowClose="False">

</igDockManager:ContentPane>

</igDockManager:TabGroupPane>

</igDockManager:SplitPane>

</igDockManager:XamDockManager.Panes>

<igDockManager:DocumentContentHost>

<igDockManager:SplitPane SplitterOrientation="Horizontal">

<igDockManager:TabGroupPane IsSynchronizedWithCurrentItem="True"

TabStripPlacement="Top"

SelectedItem="{Binding Path=SelectedTabItem}">

<igDockManager:ContentPane Header="First Header"

CloseButtonVisibility="Collapsed"

WindowPositionMenuVisibility="Collapsed"

AllowFloatingOnly="False"

AllowDockingFloating="False"

AllowClose="False">

</igDockManager:ContentPane>

<igDockManager:ContentPane Header="Second Header"

IsEnabled="{Binding Path=IsEnabled}"

CloseButtonVisibility="Collapsed"

WindowPositionMenuVisibility="Collapsed"

AllowClose="False">

</igDockManager:ContentPane>

</igDockManager:TabGroupPane>

</igDockManager:SplitPane>

</igDockManager:DocumentContentHost>

</igDockManager:XamDockManager>

I already tried to add a Trigger inside my TabHeaderTemplate but it didn't works. I tried to edit the PaneTabItem with modifying the Template but I didn't succeed.
Thanks in advanced.

Top Replies

34810

Offline Andrew Goldenbaum posted 6 months ago +1
Hello Justin, I believe the route of the DataTrigger in the TabHeaderTemplate is the way to achieve your requirement, and you can use the following...view reply »
34810

Offline Andrew Goldenbaum posted 6 months ago in reply to Justin Vuffray +1 verified
Hello Justin, In order to have the trigger apply to the Image in the ContentPane as well as the divider between tabs in the DocumentContentHost, you...view reply »

34810

Verified Answer
Offline Andrew Goldenbaum posted 6 months ago in reply to Justin Vuffray

Hello Justin,

In order to have the trigger apply to the Image in the ContentPane as well as the divider between tabs in the DocumentContentHost, you will need to include a different template. Namely, there is a ControlTemplate in our default styles with the key PaneTabItem.DocumentTabItemTemplateKey that includes an AutoDisabledImage element that will receive the image from your content pane. This also represents the template used when the tabs are in the DocumentContentHost.

I have included and modified this template with a Magenta border (so it’s easy to find in the XAML) and a trigger that targets the AutoDisabledImage to hide the Image if the pane is disabled. The sample demonstrating this is attached.

Please let me know if you have any other questions or concerns on this matter.

4201.XamDockManagerHeaderDisableDemo.zip
Cancel
Reply

Reject Answer

Cancel
35

Offline Justin Vuffray posted 6 months ago in reply to Andrew Goldenbaum

Hi !
I want to add a divider between tab header present in DocumentContentHost, how can I achieve it ?
Cancel
Reply

Cancel

Offline Justin Vuffray posted 6 months ago in reply to Andrew Goldenbaum

Thanks for you answer, it help me a lot. My second is:
If I add an image to the ContentPane, I want that the trigger is apply to the TextBlock and the Image, How can I achieve it ?

                        <igDock:ContentPane Header="Second Header"
                            Image="{StaticResource MyImage}"
                            IsEnabled="False"
                            CloseButtonVisibility="Collapsed"
                            WindowPositionMenuVisibility="Collapsed"
                            AllowClose="False">

Thanks in advance.

34810

Offline Andrew Goldenbaum posted 6 months ago

Hello Justin,

I believe the route of the DataTrigger in the TabHeaderTemplate is the way to achieve your requirement, and you can use the following in the DataTemplate.Triggers collection:

<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type igDock:PaneTabItem}}, Path=Pane.IsEnabled}" Value="False">
<Setter TargetName="TabHeaderText" Property="Foreground" Value="Red" />
</DataTrigger>

I am attaching a sample project to demonstrate this. Please let me know if you have any other questions or concerns on this matter.

XamDockManagerHeaderDisableDemo.zip
Cancel
Reply

Cancel