Multiple Palettes In RadPanelBar

GoXam
1

I’m trying to set up a toolbox similar to VS with multiple categories of controls all separated in their own PanelBarItem (Telerik), but am running into a couple problems with sizing. All of the controls we are using are a collection of paths exported from Illustrator for our custom shapes.

The first problem I am running into is that the Palette’s that have been placed into the PanelBarItem don’t seem to have any height based on the controls within the palette. When the PanelBarItem is expanded, there is only a sliver visible which is coming from the margins set on the palette. However, if I manually enter a height for the palette it will display with that height and show the controls that have been added. How can I set this to size itself based on its contents?

The second issue is that when the width of the pane containing the palettes is stretched it behaves as expected (rearranging the items to the new width), but when the width is reduced a scroll bar comes up instead of re-sizing the palette. I’m sure this is something simple, but what am I missing?

The last problem I’m running into is that sizing for the nodes in the palette isn’t working as expected. Some sections of the nodes are clipped, and because each of the controls has a different size I can’t just set the width & height of the NodePanel to fit them all with 1 size. Is there a way to auto-size the NodePanel based on the path data it contains, or am I going to need to manually enter the size for each of the controls?

Thanks
Ryan

2

Regarding the height, you could implement a Diagram.LayoutCompleted event handler that sets the Diagram.Height to the Diagram.Panel.DiagramBounds.Height plus any borders or margins or whatever.

I don’t know about the width. You might need to establish a UIElement.SizeChanged event handler on the container.

Normally NodePanel does size itself according to its contents. How did you define the DataTemplate?

3

Hi Walter, thanks for the quick reply… I got the height working as you suggested, and will look into something for the width.

As for the DataTemplate, this is what I’ve got:


<Style x:Key="PaleteObjectStyle" TargetType="{x:Type go:NodePanel}">
            <Setter Property="Margin" Value="5" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment"  Value="Center" />
</Style>


<go:DataTemplateDictionary x:Key="CompressorNodeTemplateDictionary">
            <DataTemplate x:Key="Compressor">
                <StackPanel go:Part.SelectionElementName="Shape" go:Part.SelectionAdorned="True"
                            go:Node.LocationElementName="Shape" go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}">
                    <TextBlock Style="{StaticResource TextBlockStyle}" Text="{Binding Path=Data.Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <go:NodePanel x:Name="Shape" Style="{StaticResource PaleteObjectStyle}">
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 21.239,7.920 L 18.360,7.920 L 18.360,10.621 L 21.239,10.621"/>
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 0.180,21.600 L 38.880,21.600 L 38.880,19.440 L 0.180,19.440 L 0.180,21.600"/>
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 17.460,15.121 L 17.460,3.420"/>
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 17.460,12.420 L 18.360,12.420 L 18.360,6.121 L 17.460,6.121 L 17.460,12.420"/>
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 15.300,15.480 L 15.300,19.440"/>
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 17.460,3.420 L 0.180,0.180 L 0.180,18.360 L 17.460,15.121"/>
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 2.340,18.000 L 2.340,19.440"/>
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 36.720,19.440 L 36.720,0.180"/>
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 23.761,19.440 L 23.761,0.180"/>
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 21.239,10.980 L 21.960,10.980 L 21.960,7.380 L 21.239,7.380 L 21.239,10.980"/>
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 21.960,10.621 L 23.761,10.621 L 23.761,7.920 L 21.960,7.920"/>
                        <Path StrokeThickness="0.4" Stroke="#ff010101" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="F1 M 36.720,0.180 L 23.761,0.180 L 23.761,12.960 L 36.720,12.960 L 36.720,0.180"/>
                        <Rectangle Fill="Transparent" Margin="8" />
                    </go:NodePanel>                    
                </StackPanel>
            </DataTemplate>
</go:DataTemplateDictionary>

<telerik:RadPanelBarItem Header="Compressors" >
                <go:Palette x:Name="compressorPalette"
                            go:Diagram.LayoutCompleted="sizeDiagram"                            
                            NodeTemplateDictionary="{StaticResource CompressorNodeTemplateDictionary}"                    
                            MaximumSelectionCount="1" />
</telerik:RadPanelBarItem>
4

NodePanel expects there to be a “main” element, which is the first child.
Depending on the value of NodePanel.Sizing, that main element will be sized to fit around all of the other child elements, or all of those child elements will be fit into the main element.
The default value for that property is “Fixed”, but I think you want “Auto”.

However, you first have to make sure there is a “main” element in the NodePanel.
Presumably you don’t want to use the current first child element, a Path.
But I do notice that you have a Rectangle with Transparent Fill.
Does that need to be the last child?
If not, you could move it to be first.

5

Thanks Walter, setting the sizing to auto and moving the rectangle to the first item has fixed the problem I was having.

Ryan