SettingsPane togglebutton outside diagram

8 posts, 1 answers
  1. Alexander
    Alexander avatar
    77 posts
    Member since:
    Apr 2013

    Posted 19 Sep 2014 Link to this post

    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
  2. Answer
    Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 22 Sep 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Fabrizio
    Fabrizio avatar
    16 posts
    Member since:
    Nov 2013

    Posted 12 Dec 2014 in reply to Evgenia Link to this post

    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
  5. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 17 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Fabrizio
    Fabrizio avatar
    16 posts
    Member since:
    Nov 2013

    Posted 18 Dec 2014 in reply to Evgenia Link to this post

    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>

  7. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 23 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Fabrizio
    Fabrizio avatar
    16 posts
    Member since:
    Nov 2013

    Posted 23 Dec 2014 in reply to Martin Link to this post

    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.

  9. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 26 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready