DYN-6440 Custom Selection Overlapped (#14960)

* DYN-6440 Custom Selection node overlapping

When choosing a large string text from the ComboBox was overlapping other controls at left side so for fixing this bug I've set the MaxWidth property and also I've added a tooltip showing the text (this will be useful when we have a large string).

* DYN-6440 Custom Selection node overlapping

Adding a new TextBlock that when has a large text will wrap the text show at the end the chars: "..."

* DYN-6440 Custom Selection node overlapping

Fixing TextBlock Style

* DYN-6440 Custom Selection node overlapping Code Review

Adding property in the Model so we can control the TextBlock Visibility.

* DYN-6440 Custom Selection node overlapping Code Review

Removed unused using

* DYN-6440 Custom Selection node overlapping Code Review

Added more comments for clarifying the use of the IsVisibleDropDownTextBlock  property.
Also I've added the Dispose() method for unsubscribing event handlers (although I'm not so sure if we are disposing this class correctly).

src/DynamoCoreWpf/UI/Themes/Modern/DynamoModern.xaml

@@ -1981,6 +1981,14 @@
                                  Foreground="#F5F5F5"
                                  IsReadOnly="{TemplateBinding IsReadOnly}"
                                  Visibility="Hidden" />
+                        <TextBlock x:Name="PART_ReadOnlyTextBlock"
+                                 Margin="10,0,20,0"
+                                 HorizontalAlignment="Left"
+                                 VerticalAlignment="Center"
+                                 Focusable="True"
+                                 TextWrapping="Wrap"
+                                 TextTrimming="CharacterEllipsis"
+                                 Visibility="{Binding IsVisibleDropDownTextBlock, Converter={StaticResource BooleanToVisibilityCollapsedConverter}}" /> 
                         <Popup Name="Popup"
                                AllowsTransparency="True"
                                Focusable="False"

src/Libraries/CoreNodeModels/Input/CustomSelection.cs

@@ -29,6 +29,23 @@ namespace CoreNodeModels.Input
     public class CustomSelection : DSDropDownBase
     {
         private List<DynamoDropDownItem> serializedItems;
+        private bool isVisibleDropDownTextBlock = false;
+
+        /// <summary>
+        /// This property will Collapse or make Visible the TextBlock for the ComboBox template "RefreshComboBox" (by default will be Collapsed)
+        /// </summary>
+        public bool IsVisibleDropDownTextBlock
+        {
+            get
+            {
+                return isVisibleDropDownTextBlock;
+            }
+            set
+            {
+                isVisibleDropDownTextBlock = value;
+                RaisePropertyChanged(nameof(IsVisibleDropDownTextBlock));
+            }
+        }
 
         /// <summary>
         /// Copy of <see cref="DSDropDownBase.Items"/> to be serialized./>

src/Libraries/CoreNodeModelsWpf/NodeViewCustomizations/CustomSelection.cs

@@ -4,6 +4,10 @@
 using System.Windows.Controls;
 using System.Windows;
 using Dynamo.Wpf;
+using CoreNodeModels;
+using System.Windows.Data;
+using System.Data.Common;
+using System;
 
 namespace CoreNodeModelsWpf.Nodes
 {
@@ -12,27 +16,77 @@ namespace CoreNodeModelsWpf.Nodes
     /// </summary>
     public class CustomSelectionNodeViewCustomization : DropDownNodeViewCustomization, INodeViewCustomization<CustomSelection>
     {
+        private CustomSelectionControl formControl;
         /// <summary>
         /// Customize the visual appearance of the custom dropdown node.
         /// </summary>
         /// <param name="model"></param>
         /// <param name="nodeView"></param>
         public void CustomizeView(CustomSelection model, NodeView nodeView)
         {
-            var formControl = new CustomSelectionControl(new CustomSelectionViewModel(model));
+            const double leftMargin = 40;
+            formControl = new CustomSelectionControl(new CustomSelectionViewModel(model));
 
             nodeView.inputGrid.Children.Add(formControl);
 
             // Add the dropdown.
             base.CustomizeView(model, nodeView);
 
             var dropdown = (ComboBox)nodeView.inputGrid.Children[1];
+            dropdown.MaxWidth = formControl.Width - leftMargin;
 
             formControl.BaseComboBox = dropdown;
+            formControl.BaseComboBox.SelectionChanged += BaseComboBox_SelectionChanged;
 
             // Add margin to the dropdown to show the expander.
-            dropdown.Margin = new Thickness(40, 0, 0, 0);
+            dropdown.Margin = new Thickness(leftMargin, 0, 0, 0);
             dropdown.VerticalAlignment = VerticalAlignment.Top;
+            dropdown.ApplyTemplate();
+
+            var dropDownTextBlock = dropdown.Template.FindName("PART_ReadOnlyTextBlock", dropdown) as TextBlock;
+            if (dropDownTextBlock != null)
+            {
+                //IsVisibleDropDownTextBlock will be false by default so the TextBlock (located in the ComboBox template) will be Collapsed then just when is a Custom Selection node we set the value to true and the TextBlock will be visible
+                //We used a TextBlock because the normal TextBox doesn't have the TextTrimming property and the requirement was asking for setting TextTrimming="CharacterEllipsis"
+                model.IsVisibleDropDownTextBlock = true;
+            }
+
+            var dropDownContent = dropdown.Template.FindName("ContentSite", dropdown) as ContentPresenter;
+            if (dropDownContent != null)
+            {
+                dropDownContent.Visibility = Visibility.Collapsed;
+            }
+
+            // Bind the TextBlock to the selected item hash.
+            var bindingVal = new Binding(nameof(DSDropDownBase.SelectedString))
+            {
+                Mode = BindingMode.TwoWay,
+                Source = model
+            };
+            dropDownTextBlock.SetBinding(TextBlock.TextProperty, bindingVal);
+        }
+
+        private void BaseComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
+        {
+            var comboSender = sender as ComboBox;
+            if (comboSender != null)
+            {
+                comboSender.ToolTip = comboSender.SelectedItem?.ToString();
+            }           
+        }
+
+        public void Dispose()
+        {
+            Dispose(true);
+            GC.SuppressFinalize(this);
+        }
+
+        protected void Dispose(bool disposing)
+        {
+            if (disposing)
+            {
+                formControl.BaseComboBox.SelectionChanged -= BaseComboBox_SelectionChanged;
+            }
         }
     }
-}
+}