Category / Section
How to place the popup of SfTextBoxExt in different position?
1 min read
To place the suggestion box popup in the different position in the SfTextBoxExt, the property SuggestionBoxPlacement of SfTextBoxExt is used. By default, the popup will placed at Bottom. The following code snippet shows how to set the SuggestionBoxPlacement at different position.
XAML:
<Page
x:Class="Windows_new.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows_new"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:editors="using:Syncfusion.UI.Xaml.Controls.Input"
mc:Ignorable="d">
<Grid Background="Black">
<editors:SfTextBoxExt Width="100" Height="23" AutoCompleteSource="{Binding Collection_new}" AutoCompleteMode="Suggest" SearchItemPath="Name" SuggestionBoxPlacement="Top"/>
</Grid>
</Page>
C#:
using Syncfusion.UI.Xaml.Controls.Input;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace Windows_new
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.DataContext = new ViewModel();
}
}
public class Model
{
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
}
public class ViewModel
{
private List<Model> collection;
public List<Model> Collection_new
{
get { return collection; }
set { collection = value; }
}
public ViewModel()
{
Collection_new = new List<Model>();
Collection_new.Add(new Model() { Name = "James" });
Collection_new.Add(new Model() { Name = "Lucas" });
Collection_new.Add(new Model() { Name = "Boyce" });
Collection_new.Add(new Model() { Name = "Alvin" });
Collection_new.Add(new Model() { Name = "Edward" });
Collection_new.Add(new Model() { Name = "New1" });
}
}
}
The following screenshot shows that the suggestionbox popup of SfTextBoxExt placed in the Top of the control
XAML:
<Page
x:Class="Windows_new.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows_new"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:editors="using:Syncfusion.UI.Xaml.Controls.Input"
mc:Ignorable="d">
<Grid Background="Black">
<editors:SfTextBoxExt x:Name="TextBoxExt1" Width="100" Height="23" AutoCompleteSource="{Binding Collection_new}" AutoCompleteMode="Suggest" SearchItemPath="Name" SuggestionBoxPlacement="None"/>
</Grid>
</Page>
C#:
using Syncfusion.UI.Xaml.Controls.Input;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace Windows_new
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.DataContext = new ViewModel();
}
}
public class Model
{
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
}
public class ViewModel
{
private List<Model> collection;
public List<Model> Collection_new
{
get { return collection; }
set { collection = value; }
}
public ViewModel()
{
Collection_new = new List<Model>();
Collection_new.Add(new Model() { Name = "James" });
Collection_new.Add(new Model() { Name = "Lucas" });
Collection_new.Add(new Model() { Name = "Boyce" });
Collection_new.Add(new Model() { Name = "Alvin" });
Collection_new.Add(new Model() { Name = "Edward" });
Collection_new.Add(new Model() { Name = "New1" });
}
}
}
The following screenshot shows no SuggestionBox popup available relative to that control.
