SettingsPane togglebutton outside diagram

[Alexander]

When you select a shape that is near the right edge of the diagram surface, the toggle button to show the SettingsPaneView is outside of the Diagram/Window, and therefore not accessible (I have limited it to the Page Size, so you cannot move any further to the right).

Is there any way to Keep it in view, showing above the selected shape if necessary?

Alex

[Evgenia]

Hello Alexander,

Thanks for contacting us.
Currently this is a limitation of the control - the SettingsPane gets positioned right no matter of its corresponding Shape position. This is controlled by the predefined Placement of the Popup that holds the SettingsPaneView. However you might try the following customization to work-around the default behavior of the control: 
 Wire to the AdditionalContentActivated event handler of RadDiagram and compare the selected item BottomRight.X position with the one of RadDiagram ViewPort. This way you will know when an element gets outside of the viewport. Whenever this happends apply custom style that positions SettingsPane at Left and custom style for the settingspane popup elements, margin and popup placement.
You might find a sample project attached that demonstrates the mentioned approach. Please mind that this is a workaround and has not been tested if covers all possible border cases. Feel free to modify the code per your own needs.

Regards,
Evgenia
Telerik

 

 

[Fabio]

Hi Evgenia,

your example is really interesting, thank you.
After this is also necessary to customize the position of the SettingsPane, infact, as you could see in your example, it overlaps the shapes.
Could you please tell me how can I do?
Thanks
​

[Evgenia]

Hello Fabrizio,

To keep the ToggleButton that opens the SettingsPane always visible just comment its Visibility property in the MyCustomSettingsPane Style or set it to Visible. Also to make sure that the SettingsPane Popup never overlaps the Button itself or never goes beyond the screen edges you might set its Placement to RelativePoint for example and predefine the HorizontalOffset and VerticalOffset Values like this:

<Popup x:Name="Popup"
            Placement="RelativePoint"
            VerticalOffset="0"
            HorizontalOffset="-20">

Please mind that negative HorizontalOffset is suitable when you want the Popup positioned left from the ToggleButton. All these changes can be done in XAML in the custom settings pane style previously sent. For the case when the Popup and ToggleButton will be at right side of the Shape - you'll need another style with positive HorizontalOffset of the Popup (please modify the default SettingsPaneStyle that comes with our themes for the purpose).

Regards,
Evgenia
Telerik

 

 

[Fabio]

Hello Evgenia,
I am sorry, but this time your suggestion does not solve the issue.

I write down my test style as example.

As you could see in that example the pop up continue to overlap the shape even if I used
your snippet and I set HorizontalOffset="100".

It looks like there is some action in telerik control (maybe on the apply template of the SettingsPane)
that changes the settings of the pop up x:Name="Popup"

Please tell me what else I can do.
Thanks

<Style TargetType="extensions:SettingsPane">
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="SettingsPaneViewWidth" Value="{StaticResource SettingsPane_Width}"/>
<Setter Property="SettingsPaneViewHeight" Value="{StaticResource SettingsPane_Height}"/>
<Setter Property="BorderBrush" Value="{StaticResource SettingsPaneBorderBrush}"/>
<Setter Property="Margin" Value="0 0 -10 0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="extensions:SettingsPane">
<Border x:Name="RootBorder" MinWidth="1">
<Grid>
<Canvas>
<telerik:RadToggleButton x:Name="ToggleButton"
Width="{StaticResource SettingsPaneButtonWidth}"
Height="{StaticResource SettingsPaneButtonHeight}"
Padding="{StaticResource SettingsPaneButtonPadding}"
Margin="{StaticResource SettingsPaneButtonMargin}"
ContentTemplate="{StaticResource PaneOpenCloseButtonContentTemplate}"
Visibility="{Binding IsActive, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
IsChecked="{Binding Path=IsActive, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
</Canvas>
<Popup x:Name="Popup"
AllowsTransparency="True"
StaysOpen="False"
Focusable="False"
Placement="RelativePoint" VerticalOffset="0" HorizontalOffset="100"
>
<Grid>
<Path
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="{StaticResource SettingsPaneTrianglePathWidth}"
Height="{StaticResource SettingsPaneTrianglePathHeight}"
Margin="0 -1 0 0"
Stroke="Red"
Data="M0.5,9 L7.5,0.5 L7.5,17.5 z"
Fill="{StaticResource SettingsPaneViewBackground}"
Stretch="Fill"
UseLayoutRounding="False"
Effect="{StaticResource DiagramEffect}"/>
<!--Stroke="{TemplateBinding BorderBrush}"-->
<extensions:SettingsPaneView
x:Name="SettingsPaneView"
Diagram="{TemplateBinding Diagram}"
Margin="{StaticResource SettingsPaneViewMargin}"
IsActive="{Binding IsActive, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Height="{TemplateBinding SettingsPaneViewHeight}"
Width="{TemplateBinding SettingsPaneViewWidth}"
Visibility="{Binding Path=IsActive, RelativeSource={RelativeSource Self}, Converter={StaticResource BooleanToVisibilityConverter}}"
/>
<Rectangle
VerticalAlignment="Center"
Height="{StaticResource SettingsPaneHelpRectangleHeight}"
Canvas.ZIndex="1"
Width="1"
Fill="{StaticResource SettingsPaneViewBackground}"
HorizontalAlignment="Left"
Margin="{StaticResource SettingsPaneHelpRectangleMargin}"/>
</Grid>
</Popup>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

[Martin Ivanov]

Hi Alexander,

I tested the Evgenia's suggestion about the approach with the Placement, HorizontalOffset and the VerticalOffset proeprties of the Popup and I can confirm that the setting of the property is not applied if the style is defined in the Application's Resources. When I place the SettingsPane style in the window's Resources the property is respected. Is this your case? If so, please try to move the style and let me know if this resolves the reported behavior.

<Window.Resources>
    <ResourceDictionary Source="customSettingsPanelStyles.xaml"/>
</Window.Resources>

Regards,
Martin
Telerik

 

 

[Fabio]

Hi Martin,
probably your reply was to me: Fabrizio.
I defined the style directly in user control's resources but the popup hide the shapes anyway.
Probably I should open a ticket so I could attach my example solution.
Regards.

[Martin Ivanov]

Hello Fabrizio,

Please excuse me for the confusion with your name.

I saw that you post your question in a new Support Ticket (with ID:891760 ) and one of my colleagues (Peshito) answered it there. Please take a look at and see if its approach could be helpful for your scenario.

If this does not help, can you tell me what you mean by saying that the popup hides the shapes? Which shapes do you mean? The selected shape or all shapes in general? If you mean that the selected shape is hidden (as demonstrated in the "2_pop_opened.png"). This behavior is expected if the position of the Popup is set close to the shape's bounds. In order to resolve this you can set bigger HorizontallOffset of the popup based on its size and the shape's size. 

If you want the popup to be displayed behind the shapes, I am afraid this cannot be achieved with the Popup element, because in WPF the popup is always rendered above all other element.

Regards,
Martin
Telerik