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
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.
George
the Telerik team