Category / Section
How to resize the intellisense popup in EditControl?
3 mins read
We can resize the intellisense box of the EditControl by adding a thumb inside intellisense popup of the EditControl Template. Here we have added the thumb at the bottom of intellisense box and handled its DragStarted, DragDelta, and DragCompleted events to update the cursor. Dragging the thumb in the intellisense popup will adjust the size automatically. The following code demonstrates the same.
Code Example: [Xaml]
<!—Custom Intellisense Item-->
<Window.DataContext>
<local:CustomIntellisenseItem></local:CustomIntellisenseItem>
</Window.DataContext>
<!--EditControlStyle-->
<Style x:Key="Style1" TargetType="{x:Type syncfusion:EditControl}"
BasedOn="{StaticResource MetroEditControlStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type syncfusion:EditControl}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding
BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid SnapsToDevicePixels="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer CanContentScroll="True" x:Name="PART_Scroll"
FocusVisualStyle="{StaticResource EditControlFocusVisualStyle}"
HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}"
SnapsToDevicePixels="True">
<syncfusion:EditScrollControl x:Name="PART_ScrollControl" SnapsToDevicePixels="True" />
</ScrollViewer>
<!-- Intellisense popup -->
<Popup x:Name="PART_IntellisensePopup" Placement="Relative" AllowsTransparency="True" >
<mwt:SystemDropShadowChrome x:Name="PART_Shadow" Margin="-8,0,0,0"
SnapsToDevicePixels="True">
<StackPanel>
<Border Name="border" BorderThickness="2" Background="Transparent"
BorderBrush="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}"
Opacity="{Binding ElementName=PART_IntellisenseBox, Path=Opacity}">
<ListBox x:Name="PART_IntellisenseBox" ItemContainerStyle="{StaticResource
listboxItemStyle}" Margin="0" Padding="0" BorderThickness="0" Style="{TemplateBinding
syncfusion:EditControl.IntellisenseBoxStyle}" ItemTemplate="{TemplateBinding
syncfusion:EditControl.IntellisenseItemTemplate}">
</ListBox>
</Border>
<Border>
<!-- For Thumb -->
<Thumb HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="16" Height="16"
DragStarted="onDragStarted" DragDelta="onDragDelta" DragCompleted="onDragCompleted"/>
</Border>
</StackPanel>
</mwt:SystemDropShadowChrome>
</Popup>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontFamily" Value="Red"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="syncfusion:SkinStorage.VisualStyle" Value="Default"/>
</Style>
<Style x:Key="ListBoxStyle" TargetType="ListBox">
<Setter Property="Background" Value="LightCyan"/>
<Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemStyle}"/>
<Setter Property="syncfusion:SkinStorage.VisualStyle" Value="Default"/>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--EditControl-->
<syncfusion:EditControl Text="Syncfusion" BorderBrush="SkyBlue" BorderThickness="2"
Name="editText" Background="White" DocumentLanguage="Text" IntellisenseMode="Custom"
FontFamily="{Binding SelectedItem, ElementName=fontlst}" FontSize="{Binding
SelectedItem, ElementName=fontsize}"
IntellisenseBoxStyle="{StaticResource ListBoxStyle}" EnableOutlining="False"
ShowLineNumber="False" IntellisensePopupWidth="{Binding width, Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}" IntellisensePopupHeight="{Binding height,
Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource Style1}"/>
</Grid>
Code Example: [C#]
//For adding Custom Intellisense Item
ObservableCollection<CustomIntellisenseItem> customItems = null;
InitializeCustomIntellisenseItems();
private void InitializeCustomIntellisenseItems()
{
customItems = new ObservableCollection<CustomIntellisenseItem>();
customItems.Add(new CustomIntellisenseItem() { Text = "Syncfusion", Icon = new
BitmapImage(new Uri("/CustomIntellisenseDemo;component/Resources/syncfusion.png",
UriKind.Relative)) });
customItems.Add(new CustomIntellisenseItem() { Text = "ASP.NET", Icon = new BitmapImage(new
Uri("/CustomIntellisenseDemo;component/Resources/aspnet.png", UriKind.Relative)) });
customItems.Add(new CustomIntellisenseItem() { Text = "MVC", Icon = new BitmapImage(new
Uri("/CustomIntellisenseDemo;component/Resources/aspnet-mvc.png", UriKind.Relative)) });
customItems.Add(new CustomIntellisenseItem() { Text = "BI", Icon = new BitmapImage(new
Uri("/CustomIntellisenseDemo;component/Resources/reporting.png", UriKind.Relative)) });
customItems.Add(new CustomIntellisenseItem() { Text = "Silverlight", Icon = new
BitmapImage(new Uri("/CustomIntellisenseDemo;component/Resources/silverlight.png",
UriKind.Relative)) });
customItems.Add(new CustomIntellisenseItem() { Text = "WinForms", Icon = new BitmapImage(new
Uri("/CustomIntellisenseDemo;component/Resources/winforms.png", UriKind.Relative)) });
customItems.Add(new CustomIntellisenseItem() { Text = "WPF", Icon = new BitmapImage(new
Uri("/CustomIntellisenseDemo;component/Resources/wpf.png", UriKind.Relative)) });
editText.IntellisenseCustomItemsSource = customItems;
}
//For resizing Thumb
private void onDragStarted(object sender, DragStartedEventArgs e)
{
Thumb t = (Thumb)sender;
t.Cursor = Cursors.Hand;
}
private void onDragDelta(object sender, DragDeltaEventArgs e)
{
double yadjust = editText.IntellisensePopupHeight + e.VerticalChange;
double xadjust = editText.IntellisensePopupWidth + e.HorizontalChange;
if ((xadjust >= 0) && (yadjust >= 0))
{
if (editText.Template.FindName("border", editText) is Border)
{
(editText.Template.FindName("border", editText) as Border).Width = xadjust;
(editText.Template.FindName("border", editText) as Border).Height = yadjust;
}
}
}
private void onDragCompleted(object sender, DragCompletedEventArgs e)
{
Thumb t = (Thumb)sender;
t.Cursor = null;
}
public class CustomIntellisenseItem : IIntellisenseItem,INotifyPropertyChanged
{
private int _width;
private int _height;
public CustomIntellisenseItem()
{
_width = 150;
_height = 165;
}
public ImageSource Icon
{
get;
set;
}
public string Text
{
get;
set;
}
public IEnumerable<IIntellisenseItem> NestedItems
{
get;
set;
}
public int width
{
get
{
return _width;
}
set
{
if (value > 0)
{
_width = value;
NotifyPropertyChanged("width");
}
}
}
public int height
{
get
{
return _height;
}
set
{
if (value > 0)
{
_height = value;
NotifyPropertyChanged("height");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
Screenshot
Sample: EditControlSample
