uwp AutoSuggestBox ItemsSource not working - xaml

I have created a simple UWP app. All I want is, whenever the user clicks on the AutoSuggestBox, it needs to show all the items in the ItemsSource as suggestions. A combobox is working fine when I set the DisplayMemberPath but the AutoSuggestBox upon clicking doesn't show the ItemsSource as suggestions. Please help. (In this case when I click on the AutoSuggestBox, it needs to display ABC, BCD)
xaml: MainPage.xaml
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
<ComboBox Width="120"
ItemsSource="{Binding TestList,Mode=OneWay}"
SelectedIndex="0"
DisplayMemberPath="Name"/>
<AutoSuggestBox Width="200"
Margin="0,20,0,0"
ItemsSource="{Binding TestList,Mode=OneWay}"
DisplayMemberPath="Name"
TextMemberPath="Name"
PlaceholderText="Search"/>
</StackPanel>
Code Behind: MainPage.xaml.cs
public class Test
{
public string Name { get; set; }
public int Id { get; set; }
}
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
private List<Test> _testList;
public List<Test> TestList
{
get
{
_testList = new List<Test>();
_testList.Add(new Test()
{
Name = "ABC",
Id = 1,
});
_testList.Add(new Test()
{
Name = "BCD",
Id = 2,
});
return _testList;
}
}
public MainPage()
{
this.InitializeComponent();
this.DataContext = this;
}
}

In this case when I click on the AutoSuggestBox, it needs to display ABC, BCD
Please refer AutoSuggestBox document, Represents a text control that makes suggestions to users as they enter text using a keyboard or pen (using ink and handwriting recognition). it will filter your data based on the input. Then, set the filtered data as the ItemsSource of the AutoSuggestBox to update the suggestion list. So the drop list only rendered when you typing. and it will not display the drop-list when you click the AutoSuggestBox.
For this scenario, the best practice is using ComboBox to replace.

Related

Stacklayout backgroundColor binding with MVVM

