Fix custom border thickness causing layout shifting

CHANGELOG.md

@@ -4,9 +4,11 @@
 
 > - Breaking Changes:
 > - Features:
+>   - Added ItemContainer.SelectedBorderThickness dependency property
 > - Bugfixes:
 >   - Fixed PendingConnection.PreviewTarget not being set to null when there is no actual target
 >   - Fixed connectors panel not being affected by Node.VerticalAlignment
+>   - Changing BorderThickness causes layout shift when selecting an item container
 
 #### **Version 5.0.2**
 

Examples/Nodify.Calculator/EditorView.xaml

@@ -95,6 +95,7 @@
             <Setter Property="ActualSize"
                     Value="{Binding Size, Mode=OneWayToSource}" />
             <Setter Property="BorderBrush" Value="{Binding BorderBrush, Source={StaticResource AnimatedBorderPlaceholder}}" />
+            <Setter Property="BorderThickness" Value="2" />
         </Style>
     </UserControl.Resources>
 

Examples/Nodify.Playground/Editor/NodifyEditorView.xaml

@@ -315,7 +315,7 @@
                                 <Setter.Value>
                                     <DataTemplate DataType="{x:Type local:ConnectorViewModel}">
                                         <StackPanel Orientation="Horizontal">
-                                            <TextBlock Text="{Binding Title}" Margin="0 0 5 0" />
+                                            <TextBlock Text="{Binding Title}" Margin="0 0 5 0" VerticalAlignment="Center" />
                                             <ComboBox DisplayMemberPath="Name"
                                                       SelectedValuePath="Value"
                                                       SelectedValue="{Binding Shape}"
@@ -383,6 +383,10 @@
             <nodify:NodifyEditor.ItemContainerStyle>
                 <Style TargetType="{x:Type nodify:ItemContainer}"
                        BasedOn="{StaticResource {x:Type nodify:ItemContainer}}">
+                    <Setter Property="BorderThickness"
+                            Value="2" />
+                    <Setter Property="SelectedBorderThickness"
+                            Value="4" />
                     <Setter Property="CacheMode">
                         <Setter.Value>
                             <BitmapCache RenderAtScale="{Binding MaxZoom, Source={x:Static local:EditorSettings.Instance}}" EnableClearType="True" />

Nodify/Helpers/BoxValue.cs

@@ -19,6 +19,7 @@ public static class BoxValue
         public static readonly object Int1 = 1;
         public static readonly object UInt1 = 1u;
 
+        public static readonly object Thickness2 = new Thickness(2);
         public static readonly object ArrowSize = new Size(8, 8);
         public static readonly object ConnectionOffset = new Size(14, 0);
     }

Nodify/ItemContainer.cs

@@ -22,6 +22,7 @@ public class ItemContainer : ContentControl, INodifyCanvasItem
 
         public static readonly DependencyProperty HighlightBrushProperty = DependencyProperty.Register(nameof(HighlightBrush), typeof(Brush), typeof(ItemContainer));
         public static readonly DependencyProperty SelectedBrushProperty = DependencyProperty.Register(nameof(SelectedBrush), typeof(Brush), typeof(ItemContainer));
+        public static readonly DependencyProperty SelectedBorderThicknessProperty = DependencyProperty.Register(nameof(SelectedBorderThickness), typeof(Thickness), typeof(ItemContainer), new FrameworkPropertyMetadata(BoxValue.Thickness2));
         public static readonly DependencyProperty IsSelectableProperty = DependencyProperty.Register(nameof(IsSelectable), typeof(bool), typeof(ItemContainer), new FrameworkPropertyMetadata(BoxValue.True));
         public static readonly DependencyProperty IsSelectedProperty = Selector.IsSelectedProperty.AddOwner(typeof(ItemContainer), new FrameworkPropertyMetadata(BoxValue.False, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnIsSelectedChanged));
         public static readonly DependencyPropertyKey IsPreviewingSelectionPropertyKey = DependencyProperty.RegisterReadOnly(nameof(IsPreviewingSelection), typeof(bool?), typeof(ItemContainer), new FrameworkPropertyMetadata(null));
