CursorVisual problem

How can I change the size and the scale factor of the cursor shape of a diagram tool? I created a custom diagram tool, it is a rectangle. But the cursor when I am dragging it only have part the tool shape. Please see the attachment. Thanks.

Hello jzhou

There are a couple of things to consider here. To explain this, here is some example code of a toolbox item for a custom node (a TreeDiagramNode). Your code is probably very similar to this:

<!-- Resources -->
<SolidColorBrush x:Key="ToolBoxItemBorder" Color="#10253F" />

<LinearGradientBrush x:Key="ToolBoxItemBackground" StartPoint="0,0" EndPoint="0,1">
  <GradientStop Offset="0" Color="#3A7CCB" />
  <GradientStop Offset="1" Color="#2C5D99" />
</LinearGradientBrush>

<Style x:Key="DiagramNodeToolStyle" TargetType="ms:DiagramNodeTool">
  <Setter Property="Margin" Value="10" />
  <Setter Property="Width" Value="40" />
  <Setter Property="Height" Value="30" />
</Style>

<!-- The diagram node tool added to the tool box -->
<ms:DiagramNodeTool Builder="{StaticResource TreeNodeBuilder}" ToolTip="Node" Style="{StaticResource DiagramNodeToolStyle}">
  <ms:DiagramNodeTool.CursorVisual>
    <Border Width="40" Height="30" Background="{StaticResource ToolBoxItemBackground}" BorderBrush="{StaticResource ToolBoxItemBorder}" BorderThickness="1" Opacity="0.6" />
  </ms:DiagramNodeTool.CursorVisual>
 <Border Background="{StaticResource ToolBoxItemBackground}" BorderBrush="{StaticResource ToolBoxItemBorder}" BorderThickness="1" />
</ms:DiagramNodeTool>

Firstly, to solve the clipping issue, you'll want the dimensions of the cursor visual to be the same as the dimensions of the DiagramNodeTool. In the code above, you can see I've set the width and height of the cursor visual (Border element) explicitly to 40 and 30 respectively. The size of the DiagramNodeTool has been set in the DiagramNodeToolStyle. As you can see this is the same as the cursor visual (40 x 30).

Once you've resolved this problem, I'm guessing you want the cursor visual to be larger than the tool box item when it is being dragged. The idea is that the size of the cursor visual will determine the size of the node when it is dropped on the diagram. This makes a smooth transition from the cursor visual to the node creation, and also lets the user see the size of the node before it is created. You can control this with the DefaultSize property of the node builder. If you are making this toolbox item for your own custom node, then you probably have also implemented a node builder. You can make the DefaultSize property return the dimensions that you want for the cursor visual and thus the created node. If you are creating this toolbox item for an existing node that you didn't make the node builder for, then you won't be able to change the DefaultSize. You would either need to just keep this default size, or implement a node builder.

Please let me know if you need more help.

Jason Fauchelle

Thanks so much, I change the default size, the cursor is displayed correctly.