I'm attempting to get my head around MVVM with XamarinForms and I'm slightly confused with regards to proper partitioning of functionality:
I have a main page, MainPage.xaml, which includes a stacklayout:
<StackLayout x:Name="MainPageStackLayout">
...
</StackLayout>
Within this stacklayout I have Picker which is bound as follows:
<Picker Title="Select a background colour"
TitleColor="Black"
TextColor="Black"
ItemsSource="{Binding MyColours}"
ItemDisplayBinding="{Binding Name}"
SelectedItem="{Binding selectedBackGroundColour}" SelectedIndexChanged="BackGroundColourPicker_SelectedIndexChanged"/>
Following the article from microsoft (https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-monkeyapppicker/):
I have a "View" which basically defines the layout of my page.
A "ViewModel" which holds an IList "MyColours" and a variable "SelectedBackGroundColour".
A "Model" which defines the MyColour class. A MyColour has a string name and a Xamarin.Forms.Color (from a hex value, both populated on start up).
This all works fine. I can start up the app and the Picker populates with the colours I add to "MyColours". If I change the index then my SelectedBackGroundColour also updates, has the correct name and a different RGB value.
However, I'm lost as to where I would tie in the updating of the actual background colour of the MainPageStackLayout. The View (MainPage.xaml.cs) picks up the "BackGroundColourPicker_SelectedIndexChanged" event but what is the standard practice for reading from the view model (where SelectedBackGround colour is actual defined ?)
I have a feeling I can bind Background colour in the MainPageStackLayout xaml view so I wont have to catch the selected index change event.
Thanks all.
According to your description, I guess that you want to change MainPage StackLayout BackGround color by Picker value, am I right?
If yes, please follow the steps below.
Firstly, please confirm that you implement INotifyPropertyChanged interface to notify SelectedBackGroundColour changed.
Then there are full code, please take a look:
<StackLayout x:Name="MainPageStacklayout" BackgroundColor="{Binding selectedBackGroundColour.color}">
<Picker
x:Name="picker1"
Title="Select a background colour"
ItemDisplayBinding="{Binding name}"
ItemsSource="{Binding MyColours}"
SelectedItem="{Binding selectedBackGroundColour}"
TextColor="Black"
TitleColor="Black" />
</StackLayout>
public partial class Page5 : ContentPage, INotifyPropertyChanged
{
public ObservableCollection<MyColour> MyColours { get; set; }
private MyColour _selectedBackGroundColour;
public MyColour selectedBackGroundColour
{
get { return _selectedBackGroundColour; }
set
{
_selectedBackGroundColour = value;
RaisePropertyChanged("selectedBackGroundColour");
}
}
public Page5()
{
InitializeComponent();
MyColours = new ObservableCollection<MyColour>()
{
new MyColour(){name="red",color=Color.Red},
new MyColour(){name="gray",color=Color.Gray},
new MyColour(){name="BlueViolet",color=Color.BlueViolet}
};
selectedBackGroundColour = MyColours[0];
this.BindingContext = this;
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class MyColour
{
public string name { get; set; }
public Color color { get; set; }
}
The screenshot:

Render one test element of ItemsSource in XAML

I have a XAML element that I want to style, but as it is inside of a dynamic list (which I set using Name=""), I can't see any of my changes while writing the XAML.
Is there a way so that Visual Studio renders one (or a few) test element(s), so that I can see what I am doing?
If you set the DataContext of the control then the XAML Designer will pick up any data from it.
<UserControl.Resources>
<local:MyViewModel x:Key="MyViewModel"/>
</UserControl.Resources>
<ListBox DataContext="{StaticResource MyViewModel}" ItemsSource="{Binding Items}">
</ListBox>
public class MyViewModel
{
public string[] Items { get; set; }
public MyViewModel()
{
Items = new[] { "Item1", "Item2", "Item3" };
}
}

How to get access to text from all the textboxes( where textboxes are created dynamically) in windows phone runtime

I have been trying to get texts from the collection of textboxes which are created dynamically by binding a collection to a stackpanel using items control which is in seperate user control which i am loading on a page in windows phone runtime.
Below is the code of my UserControl:
<UserControl
x:Class="CfMobility.UserControls.CredentialsUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CfMobility.UserControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding SelectedCategorySettings}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel IsTapEnabled="False">
<TextBlock Text="{Binding SettingKey}" Style="{ThemeResource BaseTextBlockStyle}"></TextBlock>
<TextBox Text="{Binding SettingValue}" Width="300px"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</UserControl>
I have a Content control in another page as below:
<ContentControl x:Name="Container" Grid.Row="1" Margin="19,10,19,0">
</ContentControl>
Where i am binding this content control to above stackpanel when i am navigating to the page.
As You can see i had bonded "SelectedCategorySettings" collection to StackPanel using ItemsScroll which displays number of text boxes based on the collecion. Here i am unable to figure out if i want to save text from all the text boxes which are displayed on the page into a json file, how to access the text of all the text boxes which are dynamically displayed in above scenario?
PS: note that items is control is in a separate user control.
Thanks in Advance
You should use ObservableCollection for SelectedCategorySettings and your model class which contains SettingKey and SettingValue should implement INotifyPropertyChanged interface as in following example code. If you do it correctly then whatever the changes happen in UI (in your case, text changes of textbox) will automatically reflect in your model objects in the ObservableCollection. If you are interested to learn more about how this works, I recommend you to search about mvvm design pattern in Windows Phone development.
public class Setting : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _settingKey;
public string SettingKey
{
get { return _settingKey; }
set {
_settingKey = value;
OnPropertyChanged("SettingKey");
}
}
private string _settingValue;
public string SettingValue
{
get { return _settingValue; }
set {
_settingValue = value;
OnPropertyChanged("SettingValue");
}
}
public virtual void OnPropertyChanged(string propertyName)
{
var propertyChanged = PropertyChanged;
if (propertyChanged != null)
{
propertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
What you need is a method like this:
var textBoxes = AllTextBoxes(this);
public List<TextBox> AllTextBoxes(DependencyObject parent)
{
var list = new List<TextBox>();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
{
var child = VisualTreeHelper.GetChild(parent, i);
if (child is TextBox)
{
list.Add(child as Control);
continue;
}
list.AddRange(AllChildren(child));
}
return list;
}

WinRT XAML Toolkit BindableSelections not updating UI

Below is the xaml and c# code for handling selected items in my gridview.
I am also using MVVM Light and everything is working, including me being able to see what's inside SelectedItems.
However I when I attempt to clear the SelectedItems, my UI doesn't seem to update/reflect the changes made to SelectedItems.
I am using WinRT XAML Toolkit (http://winrtxamltoolkit.codeplex.com/) which has the BindableSelection extension on a GridView
XAML
<controls:CustomGridView
x:Name="VideoItemGridView"
Grid.Row="2"
Margin="0,-3,0,0"
Padding="116,0,40,46"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
IsItemClickEnabled="True"
SelectionMode="Extended"
Extensions:GridViewExtensions.BindableSelection="{Binding SelectedVideoItems, Mode=TwoWay}"
ItemsSource="{Binding Source={StaticResource ViewSource}}"
ItemTemplate="{StaticResource VideoItemTemplate}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="250" ItemHeight="160" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</controls:CustomGridView>
MyViewViewModel.cs
#region Selected Items
/// <summary>
/// Gets or sets the selected video items.
/// </summary>
public ObservableCollection<object> SelectedVideoItems
{
get { return this._selectedVideoItems; }
set
{
this._selectedVideoItems = value;
this.Set("SelectedVideoItems", ref this._selectedVideoItems, value);
}
}
private ObservableCollection<object> _selectedVideoItems = new ObservableCollection<object>();
#endregion
#region App Bar Click Commands
/// <summary>
/// Gets the ClearSelection click command.
/// </summary>
public ICommand ClearSelectionClickCommand
{
get
{
return new RelayCommand(() => this.ClearSelectionOperation());
}
}
/// <summary>
/// Selects all command operation.
/// </summary>
private void ClearSelectionOperation()
{
this.SelectedVideoItems = new ObservableCollection<object>();
}
#endregion
Try clearing your selected items in ClearSelectionOperation by calling
this.SelectedVideoItems.Clear();
instead of
this.SelectedVideoItems = new ObservableCollection<object>();
If that doesn't help check if the current version of the extension from March 7 fixes the problem.
It turns out that since I am using a data template, it is actually my data model that needed to set a flag to indicate it is selected
Here's the missing piece of the puzzle. Once I update the data model bound to the grid view item (which also includes support for row/col spanning), the UI updated as expected.
Hope this helps others.
public class CustomGridView : GridView
{
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
try
{
base.PrepareContainerForItemOverride(element, item);
dynamic _Item = item;
element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, _Item.ColumnSpan);
element.SetValue(VariableSizedWrapGrid.RowSpanProperty, _Item.RowSpan);
element.SetValue(GridViewItem.IsSelectedProperty, _Item.IsSelected);
}
catch
{
element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 1);
element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1);
element.SetValue(GridViewItem.IsSelectedProperty, false);
}
finally
{
base.PrepareContainerForItemOverride(element, item);
}
}

ComboBox SelectedValue doesn't show

I have a strange problem in my WinRT/C# XAML Metro app, using the Windows 8 Release Preview (latest patches installed). I'm using a ComboBox, whose values ItemsSource and SelectedValue are bound to properties in a ViewModel:
<ComboBox SelectedValue="{Binding MySelectedValue, Mode=TwoWay}"
ItemsSource="{Binding MyItemsSource, Mode=OneWay}"
Width="200" Height="30" />
Code behind:
public MainPage()
{
this.InitializeComponent();
DataContext = new TestViewModel();
}
And a very simple definition of the TestViewModel, using strings:
public class TestViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private IEnumerable<string> _myItemsSource = new List<string>
{
"Test Item 1",
"Test Item 2",
"Test Item 3"
};
public IEnumerable<string> MyItemsSource
{
get { return _myItemsSource; }
}
private string _mySelectedValue = "Test Item 2";
public string MySelectedValue
{
get { return _mySelectedValue; }
set
{
_mySelectedValue = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("MySelectedValue"));
}
}
}
}
Now I thought this simple solution should just work... But when I start the app, the SelectedValue="Test Item 2" doesn't show up, the ComboBox is left empty. By setting breakpoints I noticed that the bound values MyItemsSource and MySelectedValue are corectly retrieved from the View Model when I set the DataContext of the view. After this action, the ComboBox.SelectedValue property is actually set to "Test Item 2", but it just doesn't show! Also I noticed that when I change the selected value in the ComboBox by user action on the UI, the changed value shows up in the ComboBox and the View Model property is updated accordingly. So everything seems to work fine except the initial visualization of the MySelectedValue View Model property. I'm becoming really desperate about that...
Now while this is the simplest example, in the origin I wanted to bind whole entities to ComboBox, setting DisplayMemberPath and SelectedValuePath. Unfortunately, the same problem occurs.
I found the problem in my example: In the XAML markup I've defined the SelectedValue property before the ItemsSource property. If I swap both definitions in this way, it works:
<ComboBox ItemsSource="{Binding MyItemsSource, Mode=OneWay}"
SelectedValue="{Binding MySelectedValue, Mode=TwoWay}"
Width="200" Height="30" />
This is really odd and annoying. Now I would like to know: is this a bug or by design? I think this is a bug, because the control should be working regardless of the order of the defined properties in XAML.
this is working solution : you can find here https://skydrive.live.com/?cid=b55690d11b67401d&resid=B55690D11B67401D!209&id=B55690D11B67401D!209
<ComboBox Width="300" Height="32" HorizontalAlignment="Left" DisplayMemberPath="Name"
VerticalAlignment="Top" ItemsSource="{Binding PersonCollection}"
SelectedItem="{Binding SelectedPerson, Mode=TwoWay}"></ComboBox>
ViewModle class is
public class ViewModel:BaseViewModel
{
private Person selectedPerson;
public Person SelectedPerson {
get { return this.selectedPerson; }
set { this.selectedPerson = value;
this.RaisePropertyChanged("SelectedPerson");
}
}
public ObservableCollection<Person> PersonCollection { get; set; }
public ViewModel()
{
this.PersonCollection = new ObservableCollection<Person>();
this.PopulateCollection();
//setting first item as default one
this.SelectedPerson = this.PersonCollection.FirstOrDefault();
}
private void PopulateCollection()
{
this.PersonCollection.Add(new Person { Name="Oscar", Email="oscar#sl.net" });
this.PersonCollection.Add(new Person { Name = "Jay", Email = "jay#sl.net" });
this.PersonCollection.Add(new Person { Name = "Viral", Email = "viral#sl.net" });
}
}