Customize header RadSplitContainer

4 posts, 0 answers
  1. Gerard
    Gerard avatar
    16 posts
    Member since:
    Mar 2016

    Posted 05 Apr Link to this post

     

    Hi,

    I've a floating RadSplitContainer (labeled as B in the photo ) and I need to customize it to make it looks like the panel A, hide the close button, blue background on header, thickness border to 1px... I've tried with sytlesheets and templates but I cannot make it possible.

     

    Code RadDocking:

     

    <telerik:RadDocking>
        <telerik:RadSplitContainer telerik:RadDocking.FloatingLocation="500,50"  InitialPosition="FloatingDockable">
            <telerik:RadPaneGroup>
                <telerik:RadPane x:Name="TooltipHeader" CanDockInDocumentHost="False" CanUserClose="False">
                    <StackPanel x:Name="TooltipFloat">
     
                    </StackPanel>
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking>

     

    Regards,

    Gerard.

    Hello, I have a floating RadSplitContainer (labeled A in the photo ) and I need to customize it to make it as the stack panel (labeled B)
    Hello, I have a floating RadSplitContainer (labeled A in the photo ) and I need to customize it to make it as the stack panel (labeled B)
    Hello, I have a floating RadSplitContainer (labeled A in the photo ) and I need to customize it to make it as the stack panel (labeled B)
    Hello, I have a floating RadSplitContainer (labeled A in the photo ) and I need to customize it to make it as the stack panel (labeled B)
    Hello, I have a floating RadSplitContainer (labeled A in the photo ) and I need to customize it to make it as the stack panel (labeled B)
  2. Masha
    Admin
    Masha avatar
    355 posts

    Posted 08 Apr Link to this post

    Hi Gerard,

    You need to modify the Control template of ToolWindow style in order to achieve the desired approach.
    The template should look like the code snippet below:

    <Style TargetType="telerik:ToolWindow">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:ToolWindow">
                    <Grid x:Name="VisualRoot">
                        <Border x:Name="Border" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Border x:Name="HeaderElement" Grid.Row="0" Grid.Column="0" Padding="3 1" Background="LightBlue" Height="16" BorderThickness="0 0 0 1" BorderBrush="{TemplateBinding BorderBrush}">
                                    <Border.InputBindings>
                                        <MouseBinding Command="telerik:RadDockingCommands.PaneHeaderMenuOpen">
                                            <MouseBinding.Gesture>
                                                <MouseGesture MouseAction="RightClick"/>
                                            </MouseBinding.Gesture>
                                        </MouseBinding>
                                    </Border.InputBindings>
                                    <!--<ContentPresenter x:Name="Header" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>-->
                                </Border>
                                <ContentPresenter x:Name="Content" Grid.Row="1" Grid.ColumnSpan="2" Content="{TemplateBinding Content}" Margin="3"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    This will may ToolWindow to look like in the provided picture except the inner border which comes from the RadPaneGroup style. You can remove it like adding Style.Resources to the ToolWindow style like this:
    <Style.Resources>
        <Style TargetType="telerik:RadPaneGroup">
            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>
    </Style.Resources>


    but this is not recommended approach as if you have more than one pinned RadPanes it will not look good.

    I hope this helps.

    Regards,
    Masha
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Gerard
    Gerard avatar
    16 posts
    Member since:
    Mar 2016

    Posted 08 Apr Link to this post

    Hi Masha,

    Thanks masha works perfect.

     

    Another problem I have, is that I can not change the width and height of docpanel at runtime.

     

    <telerik:RadDocking x:Name="RadDockingFloating">
                <telerik:RadSplitContainer x:Name="RadSplitContainer" telerik:RadDocking.FloatingSize="200,400" Visibility="Collapsed" telerik:RadDocking.FloatingLocation="500,50"  InitialPosition="FloatingOnly">
                    <telerik:RadPaneGroup>
                        <telerik:RadPane IsHidden="True" ContextMenuTemplate="{x:Null}" x:Name="TooltipHeader" CanUserPin="False" CanUserClose="False">
                           ...
                        </telerik:RadPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
    </telerik:RadDocking>

     

    I have proven with:

    RadDocking.SetFloatingSize(RadSplitContainer, new Size(200, 200));
    RadSplitContainer.SetValue(RadDocking.FloatingSizeProperty, new Size(200, 200));

    and none works :(

    Any ideas ?

     

    Regards,

    Gerard.

     

    Thanks masha works perfect.
    Thanks masha works perfect.
    Thanks masha works perfect.
    Another problem I have, is that I can not change the width and height of docpanel at runtime .
  5. Nasko
    Admin
    Nasko avatar
    588 posts

    Posted 11 Apr Link to this post

    Hello Gerard,

    There are two types of sizing in the Docking control - relative and absolute. The absolute sizes are used for the size of the root-level SplitContainers and the relative are used for the items of the SplitContainers- because of that setting Width and Height to the panes will not affect the space their content occupies.

    What we could suggest you to use is to set the RelativeSize of the PaneGroups in order to change the size as expected. The RelativeSize is used to proportionally divide the space occupied by PaneGroups - it is not like setting Width and Height to a particular value, but should work for your scenario. For more details you can check the following section from the PaneGroups article:
    http://docs.telerik.com/devtools/wpf/controls/raddocking/features/pane-groups#set-relative-size-to-the-radpanegroup

    Hope the provided information will be helpful for you.

    Regards,
    Nasko
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top