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

PanelBar in Tab resizing problem

1 Answer 259 Views

TabControl

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

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

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>

</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