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

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;
}

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:

ListView selected Item binding not work

I have a listview in uwp , and a view model that declare pataient_List and selected_patient in this. my listview show itemsource but I don't know why my listview do not show selected item.
<ListView ItemsSource="{Binding pataient_List}"
SelectedItem="{Binding selected_patient, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding name_to_show_menu, Mode=TwoWay}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
viewmodel is
public class patient_view_model : notify_property_changed_base
{
public patient_view_model(patient patient_param)
{
pataient_List = new ObservableCollection<patient>();
load_patient(); // this function put patients in pataient_List
selected_patient = patient_param;
}
public patient selected_patient
{
get { return _selected_patient; }
set
{
if (_selected_patient != value)
{
_selected_patient = value;
RasiePropertyChanged();
}
}
}
public ObservableCollection<patient> pataient_List { set; get; }
One cause could be that the selected item must be one of the objects in the pataient_List.
Another cause is perhaps because you're setting the selected_patient in the constructor of the view model which is definitely before you bind the view model to the view. So, why not trying to set the selected_patient after you bind the view model to the view.
Forget about the ItemTemplate in the ListView.
<ListView ItemsSource="{Binding pataient_List}"
SelectedItem="{Binding selected_patient, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Foreground="Black">
</ListView>
.NET doesn't have a clue about how you want your data to be displayed, so it just calls the ToString() method on each object and uses that to represent the item. Override the ToString() method in the patient object to display what you need. Here is the code:
public class patient
{
public string name_to_show_menu;
public override string ToString()
{
return this.name_to_show_menu;
}
}
I solve issue with this one answer.
public override bool Equals(object obj)
{
if (this.name_to_show_menu == (obj as patient).name_to_show_menu)
return true;
else
return false;
}

Listbox Binding With No Results Listed

I have a Windows Phone App and I am trying to bind an ObservableCollection to a Listbox to list, at the moment, strings. However when I run the app nothing is listed and I cannot see where I am going wrong.
XAML:
<ListBox ItemsSource="{Binding EventList}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Black" FontSize="20"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code-Behind:
private ObservableCollection<String> eventList = new ObservableCollection<String>();
public ObservableCollection<String> EventList
{
get { return eventList; }
}
public MainPage()
{
eventList.Add("Event One");
eventList.Add("Event Two");
eventList.Add("Event Three");
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
Have you set the DataContext of your main page to the application class that has EventList as a property? Set a break point on your get accessor and check if it is being called. If not, then you need to set the DataContext.

data binding content refreshing on pivotitem page

I develop an application, and faced a problem with following part.
I have a 'textblock' that binds exact item in observable collection of items('Items') and shows the number. Each item has a property, called 'Count'.
When user taps current textblock, which is in stackpanel of longlistselector (binding Items), I need this textblock to show new number(idea is each time user taps textblock, number increases by 1).
The only method I discovered is each time Navigate to current pivot item(where textblock is situated) to force pivot item's reload data from observable collection, where updated items(and 'Count' property) are stored. But it is slow and doesn't work good.
Please, advice how to make the number appear in the textblock each time user taps on current textblock.
<phone:PivotItem Name="Documents" Header="Documents" Margin="0" >
<Grid>
<phone:LongListSelector ItemsSource="{Binding Items}" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Height="95" >
<TextBlock Tap="Plus_Tap" Visibility="Visible" Width="20" Height="50" Text="{Binding Count}" FontFamily="Segoe WP Light"
FontSize="35" Foreground="White" Margin="2,0,0,2"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</phone:PivotItem>
namespace PackMan
{
public partial class CategoryList : PhoneApplicationPage
{
public CategoryList()
{
InitializeComponent();
DataContext = App.ViewModel;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (!App.ViewModel.IsDataLoaded)
{
App.ViewModel.LoadData();
}
}
private void Plus_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
PackList selectedList = (sender as TextBlock).DataContext as PackList;
selectedList.Count += 1;
NavigationService.Navigate(new Uri("/CategoryList.xaml?Documents", UriKind.Relative));
}
}
}
How to refresh the data in pivot item after updating data through xaml UI?
here a guy in the very end of his posted answer to his own question wrote: "If you are using the observableCollection than no need to refresh the page. It is the magic of ViewModel." But I load data from 'Items' observable collection, which is not in ViewModel, but declared in Packlist.cs. Maybe this will help.
Here I do increase Count property of the item in ObservableCollection "Items" :
private void Plus_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
PackList selectedList = (sender as TextBlock).DataContext as PackList;
selectedList.Count += 1;
I tap on textblock, and text of the textblock shows no changes. I tap return - which brings me back to menu page, than again I open pivot item page, and see the textblock's text(number) increases by one. Change is seen only when I reload page(pivot item), since I have this in its constructor and OnNavigatedTo method:
public CategoryList()
{
InitializeComponent();
DataContext = App.ViewModel;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (!App.ViewModel.IsDataLoaded)
{
App.ViewModel.LoadData();
}
}
LoadData() - loads OBservable collection ("Items"), which has items, and Count as one of its properties:
public void LoadData()
{
this.Items = LoadNewLists();
this.IsDataLoaded = true;
}
Maybe now you could tell me how to make text of the textblock change instantly as I tap on it(textblock). I will be thankful for any advice, since this moment has stopped me from developing my app second day now.
I figured it out. I should have read about INotifyPropertyChanged Interface and created 'Count' property using this interface's method:
public int Count
{
get
{
return _count;
}
set
{
if (value != _count)
{
_count = value;
NotifyPropertyChanged("Count");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
Hope it will be helpful to anyone.

Xaml two way binding of textbox to observable collection

In my WP8 app I have a class, which has a ObservableCollection<ObservableCollection<int>> property called Matrix.
I want to display these matrices using items control.
<ItemsControl ItemsSource="{Binding FirstMatrix.Matrix}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The code works as far as displaying is concerned (it's filled with zeros which is a default value). But I also want to allow changes in TextBoxes which would be reflected in Matrix property - now the TextBoxes can't be changed, because their value is bound one way to Matrix cells I guess. I tried setting <TextBox Text="{Binding Mode=TwoWay}" />or sth similar but it doesn't seem to work.
Any ideas how should the data be bound ?
EDIT:
I have implemented the INotifyPropertyChanged.
Here is a part of my class:
public partial class CalcMatrix : INotifyPropertyChanged
{
public ObservableCollection<ObservableCollection<int>> Matrix
{
get { return _matrix; }
set
{
_matrix = value;
OnPropertyChanged("Matrix");
}
}
private ObservableCollection<ObservableCollection<int>> _matrix;
private void OnPropertyChanged(string argName)
{
var handler = PropertyChanged;
if(handler != null)
handler(this, new PropertyChangedEventArgs(argName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
I think the reason the TexBoxes don't change is because the binding is one-way - the Text is always what is inside the Matrix. I believe that i should somehow change the XAML binding to TwoWay or something but don't know how. Any ideas ?
Two way mode binding require path (why? see this SO answer), so you can't do it just like {Binding Mode=TwoWay}, it has to be something like {Binding SomePath, Mode=TwoWay}. Therefore, in this case you have to wrap matrix item to be some class instead of plain int and put that int as property's value of that class.
//your Matrix property type become:
...
public ObservableCollection<ObservableCollection<MatrixElement>> Matrix
...
//MatrixElement class is something like:
public class MatrixElement : INotifyPropertyChanged
{
private int _value;
public int Value
{
get { return _value; }
set {
_value = value;
OnPropertyChanged("Value");
}
}
....
}
//then you can bind TextBox in two way mode
...
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Value, Mode=TwoWay}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
...
The reason it didnt work is that the itemsource is a list of Matrix and you are not making any changes to the list iteself like adding or removing from a list instead you are changing a property of the item present in list I assume you are using an ObservableCollection....
So you need to implement a INotifyPropertyChanged interface to tell the UI that Hey I am changed please update yourself....
class YourClass : INotifyPropertyChanged
{
private string yourProperty;
public string YourPropety{
get{
return yourProperty;
}
set{
if (value != this.yourProperty)
{
this.yourProperty = value;
NotifyPropertyChanged();
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}