PanelBar in Tab resizing problem

2 posts, 0 answers
  1. Pedro
    Pedro avatar
    25 posts
    Member since:
    Aug 2010

    Posted 14 Oct 2010 Link to this post

    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>

  2. George
    Admin
    George avatar
    1332 posts

    Posted 19 Oct 2010 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top