Category / Section
How to resize the intellisense popup in EditControl?
2 mins read
We can resize the intellisense box of EditControl by adding thumb inside intellisense popup of EditControl Template. Here we have adding the thumb in bottom of intellisense box and handle its DragStarted, DragDelta, DragCompleted events for update the cursor. Dragging the thumb in 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