Hi. Curently I faced with an issue that I cannot correctly hide tab if I have only one RadPane in the window.
What I am trying to to is the following: I wish to have PaneHeader if I have only one RadPane in the group and hide it and show tabs if more thatn one RadPane. Also I want to completely hide everything if this RadPane is inside ToolWindow. (Similar to Bottom template, but with differ that tabs are on top)
What I have currently:
It works when I undock it to ToolWIndow, but fails when I dock it again in the right/left parts of the docking control. Seems binding in the trigger simply does not work.
I am attaching my TopRadPane group Template. Please, point me what I am doing wrong:
<ControlTemplate x:Key="RadPaneGroupTopControlTemplate" TargetType="telerikDocking:RadPaneGroup">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<dock:RadGridResizer x:Name="DockResizer" Placement="Left" ShowsPreview="True" Visibility="Collapsed"/>
<Border
x:Name="HeaderTabs"
Grid.Column="1">
<Grid x:Name="ItemsContainer" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ItemsPresenter x:Name="ItemsPresenterElement" Margin="0"/>
<telerik:RadButton x:Name="CloseButton"
Grid.Column="1"
Command="telerikDocking:RadDockingCommands.Close"
Style="{StaticResource RadButtonDocumentCloseStyle}"
Visibility="{Binding IsEnabled, RelativeSource={RelativeSource Self}, Converter={StaticResource BooleanToVisibilityConverter}}"/>
</Grid>
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Visibility" Value="Visible"/>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=IsInToolWindow}" Value="true" />
<Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=IsSingleItem}" Value="true" />
</MultiDataTrigger.Conditions>
<Setter Property="Visibility" Value="Collapsed" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<dock:PaneHeader Grid.Column="1"
x:Name="HeaderElement"
SelectedPane="{TemplateBinding SelectedPane}"
Visibility="Collapsed">
<!-- <dock:PaneHeader.Style> -->
<!-- <Style TargetType="dock:PaneHeader" BasedOn="{StaticResource PaneHeaderStyle}"> -->
<!-- <Setter Property="Visibility" Value="Collapsed"/> -->
<!-- <Style.Triggers> -->
<!-- <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=., Converter={StaticResource HeaderVisibilityConverter}}" Value="True"> -->
<!-- <Setter Property="Visibility" Value="Visible"/> -->
<!-- </DataTrigger> -->
<!-- </Style.Triggers> -->
<!-- </Style> -->
<!-- </dock:PaneHeader.Style> -->
</dock:PaneHeader>
<Border x:Name="BorderVisual"
Grid.Column="1"
Grid.Row="1"
Grid.RowSpan="1"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"/>
<Border x:Name="AccentBorderVisual"
Grid.Column="1"
Grid.Row="1"
Grid.RowSpan="1"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(helpers:ThemeHelper.CheckedBrush)}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedPane.IsActive, Converter={StaticResource BooleanToVisibilityConverter}}"/>
<Grid Grid.Row="1" Grid.Column="1">
<ContentPresenter x:Name="ContentElement"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
Margin="{TemplateBinding Padding}"/>
<Grid x:Name="ContentElementsPanel" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BooleanToVisibilityConverter}}"/>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SplitterPosition">
<Trigger.Value>
<Dock>Left</Dock>
</Trigger.Value>
<Setter TargetName="DockResizer" Property="Visibility" Value="Visible"/>
<Setter TargetName="DockResizer" Property="Grid.RowSpan" Value="3"/>
<Setter TargetName="DockResizer" Property="Placement" Value="Left"/>
<Setter TargetName="DockResizer" Property="MinWidth" Value="10"/>
</Trigger>
<Trigger Property="SplitterPosition">
<Trigger.Value>
<Dock>Top</Dock>
</Trigger.Value>
<Setter TargetName="DockResizer" Property="Visibility" Value="Visible"/>
<Setter TargetName="DockResizer" Property="Grid.ColumnSpan" Value="2"/>
<Setter TargetName="DockResizer" Property="Placement" Value="Top"/>
<Setter TargetName="DockResizer" Property="MinHeight" Value="10"/>
<Setter TargetName="DockResizer" Property="VerticalAlignment" Value="Top"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ContentElement" Property="Opacity" Value="{telerik:Office2019Resource ResourceKey=DisabledOpacity}"/>
<Setter Property="Foreground" Value="{telerik1:Office2019Resource ResourceKey=DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>2 Answers, 1 is accepted
Hello Denis,
I have tested this by adding the style to the RadSplitContainer and using a custom converter which works on my side:
<telerik:RadDocking x:Name="radDock" >
<telerik:RadDocking.DocumentHost >
<telerik:RadSplitContainer >
<telerik:RadSplitContainer.Resources>
<Style TargetType="telerik:RadPane" >
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=Items.Count , Converter={StaticResource MyConverter}}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</telerik:RadSplitContainer.Resources>
<telerik:RadPaneGroup Template="{StaticResource RadPaneGroupTopControlTemplate}" x:Name="radPanegroup" >
<telerik:RadPane Header="test">
</telerik:RadPane>
<telerik:RadPane Header="test1">
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>
</telerik:RadDocking>
Here is the converter:
public class MyConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
int panes = (int)value;
if( panes == 1)
{
return false;
}
return true;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
In addition, can be handled entirely in the code behind. For example, you can use the PaneStateChange event:
private void RadDock_PaneStateChange(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
if(this.radPanegroup.Items.Count == 1)
{
var pane = this.radPanegroup.Items[0] as RadPane;
pane.Visibility = Visibility.Collapsed;
}
else
{
foreach(var item in this.radPanegroup.Items)
{
var pane = item as RadPane;
pane.Visibility = Visibility.Visible;
}
}
}
Let me know what you think.
Regards,
Dimitar
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
I think we misunderstood each other.
What I want:
1. When I have only one RadPane in RadPaneGroup (not in the whole RadDocking control), I would like to show PaneHeader instaed of tab (which will occupy all width of the RadPaneGroup)
2. If there is 2 or more RadPanes in RadPaneGroup, then show regular tabs
3. If I move pane to toolwindow and I have only One Pane - then does not show anything excepth Window title. If more than 1 tab, show regular tabs
Here is some screenshots as an examples:
Please, pay attantion of the tabs and how they are look like. I want this to apply for each of RadPaneGroups (Left/Right/Top, etc)
Hi Denis,
I have investigated this and discussed it with the development team. Unfortunately, there is no direct way to achieve it and a solution will require customizing most of the templates. Such tasks are outside of the support scope since this will take a lot of time. If you believe that this will be a desirable feature for our clients you can log a feature request on our feedback portal and we will consider it for implementation: Progress® Telerik® UI for WPF Feedback Portal.
Thank you for your understanding.
Rank 1
Iron
Hi DImitar
Please, pay attention to this Control Template
<ControlTemplate x:Key="RadPaneGroupTopControlTemplate" TargetType="telerikDocking:RadPaneGroup">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<dock:RadGridResizer x:Name="DockResizer" Placement="Left" ShowsPreview="True" Visibility="Collapsed"/>
<Border
x:Name="HeaderTabs"
Grid.Column="1">
<Grid x:Name="ItemsContainer" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ItemsPresenter x:Name="ItemsPresenterElement" Margin="0"/>
<telerik:RadButton x:Name="CloseButton"
Grid.Column="1"
Command="telerikDocking:RadDockingCommands.Close"
Style="{StaticResource RadButtonDocumentCloseStyle}"
Visibility="{Binding IsEnabled, RelativeSource={RelativeSource Self}, Converter={StaticResource BooleanToVisibilityConverter}}"/>
</Grid>
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Visibility" Value="Visible"/>
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=IsInToolWindow}" Value="true" />
<Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=IsSingleItem}" Value="true" />
</MultiDataTrigger.Conditions>
<Setter Property="Visibility" Value="Collapsed" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<dock:PaneHeader Grid.Column="1"
x:Name="HeaderElement"
SelectedPane="{TemplateBinding SelectedPane}"
Visibility="Collapsed">
<!-- <dock:PaneHeader.Style> -->
<!-- <Style TargetType="dock:PaneHeader" BasedOn="{StaticResource PaneHeaderStyle}"> -->
<!-- <Setter Property="Visibility" Value="Collapsed"/> -->
<!-- <Style.Triggers> -->
<!-- <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=., Converter={StaticResource HeaderVisibilityConverter}}" Value="True"> -->
<!-- <Setter Property="Visibility" Value="Visible"/> -->
<!-- </DataTrigger> -->
<!-- </Style.Triggers> -->
<!-- </Style> -->
<!-- </dock:PaneHeader.Style> -->
</dock:PaneHeader>
<Border x:Name="BorderVisual"
Grid.Column="1"
Grid.Row="1"
Grid.RowSpan="1"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"/>
<Border x:Name="AccentBorderVisual"
Grid.Column="1"
Grid.Row="1"
Grid.RowSpan="1"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(helpers:ThemeHelper.CheckedBrush)}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedPane.IsActive, Converter={StaticResource BooleanToVisibilityConverter}}"/>
<Grid Grid.Row="1" Grid.Column="1">
<ContentPresenter x:Name="ContentElement"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
Margin="{TemplateBinding Padding}"/>
<Grid x:Name="ContentElementsPanel" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BooleanToVisibilityConverter}}"/>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SplitterPosition">
<Trigger.Value>
<Dock>Left</Dock>
</Trigger.Value>
<Setter TargetName="DockResizer" Property="Visibility" Value="Visible"/>
<Setter TargetName="DockResizer" Property="Grid.RowSpan" Value="3"/>
<Setter TargetName="DockResizer" Property="Placement" Value="Left"/>
<Setter TargetName="DockResizer" Property="MinWidth" Value="10"/>
</Trigger>
<Trigger Property="SplitterPosition">
<Trigger.Value>
<Dock>Top</Dock>
</Trigger.Value>
<Setter TargetName="DockResizer" Property="Visibility" Value="Visible"/>
<Setter TargetName="DockResizer" Property="Grid.ColumnSpan" Value="2"/>
<Setter TargetName="DockResizer" Property="Placement" Value="Top"/>
<Setter TargetName="DockResizer" Property="MinHeight" Value="10"/>
<Setter TargetName="DockResizer" Property="VerticalAlignment" Value="Top"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ContentElement" Property="Opacity" Value="{telerik:Office2019Resource ResourceKey=DisabledOpacity}"/>
<Setter Property="Foreground" Value="{telerik1:Office2019Resource ResourceKey=DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>Here I have multidataTrigger:
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=IsInToolWindow}" Value="true" />
<Condition Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadPaneGroup}, Path=IsSingleItem}" Value="true" />
</MultiDataTrigger.Conditions>
<Setter Property="Visibility" Value="Collapsed" />
</MultiDataTrigger>
</Style.Triggers>This trigger makes exactly what I want to do, BUT
It simply stops working when I dock tool window back to docking control
I tried with Converters/Behaviors. None og this works.
If you tell me why this trigger works inside Docking iny until I undock RadPane and then it stops working and how to fix this, It will fix all my issues.
Hi Denis,
Originally this is not working with my test project. But perhaps my setup is different. Would it be possible to create a sample project that represents your exact setup and send it to us? A small video that shows what exactly you are doing will be helpful as well. This will allow us to properly investigate your exact case and see if can find a solution.
I can see that you have a valid license so I would suggest using a support ticket which is a private thread where you can share your project.
Thank you in advance for your patience and cooperation.
Rank 1
Iron
Hi Denis,
Ok, we will write to you there with more information.
Hi Denis,
I am investigating this and will write to you later today with more information.