I am working on a design where i have:
1. A radpane group consisting of 3 radpanes docked at left side.
2. A raddocument host consisting of 2 documentpanes docked at right side.
The left panes cannot be docked in the document host and vice versa. One of the requirements is to be able to view Doc1 and Doc2 panes side by side and the selected pane header should be highlighted and the other one should be greyed out. In default windows8 theme, both the Documentpanes' headers get highlighted so I used the following style:
<Style TargetType="{x:Type telerik:RadDocumentPane}">
<Setter Property="Background" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.AccentBrush}}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="1" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Border x:Name="grid">
<ContentPresenter>
<ContentPresenter.Content>
<StackPanel Orientation="Horizontal">
<TextBlock Margin="6" Text="{TemplateBinding Content}" Foreground="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.MainBrush}}"/>
<telerik:RadButton x:Name="RadPaneCloseButton" Background="{DynamicResource {x:Static telerik:Windows8ResourceKey.StrongBrush}}" Grid.Column="1" Command="telerik:RadDockingCommands.Close" IsBackgroundVisible="False" InnerCornerRadius="0" VerticalAlignment="Center" Width="16" Height="22">
<StackPanel>
<Path Data="M1,1L9,9 M9,1L1,9" Height="10" Stroke="{DynamicResource {x:Static telerik:Windows8ResourceKey.MainBrush}}" StrokeThickness="2" Width="10"/>
</StackPanel>
</telerik:RadButton>
</StackPanel>
</ContentPresenter.Content>
</ContentPresenter>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type telerik:RadDocumentPane}},Path=IsActive, Converter={StaticResource InvertedBooleanConveter}}" Value="True">
<Setter TargetName="grid" Property="Background" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.BasicBrush}}"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
The selected DocumentPane header gets highlighted now while the other one gets greyed out(See pic1). But when I click on any of the radpanes on the left, both the document pane headers gets greyed out (See pic2). I want the left and the right side to be independent of each other (style wise only). If Doc1 is selected on right, it should not get greyed out if I click on the left radpanes. Please provide a solution.
Pictures Attached
2 Answers, 1 is accepted
Rank 1
The IsActivePane property of a RadPane and RadDocumentPane is changed from the RadDocking control each time a new RadPane/RadDocumentPane is selected. For that reason when, as you've described, a RadPane from the left RadSplitContainer is selected it becomes the active RadPane. Consequently, both RadDocumentPanes receive IsActivePane=false which triggers the DataTrigger and their backgrounds are set to grey.
That said, I propose using a different property that will act as the IsActivePane property but only for panes in the document host. This can be achieved by creating a custom RadDocumentPane class where we include the new IsActiveDocumentPane property and use it instead of RadDocumentPanes in the RadDocking.
Then we can add a handler to the RadDocking.ActivePaneChanged event and change the IsActiveDocumentPane only when the newly selected pane is of our custom RadDocumentPane type.
Lastly, we should change the DataTrigger to use the IsActiveDocumentPane property instead of the IsActivePane property.
I've created a sample project demonstrating this approach. You can find it attached. Please note that the project uses Implicit Styles.
Hope this helps.
Regards,
Polya
Telerik