TextEditable - TextEditor Placement

Hello,

I’ve made a node template in which my textblock has some padding setting.

The problem comes from the edition, the textbox edition is setting in location 0,0. Not uppon my textblock…

I try to use this TextEditAdornmentTemplate :

<DataTemplate x:Key="SphTextEditAdornmentTemplate">
        <TextBox FontFamily="{Binding Path=Node.AdornedElement.FontFamily, Mode=OneTime}"
                 FontSize="{Binding Path=Node.AdornedElement.FontSize, Mode=OneTime}"
                 FontStretch="{Binding Path=Node.AdornedElement.FontStretch, Mode=OneTime}"
                 FontStyle="{Binding Path=Node.AdornedElement.FontStyle, Mode=OneTime}"
                 FontWeight="{Binding Path=Node.AdornedElement.FontWeight, Mode=OneTime}"
                 TextAlignment="{Binding Path=Node.AdornedElement.TextAlignment, Mode=OneTime}"
                 TextDecorations="{Binding Path=Node.AdornedElement.TextDecorations, Mode=OneTime}"
                 TextWrapping="{Binding Path=Node.AdornedElement.TextWrapping, Mode=OneTime}"
                 Padding="{Binding Path=Node.AdornedElement.Padding, Mode=OneTime}"
                 Background="Green"
                 Foreground="Black" />
    </DataTemplate>

The green and padding are ok, but I still have a difference between edition and textblock location.

Before edition:

In Edition mode : ??

An other little problem comes when I add a node in the diagram, the selection template is not at is right place :

Thanks
Aurore

My node template

  <DataTemplate x:Key="QDNoteTemplate">
        <go:SpotPanel Name="oSpotPanel"
                      go:Node.SelectionAdorned="True"
                      go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"                      
                      go:Part.LayerName="{Binding Path=Data.LayerName, Mode=TwoWay}"
                      go:Part.Resizable="True"
                      go:Node.LinkableFrom="False" go:Node.LinkableTo="False"
                      go:Part.ResizeAdornmentTemplate="{StaticResource ResizeSelectedTemplate}"
                      go:Part.SelectionAdornmentTemplate="{StaticResource SelectedNoteTemplate}"
                      Height="{Binding Path=Data.Height, Mode=TwoWay}"
                      Width="{Binding Path=Data.Width, Mode=TwoWay}"
                      go:Part.SelectionElementName="oPath"
                      >

            <Viewbox Stretch="Fill"
                     Name="NoteBd"
                     VerticalAlignment="Center"
                     HorizontalAlignment="Center"
                     Width="{Binding ElementName=oPath, Path=ActualWidth}"
                     Height="{Binding ElementName=oPath, Path=ActualHeight}">
                <Canvas Width="264.756"
                        Height="176.422"> 
                        <Path StrokeThickness="1.0"
                              Stroke="#ffe8c063"
                              StrokeMiterLimit="1.0"
                              Data="F1 M 263.141,99.757 C 265.467,119.763 264.812,123.912 245.227,124.631 C 225.646,125.351 219.377,124.552 219.377,124.552 C 219.377,124.552 220.573,149.242 216.256,158.667 C 214.120,163.330 213.107,167.835 209.814,171.101 C 202.811,175.538 195.621,176.373 179.795,175.732 C 143.711,174.277 2.369,174.578 2.369,174.578 L 0.506,1.268 L 263.324,0.501 C 263.324,0.501 260.820,79.758 263.141,99.757 Z">
                            <Path.Fill>
                                <LinearGradientBrush MappingMode="Absolute"
                                                     StartPoint="2601.540,2083.942"
                                                     EndPoint="2378.290,2004.516">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="0.00"
                                                      Color="#ffedd868" />
                                        <GradientStop Offset="0.54"
                                                      Color="#fff4e68b" />
                                        <GradientStop Offset="1.00"
                                                      Color="#fffbf4ad" />
                                    </LinearGradientBrush.GradientStops>
                                    <LinearGradientBrush.Transform>
                                        <MatrixTransform Matrix="0.792,0.697,-0.661,0.751,-494.936,-3195.114" />
                                    </LinearGradientBrush.Transform>
                                </LinearGradientBrush>
                            </Path.Fill>
                        </Path>
                        <Path StrokeThickness="1.0"
                              Stroke="#ffe8c063"
                              StrokeMiterLimit="1.0"
                              Fill="#ffe8c063"
                              Data="F1 M 234.481,148.732 C 222.285,160.174 216.119,167.093 209.814,171.101 C 213.107,167.835 214.120,163.330 216.256,158.667 C 220.573,149.242 219.377,124.552 219.377,124.552 C 219.377,124.552 225.646,125.351 245.227,124.631 C 264.812,123.912 265.467,119.763 263.141,99.757 C 260.820,79.758 263.324,0.501 263.324,0.501 C 263.324,0.501 261.792,82.026 263.699,103.082 C 265.373,121.580 265.189,119.931 234.481,148.732 Z" />
                </Canvas>
                <Viewbox.BitmapEffect>
                    <DropShadowBitmapEffect Color="Gray"
                                            ShadowDepth="10"
                                            Opacity="0.7" />
                </Viewbox.BitmapEffect>
            </Viewbox>
           
            <TextBlock Text="{Binding Data.Note.Label}"                 
                                  Padding="10,20,10,20"
                                HorizontalAlignment="Left"
                               VerticalAlignment="Top"
                               x:Name="oPath"
                               MinWidth="50"
                               MinHeight="50"
                               go:Part.TextEditable="True"
                               go:Part.TextEditAdornmentTemplate="{StaticResource SphTextEditAdornmentTemplate}"
                               >
                          <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Data.Note.IsFinished}"
                                                     Value="True">
                                            <Setter Property="TextDecorations"
                                                    Value="Strikethrough" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
        </go:SpotPanel>
    </DataTemplate>