@@ -51,6 +52,15 @@ public Brush SelectedBrush
             set => SetValue(SelectedBrushProperty, value);
         }
 
+        /// <summary>
+        /// Gets or sets the border thickness used when <see cref="IsSelected"/> or <see cref="IsPreviewingSelection"/> is true.
+        /// </summary>
+        public Thickness SelectedBorderThickness
+        {
+            get => (Thickness)GetValue(SelectedBorderThicknessProperty);
+            set => SetValue(SelectedBorderThicknessProperty, value);
+        }
+
         /// <summary>
         /// Gets or sets the location of this <see cref="ItemContainer"/> inside the <see cref="NodifyEditor"/> in graph space coordinates.
         /// </summary>
@@ -246,6 +256,15 @@ private static void OnIsSelectedChanged(DependencyObject d, DependencyPropertyCh
         /// </summary>
         public NodifyEditor Editor { get; }
 
+        /// <summary>
+        /// The calculated margin when the container is selected or previewing selection.
+        /// </summary>
+        public Thickness SelectedMargin => new Thickness(
+            BorderThickness.Left - SelectedBorderThickness.Left,
+            BorderThickness.Top - SelectedBorderThickness.Top,
+            BorderThickness.Right - SelectedBorderThickness.Right,
+            BorderThickness.Bottom - SelectedBorderThickness.Bottom);
+
         #endregion
 
         /// <summary>

Nodify/Themes/Styles/ItemContainer.xaml

@@ -26,6 +26,8 @@
     <Style TargetType="{x:Type local:ItemContainer}">
         <Setter Property="BorderThickness"
                 Value="1" />
+        <Setter Property="SelectedBorderThickness"
+                Value="2" />
         <Setter Property="BorderBrush"
                 Value="DodgerBlue" />
         <Setter Property="SelectedBrush"
@@ -59,29 +61,29 @@
                 <MultiTrigger.Setters>
                     <Setter Property="BorderBrush"
                             Value="{Binding SelectedBrush, RelativeSource={RelativeSource Self}}" />
-                    <Setter Property="BorderThickness"
-                            Value="2" />
                     <Setter Property="Margin"
-                            Value="-1" />
+                            Value="{Binding SelectedMargin, RelativeSource={RelativeSource Self}}" />
+                    <Setter Property="BorderThickness"
+                            Value="{Binding SelectedBorderThickness, RelativeSource={RelativeSource Self}}" />
                 </MultiTrigger.Setters>
             </MultiTrigger>
             <Trigger Property="IsPreviewingSelection"
                      Value="True">
                 <Setter Property="BorderBrush"
                         Value="{Binding SelectedBrush, RelativeSource={RelativeSource Self}}" />
-                <Setter Property="BorderThickness"
-                        Value="2" />
                 <Setter Property="Margin"
-                        Value="-1" />
+                        Value="{Binding SelectedMargin, RelativeSource={RelativeSource Self}}" />
+                <Setter Property="BorderThickness"
+                        Value="{Binding SelectedBorderThickness, RelativeSource={RelativeSource Self}}" />
             </Trigger>
             <Trigger Property="local:PendingConnection.IsOverElement"
                      Value="True">
                 <Setter Property="BorderBrush"
                         Value="{Binding HighlightBrush, RelativeSource={RelativeSource Self}}" />
-                <Setter Property="BorderThickness"
-                        Value="2" />
                 <Setter Property="Margin"
-                        Value="-1" />
+                        Value="{Binding SelectedMargin, RelativeSource={RelativeSource Self}}" />
+                <Setter Property="BorderThickness"
+                        Value="{Binding SelectedBorderThickness, RelativeSource={RelativeSource Self}}" />
             </Trigger>
         </Style.Triggers>
     </Style>