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 »

Parents

No Data

Reply

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

Children

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.