Questions on UI for Silverlight Forum

1 answer

35 views

We are interested in using this component within our Silverlight application and plan on saving the diagram so that the user can recall it and continue work on it at a later time. Is the save-output from the diagram control cross-compatible with the other web versions (ie: asp.net / kendo) of the diagram control if we decided to move to that in the future.

Diagram

answered on 24 Feb 2015

1 answer

40 views

Resizing Overlapping shapes

Hello,

Im trying to build an application using kendo`s diagram, and I'm having trouble trying to resize overlapping shapes.
When there is two overlapping shapes, and you place the mouse on top of the little square that resizes the shape, you pointer
turns to the double edged arrow that suggests that you going to resize the shape, instead it tries to select the bottom shape.
I have tried to set the bottom shape to selectable: false but still it someway tries to select the bottom shape, but in this case
without success.

Is there a solution or workaround for this?

Thank you.

Diagram

answered on 10 Feb 2015

5 answers

296 views

how to manage the RadDiagramConnection in the diagram?

I need to build orgchart with connections in the form of rectangular lines with arrows, and you need so that I can move the point at which these lines are under construction.
The existing building algoritm when the property ConnectionType=polyline wrong line of too manylines.
How to manage it, and when it will be improved?
How do I get a graph like the one that is shown in attached picture?
where you can learn what will be added in Q2 2012?

Diagram

answered on 23 Jan 2015

1 answer

76 views

How to Specify What Shape ViewModel is Instantiated on Toolbox Drag & Drop

Hello,

I have a diagram to which is bound an implementation of ObservableGraphSourceBase<>. I have several implemetations of node view models which all ultimately inherit from NodeViewModelBase. The following provides an indicator of the node and graph view models:

public class ColorViewModel : NodeViewModelBase {

public string Label { get;set;}

public bool IsEditable {get;set;

}

public class RedViewModel : ColorViewModel { }

public class BlueViewModel : ColorViewModel { }

public class RainbowViewModel : ObservableGraphSourceBase<ColorViewModel, LinkViewModelBase<ColorViewModel>> { }

Many of the shapes in the diagram are being populated when the RainbowViewModel is populated and bound to the diagram. So I create RedViewModel and BlueViewModel objects and bind them to the diagram and they display fine (a template and style selector are also used to select the appropriate display). I also have a Diagram ToolBox from which the user can drag and drop additional shapes, these additional shapes are for the user to enter text (e.g. for comment boxes). So far so good.

When the user drags and drops a shape from the ToolBox onto the diagram, the type of view model that is instantiated is a ColorViewModel, because this is the type of view model declared with the ObservableGraphSourceBase. But, I only want the dragged and dropped shapes to allow for text editing. So what I end up doing is the following: when a RedViewModel or BlueViewModel is instantiated, I set the IsIEditable flag to false. But what I would prefer is to do is have another view model, say:

public class

CommentViewModel : ColorViewModel 

{    

     // properties to support text formatting

}

But how to I enable instantiation of a CommentViewModel when a shape is dragged and dropped from the ToolBox? recall the implementation of ObservableGraphSourceBase is declared with the base view model (i.e. the RainbowViewModel). From the documentation (Custom Tool Box , about half way down), it would seem the approach is using an event handler such as

private void RadDiagram_ShapeDeserialized(object sender, ShapeSerializationRoutedEventArgs e)

{

e.Shape.Content = new CommentViewModel();

}

But is there a way to do this declaratively, and if not, is there a way to do this while still maintaining an MVVM approach? Currently instantiation of any shape view model is being handled in the main view model and if possible I would like to maintain this.

Thanks,

Mike

Diagram

answered on 19 Jan 2015

2 answers

123 views

How to improve behavior of text box of shape bound to view model for text editing

Hello,

Hello,

I have a diagram bound to a collection of view models that inherit from NodeViewModelBase and LinkViewModelBase<T>. I've enabled a RadDiagramToolbox so that the user can drag shapes onto the diagram and edit the text in those shapes. But, I've noticed the following behavior. When a shape is bound to a view model and a data template is used for two-way data binding of a text field on the view model, the default behavior of the text box on the shape is different than if the shape was not bound to a view model.

Using the demo application, when a shape is dragged to the diagram and the user double clicks the shape to activate the edit mode, the text box displays the following behavior:
- Focus: the text box has focus so the user can immediately start entering text.
- Width: matches the width of the shape
- Borders: borders are dashed lines
- Example: ShapeUnboundTextAction.png

For a shape bound to a view model when it is dropped onto the diagram, the text box displays the following behavior (the data template is shown below):
- Focus: The text box does not have focus, so after double clicking the user must then click in the text box to establish focus befor entering text
- Width: does not match the width of the shape
- Borders: I can manipulate the border width (set to 0 in the image), but how to create a dashed-line?
- Example: ShapeBoundTextAction.png

How do I create a data template and/or style template so that the text box behavior of a shape that is bound to a view model behaves like that of a shape not bound? If all the behavior cannot be re-created, then in terms of priority I'd like to match behaviors for Focus, Width, then Borders.

Thanks,

Mike

Below are the data templates, style template, and view model I am using.

<DataTemplate x:Key="annotationTemplate">

<TextBlock Text="{Binding Label, Mode=TwoWay}"

TextWrapping="Wrap"

VerticalAlignment="Stretch"

HorizontalAlignment="{Binding FontAlignment}"

FontFamily="{Binding FontName, Converter={StaticResource nameToFontFamiltyConverter}}"

FontStyle="{Binding FontStyle}"

FontWeight="{Binding FontWeight}"

FontSize="{Binding FontSize}"

TextDecorations="{Binding IsFontUnderlined, Converter={StaticResource boolToUnderlinedConverter}}" />

</DataTemplate>

<DataTemplate x:Key="annotationEditTemplate">

<Grid VerticalAlignment="Stretch"

HorizontalAlignment="Stretch">

<TextBox Text="{Binding Label, Mode=TwoWay}"

TextWrapping="Wrap"

AcceptsReturn="True"

VerticalScrollBarVisibility="Auto"

HorizontalScrollBarVisibility="Auto"

VerticalAlignment="Stretch"

HorizontalAlignment="{Binding FontAlignment, Mode=TwoWay}"

FontFamily="{Binding FontName, Mode=TwoWay, Converter={StaticResource nameToFontFamiltyConverter}}"

FontStyle="{Binding FontStyle, Mode=TwoWay}"

FontWeight="{Binding FontWeight, Mode=TwoWay}"

FontSize="{Binding FontSize, Mode=TwoWay}"

BorderThickness="0" />

</Grid>

</DataTemplate>

Style Template:

<Style TargetType="telerik:RadDiagramShape">

<Setter Property="Background"

Value="CornflowerBlue" />

<Setter Property="BorderBrush"

Value="DarkSlateBlue" />

</Style>

View Model:

public class ColorViewModel : NodeViewModelBase

{

protected string mLabel;

protected Guid mId;

protected Color mBackgroundColor;

protected Color mForegroundColor;

protected Color mBorderColor;

protected double mBorderThickness;

private string mFontName;

private double mFontSize;

private FontStyle mFontStyle;

private FontWeight mFontWeight;

private HorizontalAlignment mFontAlignment;

private bool mIsFontUnderlined;

public ColorViewModel()

{

IsContentEditable = true;

//Defaults

BackgroundColor = Colors.LightGray;

ForegroundColor = Colors.Black;

BorderColor = Colors.DarkGray;

BorderThickness = 1;

FontName = "Arial";

FontSize = 10;

FontStyle = FontStyles.Normal;

FontWeight = FontWeights.Normal;

FontAlignment = HorizontalAlignment.Left;

IsFontUnderlined = false;

}

public string Label

{

get{return mLabel; }

set

{

if (mLabel != value)

{

mLabel = value;

OnPropertyChanged("Label");

}

public Guid Id

{

get {return mId; }

set

{

if (mId != value)

{

mId = value;

OnPropertyChanged("Id");

}

public Color BackgroundColor

{

get {return mBackgroundColor; }

set

{

if (mBackgroundColor != value)

{

mBackgroundColor = value;

OnPropertyChanged("BackgroundColor");

}

public Color ForegroundColor

{

get {return mForegroundColor;}

set

{

if (mForegroundColor != value)

{

mForegroundColor = value;

OnPropertyChanged("ForegroundColor");

}

public Color BorderColor

{

get { return mBorderColor; }

set

{

if (mBorderColor != value)

{

mBorderColor = value;

OnPropertyChanged("BorderColor");

}

public double BorderThickness

{

get { return mBorderThickness; }

set

{

if (mBorderThickness != value)

{

mBorderThickness = value;

OnPropertyChanged("BorderThickness");

}

public string FontName

{

get { return mFontName; }

set

{

if (mFontName != value)

{

mFontName = value;

OnPropertyChanged("FontName");

}

public double FontSize

{

get { return mFontSize; }

set

{

if (mFontSize != value)

{

mFontSize = value;

OnPropertyChanged("FontSize");

}

public FontStyle FontStyle

{

get { return mFontStyle; }

set

{

if (mFontStyle != value)

{

mFontStyle = value;

OnPropertyChanged("FontStyle");

}

public FontWeight FontWeight

{

get { return mFontWeight; }

set

{

if (mFontWeight != value)

{

mFontWeight = value;

OnPropertyChanged("FontWeight");

}

public HorizontalAlignment FontAlignment

{

get { return mFontAlignment; }

set

{

if (mFontAlignment != value)

{

mFontAlignment = value;

OnPropertyChanged("FontAlignment");

}

public bool IsFontUnderlined

{

get { return mIsFontUnderlined; }

set

{

if (mIsFontUnderlined != value)

{

mIsFontUnderlined = value;

OnPropertyChanged("IsFontUnderlined"); }

}

// Non-observable

public bool IsContentEditable { get; set; }

}

Diagram

answered on 05 Jan 2015

1 answer

121 views

How to Change Cursor of the Active Tool

Hello,

I would like to know if we can change the cursor of the ActiveTool. In particular, when the TextTool is active I would like a different cursor to be displayed (currently it is the same as the PointerTool). When the Pan Tool is set, the cursor does change, and all the tools derived from ToolBase class have a Cursor property, but it is protected. Ideally, I'd like to be able to set the TextTool cursor in the XAML. If there is a way to change the active cursor, what is the best approach?

Thanks in advance,

Mike

Diagram

answered on 25 Dec 2014

3 answers

171 views

How to bind a view model to RadDiagramTextShape with TextTool?

I have a diagram with multiple types of shapes that are bound to a view-model heirarchy that inherits from NodeViewModelBase similar to the following:

public class RainbowViewModel : ObservableGraphSourceBase<ColorViewModel, inkViewModelBase<ColorViewModel>>

{ }

public class ColorViewModel : NodeViewModelBase

{

protected string mLabel;

public string Label

{

get

{

return mLabel;

}

set

{

if (mLabel != value)

{

mLabel = value;

OnPropertyChanged("Label");

}

nd there are other view model shapes that derive from ColorViewModel and I used a NodeTemplateSelector and NodeStyleSelector to specify the data templates and style templates of each type of node. So far so good. But I also need to allow the user to add text annotations to the diagram. So the user can set the active tool to the TextTool and they are able to draw text. But, I need to be able to bind the text items the user adds to a corresponding view model and do two-way binding of the text. When the active tool is the TextTool, and a user adds a text shape to the diagram, the content of the shape is bound to an instance of a ColorViewModel. I can set a style template for the text shapes that the user adds, but when I bind the text to the underlying view model, things get borked.

Here is an example of the data template I have tried (and multiple variations of it):

<DataTemplate x:Key="annotationTemplate">

<Grid VerticalAlignment="Stretch"

HorizontalAlignment="Stretch">

<TextBox Text="{Binding Label, Mode=TwoWay}"

TextWrapping="Wrap"

AcceptsReturn="True"

VerticalScrollBarVisibility="Auto"

HorizontalScrollBarVisibility="Auto"

VerticalAlignment="Stretch"

HorizontalAlignment="Stretch" />

</Grid>

</DataTemplate>

and here is the style template:

<Style x:Key="annotationShapeStyle"

TargetType="telerik:RadDiagramTextShape">

<Setter Property="Visibility"

Value="{Binding Visibility, Mode=TwoWay}" />

<Setter Property="Position"

Value="{Binding Position, Mode=TwoWay}" />

<Setter Property="IsResizingEnabled"

Value="True" />

<Setter Property="IsRotationEnabled"

Value="True" />

<Setter Property="IsEditable"

Value="True" />

<Setter Property="IsConnectorsManipulationEnabled"

Value="False" />

<Setter Property="Background"

Value="LightGray" />

</Style>

Both templates are being correctly applied but when the data template is applied, the text is bound to the view model but I cannot change certain properties of the text using the SettingsPane and I cannot get the text box to act like the default text box of the RadDiagramTextShape. For example, the text box does not scale with the shape, and the forground color does not change when the SettingsPane is used.

Can anyone provide any advice on how to bind a view model to a RadDiagramTextShape and allow that shape to be edited using the SettingsPane and to have that shape act as like the default text shape?

Much thanks in advance,

Mike

Diagram

answered on 24 Dec 2014

2 answers

49 views

TextTool Exception When Diagram Bound To Collection

I am using the diagram tool and it is bound to a collection of shapes which represent business objects. The collecion derives from GraphSourceBase<LocationNodeViewModel, LinkViewModelBase<T>> and a DataTemplateSelector is used to set the shape. All business shapes are not editable, nor are the connections between them. I also need to add blocks of text anywhere in the diagram as text annotations. But, when I set the ActiveTool to TextTool, an exception is thrown. It appears that the textblock cannot be added to the bound collection. If I unbind the diagram from the collection, the text will be added just fine.

Do I need to customize the shape that represents the text block being added? And does this require customizing the TextTool itself, or is there some other preferred approach to achieving this? I have recreated this issue in a sample project if needed.

Much thanks in advance,

Mike

Diagram

answered on 23 Dec 2014

8 answers

111 views

Connector ConnectionPoints bound to view model?

I need to dynamically manage the routes of connections between shapes and this includes adding/removing from the ConnectionPoints collection of the connectors. The diagram is bound to a view-model inheriting from ObservableGraphSourceBase<> such that each connection is bound to a corresponding LinkViewModelBase<> derived class. Is there a way to bind the ConnectionPoints collection to a property on the view model bound to each connector? I know the ConnectionPoints can be manipulated in the code-behind, but the logic requires (ideally) unit tests to validate and therefor I would much rather be able to work with the view model. If there is a way to do this, can someone point me in the right direction?

Much thanks,

Mike

Diagram

answered on 11 Dec 2014

1 answer

40 views

Select link on diagram click

For some reason after upgrading the control the following code doesn't work when the diagram is in read only mode. This used to work. It there some difference in the new version of the control or a different way to do this. BTW, it works for nodes, just not links.

CustomDiagramLink clickedItem4 = (CustomDiagramLink)currentDiagram.GetLinkAt(pastePoint, 5, true);

Diagram