Settings Pane Text Tab

[Jakub]

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

[Martin Ivanov]

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

 

 

[Jakub]

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

 

[Martin Ivanov]

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

 

 

[Jakub]

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 

[Jakub]

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

[Martin Ivanov]

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

[Jakub]

Hallo Martin,

 

thank you so much. It works perfectly. 

Greetings Jakub.