This is a migrated thread and some comments may be shown as answers.

PanelBar in Tab resizing problem

1 Answer 166 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Pedro
Top achievements
Rank 1
Pedro asked on 14 Oct 2010, 12:16 PM

I put a PanelBar within a Tab control and, when I resize the my application window, the PanelBar does not follow the resizing and eventually disappears. I tried placing it inside a Grid with a fixed anchors, but this does not work as well.

If I the PanelBar with Grid outside the Tab, it works well, the PanelBar slides on the screen when being resized. But I need the PanelBar to be associated with the Tab. How can I solve this problem?


Looking forward to hearing from you,
Gonçalo Martins

XAML:

<telerik:RadDocking Style="{DynamicResource RadDockingStyleCCR}" IsHitTestVisible="True" Background="#47000000" BorderBrush="{x:Null}" Foreground="DimGray" ClipToBounds="True" MinWidth="1280" MinHeight="1024" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0,31,0,50">
   <telerik:RadSplitContainer Width="1909.103" Orientation="Vertical" Margin="0,2.625,0,19.25" ClipToBounds="True" InitialPosition="DockedRight">
    <telerik:RadPaneGroup TabOrientation="Vertical" TabStripPlacement="Left" Style="{DynamicResource RadPaneGroupStyle1}" Background="#33000000" BorderBrush="#33FFFFFF" HorizontalAlignment="Left" Width="1903.04" BorderThickness="1" ClipToBounds="True">
     <telerik:RadPane Header="Pane 1" HorizontalAlignment="Left" Width="35" Margin="3,-934.338,0,862.338" CanUserPin="False" Title="Teste" Style="{DynamicResource RadPaneStyleCCR}" BorderBrush="#33FFFFFF" Foreground="DimGray" ClipToBounds="True">
      <telerik:RadPane.Background>
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#33FFFFFF" Offset="0"/>
        <GradientStop Color="#C8000000" Offset="1"/>
       </LinearGradientBrush>
      </telerik:RadPane.Background>
      <Grid Height="976" Margin="51.207,8.959,4.5,0" VerticalAlignment="Top">
       <Grid x:Name="Map" Margin="0,-7.166,-2.5,-1.5">
        <telerik:RadMap Name="radMap" Margin="0,0,43.333,0" Background="#47000000" ZoomLevel="5"></telerik:RadMap>
       </Grid>
       <Grid x:Name="PanelBar" Margin="2,1.5,6,0" Height="484" VerticalAlignment="Top">
        <telerik:RadPanelBar x:Name="Panel4Ptos"
         Orientation="Vertical" ExpandMode="Multiple" Foreground="{x:Null}" Height="484" VerticalAlignment="Top" Width="43.33" Margin="1798.501,0,-4.499,0">
         <telerik:RadPanelBarItem x:Name="DetailsPanel1" IsExpanded="{Binding IsDetailsExpanded}" ItemContainerStyle="{StaticResource PanelBarItemSecondLevelTemplateStyle}" Style="{DynamicResource RadPanelBarItemFourPoints}" Foreground="White" BorderBrush="{x:Null}" Background="{x:Null}" IsHitTestVisible="True" Margin="0" Collapsed="DetailsPanel1_Collapsed" Expanded="DetailsPanel1_Expanded" >
          <telerik:RadPanelBarItem.Header>
           <ContentControl Cursor="Hand">
            <TextBlock Foreground="#FFFFFF" Margin="5 4 5 5"/>
           </ContentControl>
          </telerik:RadPanelBarItem.Header>
          <ToggleButton x:Name="tbtClock" Content="ToggleButton" Height="23" Style="{DynamicResource ToggleButtonClock}" Width="23.1" Foreground="#99FFFFFF" Click="tbtClock_Click"/>
          <ToggleButton x:Name="tbtChronometer" Content="ToggleButton" Height="23.3" Style="{DynamicResource ToggleButtonChronometer}" Width="23.1" Foreground="#99FFFFFF"/>
          <ToggleButton x:Name="tbtVessel" Content="ToggleButton" Style="{DynamicResource ToggleButtonVessel}" Width="23.1" Foreground="#99FFFFFF" Height="23"/>
          <ToggleButton x:Name="tbtRoute" Content="ToggleButton" Style="{DynamicResource ToggleButtonRoute}" Width="23.1" Foreground="#99FFFFFF" Height="23"/>
          <ToggleButton x:Name="tbtDoc" Content="ToggleButton" Style="{DynamicResource ToggleButtonDoc}" Width="23.1" Foreground="#99FFFFFF" Height="23"/>
          <ToggleButton x:Name="tbtTarget" Content="ToggleButton" Style="{DynamicResource ToggleButtonTarget}" Width="23.1" Foreground="#99FFFFFF" Height="23"/>
          <ToggleButton x:Name="tbtLabel" Content="ToggleButton" Style="{DynamicResource ToggleButtonLabel}" Width="23.1" Foreground="#99FFFFFF" Height="23"/>
          <ToggleButton x:Name="tbtRuler" Content="ToggleButton" Style="{DynamicResource ToggleButtonRuler}" Width="23.1" Foreground="#99FFFFFF" Height="23"/>

         </telerik:RadPanelBarItem>
        </telerik:RadPanelBar>
       </Grid>

