Settings Pane Text Tab

8 posts, 3 answers
  1. Jakub
    Jakub avatar
    26 posts
    Member since:
    Apr 2015

    Posted 28 Apr 2015 Link to this post

    Hallo, i d like to change text in Diagram Items by using Settings Pane but when i open settings pane for selected item in the text tab is just name of node but no content of node. Could you guide through this? 

     

    Thank you

    Jakub

  2. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 30 Apr 2015 Link to this post

    Hi Jakub,

    Note that the bindings in the diagram's SettingsPane are created with custom code used through attached properties. This is necessary because the pane is opened in a Popup which is in a different visual tree and the normal XAML bindings between the application's tree and the Popup's tree might not work as expected. 

    The following XAML is defined in the template of the view that represents the TextBox for shape's Content editing:
    .............
    <ScrollViewer MaxHeight="90" BorderThickness="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
        <TextBox
                AcceptsReturn="True"
                HorizontalAlignment="Stretch"
                VerticalContentAlignment="Center"
                HorizontalContentAlignment="Stretch"
                extensions:SettingsPaneView.EditorPropertyName="Content"
                extensions:SettingsPaneView.EditorItemType="Shapes, Connections"
                extensions:SettingsPaneView.EditorValue="{Binding Path=Text, Mode=TwoWay, RelativeSource={RelativeSource Self}}"
                FontFamily="Segoe UI"/>
    </ScrollViewer>
    ........
    The Text property of the TextBox is bound to the Content of the RadDiagramShape which actually contains its DataContext. Therefore the displayed text will be the DataContext.ToString().

    In order to resolve this you can use couple approaches:
    • Subscribe for the RegisterEditor event of the SettingsPaneView and inside its handler change the value of the EditorPropertName to reflect the Content of the view model. Here is an example:
      this.AddHandler(SettingsPaneView.RegisterEditorEvent, new RadRoutedEventHandler(OnRegisterEditor), true);
       
      private void OnRegisterEditor(object sender, RadRoutedEventArgs e)
      {
          var contentTextBox = e.OriginalSource as TextBox;
          // This code will be called only the first time a settings pane tab is opened
          if (contentTextBox != null)
          {
              SettingsPaneView.SetEditorPropertyName(contentTextBox, "DataContext.Content");
              // The change in the TextBox's Text property will be automatically changed after the SettingsPane's // tab is switched. This is why we set the value manually.
              contentTextBox.Text = (this.diagram.SelectedItem as NodeViewModelBase).Content.ToString();
          }
      }
    • The other approach is to extract and modify the Style of the SettingsPaneTextControl. Basically, you can change the value of the SettingsPaneView.EditorPropertyName to "DataContext.Content".

      <ScrollViewer MaxHeight="90" BorderThickness="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
          <TextBox
                  AcceptsReturn="True"
                  HorizontalAlignment="Stretch"
                  VerticalContentAlignment="Center"
                  HorizontalContentAlignment="Stretch"
                  extensions:SettingsPaneView.EditorPropertyName="DataContext.Content"
                  extensions:SettingsPaneView.EditorItemType="Shapes, Connections"
                  extensions:SettingsPaneView.EditorValue="{Binding Path=Text, Mode=TwoWay, RelativeSource={RelativeSource Self}}"
                  FontFamily="Segoe UI"/>
      </ScrollViewer>
    Please try this and let me know if it works for  you.

    Regards,
    Martin
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Jakub
    Jakub avatar
    26 posts
    Member since:
    Apr 2015

    Posted 30 Apr 2015 in reply to Martin Link to this post

    Hallo Martin,

     thank you for your suggestions but i m kind of new user of telerik. Could you be so kind a guide me how to make those changes in SettingsPane?

    Thank you

    Regards, Jakub

     

  5. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 05 May 2015 Link to this post

    Hi Jakub,

    I prepared a solution that demonstrates both approaches. Note that in the project with the customized template I am using NoXaml assemblies and implicit styles which allows me to use the default styles without extracting them. Please give the project a try and let me know if it helps.

    In addition you can take a look at the Editing Control Templates help article that demonstrates how to edit a control's template.

    Regards,
    Martin
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. Jakub
    Jakub avatar
    26 posts
    Member since:
    Apr 2015

    Posted 18 Jun 2015 in reply to Martin Link to this post

    Hi Martin,

     thank you for your project. I have one other question. I'm creating new diagrams in code behind. I would like to ask you if you could give me some advice how to customize OnRegisterEditor method, so it could be used for every new diagram. Now when it is new diagam create and there is some node ... settings pane is not there.

     

    thank you for your time and advices.

    Greatings Jakub 

  7. Jakub
    Jakub avatar
    26 posts
    Member since:
    Apr 2015

    Posted 18 Jun 2015 in reply to Martin Link to this post

    Sorry for spamming,

     i think my problem is that settingsPane is defined in xaml and when i m creating new diagram in code behind this settings pane is not added to new diagram. Could you give me some advice how to fixe it? 

     

    thank you.

    greetings Jakub

  8. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 19 Jun 2015 Link to this post

    Hello Jakub,

    If you create new diagram controls in code you can assign separate settings pane for each diagram. Here is an example in code for this approach based on the project from my last reply.
    var vm = new MainViewModel();
    var diagram = new RadDiagram()
    {
        ConnectionTemplate = (DataTemplate)this.LayoutRoot.Resources["normalTemplate"],
        ContainerShapeStyle = (Style)this.LayoutRoot.Resources["containerStyle"],
        GraphSource = vm.Source,
        ShapeStyle = (Style)this.LayoutRoot.Resources["shapeStyle"],
        ShapeTemplate = (DataTemplate)this.LayoutRoot.Resources["normalTemplate"],
    };
     
    var settingsPane = new SettingsPane() { Diagram = diagram };
    ItemInformationAdorner.SetAdditionalContent(diagram, settingsPane);
     
    diagram.AddHandler(SettingsPaneView.RegisterEditorEvent, new RadRoutedEventHandler(OnRegisterEditor), true);
     
    this.LayoutRoot.Children.Add(diagram);
    In this case you will need slightly modify the implementation in the OnRegisterEditor event handler in order to get the correct diagram control when the event is called.
    private void OnRegisterEditor(object sender, RadRoutedEventArgs e)
    {
        var diagram = (RadDiagram)sender;
        var contentTextBox = e.OriginalSource as TextBox;
        // This code will be called only the first time a settings pane tab is opened
        if (contentTextBox != null)
        {
            SettingsPaneView.SetEditorPropertyName(contentTextBox, "DataContext.Content");
            // The change in the TextBox's Text property will be automatically changed after the SettingsPane's // tab is switched. This is why we set the value manually.
            contentTextBox.Text = (diagram.SelectedItem as NodeViewModelBase).Content.ToString();
        }
    }

    I hope this helps.

    Regards,
    Martin
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  9. Jakub
    Jakub avatar
    26 posts
    Member since:
    Apr 2015

    Posted 19 Jun 2015 in reply to Martin Link to this post

    Hallo Martin,

     

    thank you so much. It works perfectly. 

    Greetings Jakub.

Back to Top
UI for WPF is Visual Studio 2017 Ready