If you use a NodePanel with Sizing=“Fixed” instead of a SpotPanel, if you use Margin instead of Padding in the appropriate places, and if you allow users to resize the background shape instead of the TextBlock, I think everything works out just fine. But I may have misinterpreted your intentions, so perhaps this doesn’t do what you want. I also didn’t have two of the templates you use, so I couldn’t try them.

[code]

<DataTemplate x:Key="QDNoteTemplate">
  <go:NodePanel Sizing="Fixed"
                x:Name="oSpotPanel"
                go:Node.SelectionAdorned="True"
                go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"                      
                go:Part.LayerName="{Binding Path=Data.LayerName, Mode=TwoWay}"
                go:Part.Resizable="True"
                go:Part.SelectionElementName="NoteBd">

    <Viewbox Stretch="Fill"
             x:Name="NoteBd"
             VerticalAlignment="Center"
             HorizontalAlignment="Center"
             MinWidth="50"
             MinHeight="70"
             Height="{Binding Path=Data.Height, Mode=TwoWay}"
             Width="{Binding Path=Data.Width, Mode=TwoWay}">
      <Canvas  . . .  />
    </Viewbox>

    <TextBlock Text="{Binding Data.Name}"                 
               x:Name="oPath"
               Margin="10,20,10,20"
               HorizontalAlignment="Left"
               VerticalAlignment="Top"
               go:Part.TextEditable="True"
               go:Part.TextEditAdornmentTemplate="{StaticResource SphTextEditAdornmentTemplate}">
    </TextBlock>
  </go:NodePanel>
</DataTemplate>[/code]

I forgot to mention that you probably want to set TextWrapping=“Wrap” on your TextBlock.

With this template, it is ok for edition but I have a new trouble :

using margin instead of padding implies that the node is only selectable on text clicking and not when we click on figure... 

I think it is because the selectable object should be a FrameworkElement.

I don’t remember why I use SpotPanel instead of NodePanel, maybe due to the above issue.

Thanks for your help

Aurore

Interesting – it works in Silverlight but not in WPF.

The reason has something to do with the Viewbox. We’ll investigate.

As a temporary work-around you could maybe place a Transparent-filled Rectangle in front of the shape, behind the TextBlock.

This GoWPF bug has been fixed in Latest Releases