1 Answer, 1 is accepted

Sort by
0
George
Telerik team
answered on 19 Oct 2010, 07:39 PM
Hi Gonçalo,

Could you please specify why do you set so many properties of the RadPane, RadPaneGroups? Why do you set margins? I would suggest you to place these RadPane, RadPaneGroup and RadSplitContainer in a DocumentHost. In this way, when you resize the window, the content in the DocumentHost (the RadPanelBar) will be resized, too. For example, refer to the following code:

<telerik:RadDocking IsHitTestVisible="True" Background="#47000000" BorderBrush="{x:Null}" Foreground="DimGray" ClipToBounds="True" MinWidth="1280" MinHeight="1024"
                           HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="0,31,0,50">
           <telerik:RadDocking.DocumentHost>
               <telerik:RadSplitContainer  Orientation="Vertical" ClipToBounds="True" InitialPosition="DockedRight">
                   <telerik:RadPaneGroup  Background="#33000000" BorderBrush="#33FFFFFF" BorderThickness="1" ClipToBounds="True">
                       <telerik:RadPane Header="Pane 1" CanUserPin="False" Title="Teste" BorderBrush="#33FFFFFF" Foreground="DimGray" >
                           <telerik:RadPane.Background>
                               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                   <GradientStop Color="#33FFFFFF" Offset="0"/>
                                   <GradientStop Color="#C8000000" Offset="1"/>
                               </LinearGradientBrush>
                           </telerik:RadPane.Background>
                           <Grid Height="976" VerticalAlignment="Top">
                               <!--<Grid x:Name="Map">
                                   <telerik:RadMap Name="radMap" Margin="0,0,43.333,0" Background="#47000000" ZoomLevel="5"></telerik:RadMap>
                               </Grid>-->
                               <Grid x:Name="PanelBar" VerticalAlignment="Top">
                                   <telerik:RadPanelBar x:Name="Panel4Ptos"
        Orientation="Vertical" ExpandMode="Multiple" Height="484" VerticalAlignment="Top" Width="43.33">
                                       <telerik:RadPanelBarItem x:Name="DetailsPanel1" IsExpanded="True" Foreground="White" IsHitTestVisible="True" Margin="0"  >
                                           <telerik:RadPanelBarItem.Header>
                                               <ContentControl Cursor="Hand">
                                                   <TextBlock Foreground="#FFFFFF" Margin="5 4 5 5"/>
                                               </ContentControl>
                                           </telerik:RadPanelBarItem.Header>
                                           <ToggleButton x:Name="tbtClock" Content="ToggleButton" Height="23"  Width="23.1" Foreground="#99FFFFFF" />
                                           <ToggleButton x:Name="tbtChronometer" Content="ToggleButton" Height="23.3" Width="23.1" Foreground="#99FFFFFF"/>
                                           <ToggleButton x:Name="tbtVessel" Content="ToggleButton" Width="23.1" Foreground="#99FFFFFF" Height="23"/>
                                           <ToggleButton x:Name="tbtRoute" Content="ToggleButton"  Width="23.1" Foreground="#99FFFFFF" Height="23"/>
                                           <ToggleButton x:Name="tbtDoc" Content="ToggleButton" Width="23.1" Foreground="#99FFFFFF" Height="23"/>
                                           <ToggleButton x:Name="tbtTarget" Content="ToggleButton"  Width="23.1" Foreground="#99FFFFFF" Height="23"/>
                                           <ToggleButton x:Name="tbtLabel" Content="ToggleButton"  Width="23.1" Foreground="#99FFFFFF" Height="23"/>
                                           <ToggleButton x:Name="tbtRuler" Content="ToggleButton"  Width="23.1" Foreground="#99FFFFFF" Height="23"/>
                                       </telerik:RadPanelBarItem>
                                   </telerik:RadPanelBar>
                               </Grid>
 
                           </Grid>
                       </telerik:RadPane>
                   </telerik:RadPaneGroup>
               </telerik:RadSplitContainer>
           </telerik:RadDocking.DocumentHost>
       </telerik:RadDocking>

For more information about RadDocking and its visual structure and not supporting properties, please refer to the following links: http://www.telerik.com/help/wpf/raddocking-visual-structure.html and http://www.telerik.com/help/wpf/not-supported-properties.html

I hope this helps.


Kind regards,
George
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
TabControl
Asked by
Pedro
Top achievements
Rank 1
Answers by
George
Telerik team
Share this question
or