Get the TextBlock in a ListView in Windows 8.1 - windows-phone

I am using Windows 8.1. I have a ListView which populates using ItemsSource property.
And in my ListView.ItemTempalte, it has a TextBox.
<ListView
ItemsSource="{Binding CollectionGroups, Source={StaticResource GroupedData}}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Group.Property1}"
Foreground="Black" FontSize="18" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My question is how can I get the last item text box in my C# code? The code behind for the xaml page that I show above? For example, I have 10 items in my CollectionGroups, my list view should have 10 text box. How can I get the 10th Text box of the list view?
Thank you.

First off, you need to assign names to your markup:
<ListView
ItemsSource="{Binding CollectionGroups, Source={StaticResource GroupedData}}" x:Name="lvGroupData">
<ListView.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Group.Property1}"
Foreground="Black" FontSize="18" x:Name="tbProperty1" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Then you need a VisualTreeHelper method (this is the standard way, you will find methods that are more or less like this one all over the web):
public T FindElementByName<T>(DependencyObject element, string sChildName) where T : FrameworkElement
{
T childElement = null;
var nChildCount = VisualTreeHelper.GetChildrenCount(element);
for (int i = 0; i < nChildCount; i++)
{
FrameworkElement child = VisualTreeHelper.GetChild(element, i) as FrameworkElement;
if (child == null)
continue;
if (child is T && child.Name.Equals(sChildName))
{
childElement = (T)child;
break;
}
childElement = FindElementByName<T>(child, sChildName);
if (childElement != null)
break;
}
return childElement;
}
Now you can access the element you need:
this.UpdateLayout();
// Get the last item here
var lvItem = this.lvGroupData.Items[this.lvGroupData.Items.Count - 1];
var container = this.lvGroupData.ContainerFromItem(lvItem);
// NPE safety, deny first
if (container == null)
return;
var textboxProperty1 = FindElementByName<TextBox>(container, "tbProperty1");
// And again deny if we got null
if (textboxProperty1 == null)
return;
/*
Start doing your stuff here.
*/

Related

Xamarin forms Listview selected Item fore color

bit stuck on this.
Have a list view and I want to change the theme to match the rest of my app.
Been following a few examples of how to change the selected item back color which I have working really well using custom renders, mainly this example
https://blog.wislon.io/posts/2017/04/11/xamforms-listview-selected-colour
However no example I've been able to find addresses the fore color of the selected items.
Is that something I would do with custom renders as with the background or am I backing up the wrong tree?
My list view definition is as follows
<ListView.ItemTemplate>
<DataTemplate>
<customControls:ExtendedViewCell SelectedBackgroundColor="#5DB8B3">
<ViewCell.View>
<StackLayout VerticalOptions="StartAndExpand">
<Label Text="{Binding AttributeName}"
FontSize="Small"
FontAttributes="Bold"/>
<Label Text="{Binding Description}"
FontSize="Small"/>
<Label Text="{Binding CreditorName}"
FontSize="Small"/>
</StackLayout>
</ViewCell.View>
</customControls:ExtendedViewCell>
</DataTemplate>
</ListView.ItemTemplate>
Appreciate any feedback thank
You can do this (Without a custom renderer) by adding another property to the object is bound to, and binding TextColor on the label to this new property.
Assuming your bound object looks something like this
public class BoundObject
{
public string AttributeName { get; set; }
public string Description { get; set; }
public string CreditorName { get; set; }
public int id { get; set; }
public Color TextColor { get; set; }
}
XAML
Note the ListView control added, with a name property and an ItemSelected event.
<ListView x:Name="myList" ItemSelected="myListSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="StartAndExpand">
<Label Text="{Binding AttributeName}"
FontSize="Small"
FontAttributes="Bold"
TextColor="{Binding TextColor}"
/>
<Label Text="{Binding Description}"
FontSize="Small"
TextColor="{Binding TextColor}"
/>
<Label Text="{Binding CreditorName}"
FontSize="Small"
TextColor="{Binding TextColor}"
/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Code Behind
Most of the magic happens in the code behind. Note that I'm just adding a few items to the list on start here - just for debug purposes. It's important to note that the start color is also given at the time the list needs to be created.
I've also added an ID field to the BoundObject, so we can more easily identify which object we have selected.
List<BoundObject> listItems = new List<BoundObject>();
public YourPage()
{
InitializeComponent();
for (int i = 0; i < 10; i++)
{
listItems.Add(new BoundObject() { id=i, AttributeName = "Attribute " + i, Description = i + " description", CreditorName = "Creditor: " + i, TextColor = Color.Blue });
}
myList.ItemsSource = listItems;
}
private void myListSelected(object sender, SelectedItemChangedEventArgs e)
{
if (((ListView)sender).SelectedItem == null)
return;
//Get the item we have tapped on in the list. Because our ItemsSource is bound to a list of BoundObject, this is possible.
var selection = (BoundObject)e.SelectedItem;
//Loop through our List<BoundObject> - if the item is our selected item (checking on ID) - change the color. Else - set it back to blue
foreach(var item in listItems)
{
if (item.id == selection.id)
item.TextColor = Color.Red;
else
item.TextColor = Color.Blue;
}
//ItemsSource must be set to null before it is re-assigned, otherwise it will not re-generate with the updated values.
myList.ItemsSource = null;
myList.ItemsSource = listItems;
}
The key points to the code-behind are...
New property TextColor on your bound object, of type Color
Store your BoundObject in a List<BoundObject>
When populating your list for the first time, set the TextColor property in your BoundObject
In the ItemSelected event for your list, get the current selection, and update the List<BoundObject> setting the colours as your conditions need
Set the list ItemSource to null, and re-assign it to the (now updated) List<BoundObject>
Can achieve through,
a custom renderer , however with this approach the color is not applied when the cell includes a ContextAction.
Using Custom Renderer,
From bugzilla
Using Cross Platform Way (binding), this approach applying the color to all cells(layout) that including a ContextAction
Obviously in Xamarin Forms,
Possible ways to achevie
Stack Overflow discussion

Windows Phone 8.1 Toggling the visibility of a TextBlock in a DataTemplate

I'm building a Windows Phone 8.1 Hub Application. One of the hub section contains a ListView that displays a list of articles. I'd like to add a Textblock to this hubsection which displays a message when the articles failed to download. The XAML Code is below:
<HubSection
x:Uid="ArticlesSection"
Header="ARTICLES"
DataContext="{Binding Articles}"
HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<Grid>
<ListView
AutomationProperties.AutomationId="ItemListViewSection3"
AutomationProperties.Name="Items In Group"
SelectionMode="None"
IsItemClickEnabled="True"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource BannerBackgroundArticleTemplate}"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
</ListView>
<TextBlock
x:Name="NoArticlesTextBlock"
HorizontalAlignment="Center"
VerticalAlignment="center"
Style="{StaticResource HeaderTextBlockStyle}"
TextWrapping="WrapWholeWords"
TextAlignment="Center"/>
</Grid>
</DataTemplate>
</HubSection>
The problem I'm having is that I can't access the TextBlock from the C# code. Is there an easier way to do this?
The problem I'm having is that I can't access the TextBlock from the C# code.
Yes, since the TextBlock is defined inside a DataTemplate, the TextBlock won't be available until the DataTemplate has been applied. Thus, the x:Name attribute won't automatically generate a variable reference in the InitializeComponent method in your *.g.i.cs file. (Read up on XAML Namescopes for more information).
If you want to access it from your code-behind, there are two ways:
The first way is the simplest: you can get a reference to the TextBlock in the sender argument of the Loaded event handler for that TextBlock.
<TextBlock Loaded="NoArticlesTextBlock_Loaded" />
Then in your code-behind:
private TextBlock NoArticlesTextBlock;
private void NoArticlesTextBlock_Loaded(object sender, RoutedEventArgs e)
{
NoArticlesTextBlock = (TextBlock)sender;
}
The second way is to traverse the visual tree manually to locate the element with the required name. This is more suitable for dynamic layouts, or when you have a lot of controls you want to reference that doing the previous way would be too messy. You can achieve it like this:
<Page Loaded="Page_Loaded" ... />
Then in your code-behind:
static DependencyObject FindChildByName(DependencyObject from, string name)
{
int count = VisualTreeHelper.GetChildrenCount(from);
for (int i = 0; i < count; i++)
{
var child = VisualTreeHelper.GetChild(from, i);
if (child is FrameworkElement && ((FrameworkElement)child).Name == name)
return child;
var result = FindChildByName(child, name);
if (result != null)
return result;
}
return null;
}
private TextBlock NoArticlesTextBlock;
private void Page_Loaded(object sender, RoutedEventArgs e)
{
// Note: No need to start searching from the root (this), we can just start
// from the relevant HubSection or whatever. Make sure your TextBlock has
// x:Name="NoArticlesTextBlock" attribute in the XAML.
NoArticlesTextBlock = (TextBlock)FindChildByName(this, "NoArticlesTextBlock");
}
Jerry Nixon has a good page on his blog about this.

How to add autocomplete functionality for Listpicker in windows phone 8?

Hi I'm developing wp8 application .
I'm using List picker for bind city names.Below it's my code for list Picker
XAML
<toolkit:ListPicker x:Name="Lpcity" Foreground="White" BorderThickness="0" VerticalAlignment="Top" Margin="400,10,0,0" Height="80" Width="50" Visibility="Visible" SelectionChanged="Lpcity_SelectionChanged">
<toolkit:ListPicker.Background>
<ImageBrush ImageSource="/Assets/Images/search.png"/>
</toolkit:ListPicker.Background>
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding cityname}" Visibility="Collapsed" Foreground="Red"/>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock FontSize="30">
<Run Text="{Binding cityname}"/>
</TextBlock>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
C#
public void Citybind()
{
string city_nameurl = "http://xxxx.yyyyy";
WebClient city_namewc = new WebClient();
city_namewc.DownloadStringAsync(new Uri(city_nameurl), UriKind.Relative);
city_namewc.DownloadStringCompleted += city_namewc_DownloadStringCompleted;
}
void city_namewc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
var city_name = e.Result;
city_namedata add = new city_namedata();
add.id = "-1";
add.cityname = "Select any one city";
add.id = "0";
add.cityname = "Remove city based search";
var city_nameval = JsonConvert.DeserializeObject<List<city_namedata>>(city_name);
city_nameval.Insert(0, add);
Lpcity.ItemsSource = city_nameval;
}
OutPut:
Now nearly 200 and more city name is bind in List picker. If user wan to select city name start with z. now he need to scroll to the bottom of the screen.
So i need to add the auto complete functionality . If user type z all z related name should show to user.
I searched in web and find out autocomplete box functionality.I try with following code for autocomplete box
XAML
<toolkit:AutoCompleteBox HorizontalAlignment="Left"
Width="450"
Grid.Row="0"
Name="autoCompleteBox1"
VerticalAlignment="Top"
InputScope="Digits"
ItemsSource="{StaticResource AutoCompletions}"
/>
Now i need to know it's possible to add both list picker and autocomplete box?
Other wise any other option available for my requirement?
Thank you

How to show part of text in datagrid row details?

I have table in my database which has fields of ID,NAME,CONTEXT. I am showing search result in datagrid. Now I tried to do this
<WpfToolkit:DataGrid.RowDetailsTemplate>
<DataTemplate>
**<StackPanel Orientation="Horizontal" Margin="5">
<StackPanel Orientation="Vertical" Margin="5">
<TextBlock Foreground="CadetBlue" FontSize="13"
Width="Auto" TextWrapping="Wrap"
Text="{Binding Path=Context}"/>
</StackPanel>**
</StackPanel>
</DataTemplate>
</WpfToolkit:DataGrid.RowDetailsTemplate>
It is giving whole text which is not what I want. If you give me some directions how to do this, may be some code. It will be appreciated. I want to show only that part of text which is selected by this line of code.
private void Find_Click(object sender, RoutedEventArgs e)
{
DataSet ds = new DataSet();
cmdSel = new SqlCommand();
cmdSel.Connection = MainWindow.conn;
cmdSel.CommandText = "select id,Name,Context from document where Contains([Context],'FormsOf (INFLECTIONAL, \"" + TextBoxSearch.Text + "\")')";
da = new SqlDataAdapter(cmdSel);
da.Fill(ds, "MainSearchBinding");
resWin.DataGrid1.DataContext = ds;
}
For example you are searching for "audio" and it is showing 10 words before + "audio" + 10 word after audio. Thank in advance.
I add one more column "Intro" to my table.
<WpfToolkit:DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="5">
<StackPanel Orientation="Vertical" Margin="5" >
<TextBlock Foreground="CadetBlue" FontSize="13"
Width="Auto" TextWrapping="Wrap"
Text="{Binding Path=Intro}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</WpfToolkit:DataGrid.RowDetailsTemplate>
And wrote this code for mouse click.
private void OnMouseClick(object sender, MouseButtonEventArgs e)
{
IList rows = DataGrid1.SelectedItems;
DataRowView row = (DataRowView)DataGrid1.SelectedItems[0];
int a = (int)row["ID"];
string t = (string)row["Context"]; //getting all text from Context
string srch1 = UCSearch.srch; // search box text
if (t.IndexOf(srch1) != -1)
{
string retString = t.Substring(t.IndexOf(srch1), 100); //cutting from occured text and more 100 symbols
row["Intro"] = retString; // setting to Intro Column
}
}
I hope some one may need it. Thank you.

Binding ListPicker.SelectedIndex problem

I'm trying to do a two way binding of the SelectedIndex attribute of a ListPicker in a Windows Phone 7 UserControl.
It raises the following exception when I set the DataContext:
SelectedIndex must always be set to a valid value.
This is the XAML code
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<toolkit:ListPicker
Grid.Row="0"
x:Name="List1"
SelectionChanged="Picker_SelectionChanged"
SelectedIndex="{Binding PickerSelectedIndex, Mode=TwoWay}"
ItemTemplate="{StaticResource PickerTemplate}"
ItemsSource="{Binding MyList}"/>
</Grid>
And the code behind in DataContext
private ObservableCollection<MyClass> myList = null;
public ObservableCollection<MyClass> MyList
{
get { return this.myList; }
set
{
if (value != this.myList)
{
this.myList= value;
NotifyPropertyChanged("MyList");
this.PickerSelectedIndex = 0;
}
}
}
private int pickerSelectedIndex = 0;
public int PickerSelectedIndex
{
get
{
return this.pickerSelectedIndex;
}
set
{
this.pickerSelectedIndex= value;
}
}
Putting a breakpoint in PickerSelectedIndex.get I can see that it is returned correctly (0).
I am sure that the problem is SelectedIndex="{Binding PickerSelectedIndex, Mode=TwoWay}" because deleting this line solves the problem, and I can see the ListPicker correctly loaded with the data from MyList.
I can't see where is the problem...
Moving SelectedIndex after ItemsSource solved the problem.
This is the working snippet
<toolkit:ListPicker
Grid.Row="0"
x:Name="List1"
SelectionChanged="Picker_SelectionChanged"
ItemTemplate="{StaticResource PickerTemplate}"
ItemsSource="{Binding MyList}"
SelectedIndex="{Binding PickerSelectedIndex, Mode=TwoWay}"/>
Anyone have an explanation for this?
My guess would be that the binding is being applied with a default value of zero when created and before the items exist. It's therefore trying to select the first item (with a zero index) before that item is created.
Try making sure that the ViewModel property of PickerSelectedIndex defaults to -1.
You may also want to delay setting the binding until the items are created.
Matt Lacey is right; binding happens before the data items get populated & hence the error. If you have an event handler for SelectionChanged, you will notice that a breakpoint in it will be hit as the page/listpicker loads. Here is one way to get around this initialization issue:
private void SomeListPicker_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// Make sure we don't handle the event during initiation.
if (e.RemovedItems != null && e.RemovedItems.Count > 0)
{
if (this.SomeListPicker.SelectedItem != null)
{
// Do actual stuff.
}
}
}
I had the same issue and the ordering of the properties in XAML didn't help. In my case, I was binding ItemsSource to a property on a StaticResource, but I was binding SelectedIndex with a property of my page's ViewModel. The moment I changed the binding of ItemsSource to bind to a property on the ViewModel itself (i.e. duplicated a property of the StaticResource), my issue went away and I was able to perform 2-way binding on SelectedIndex as well.
I've found the same problem with my app.
But I noticed that it happens when I delete all the elements of the list bounded to the ListPicker in the ViewModel.
So it isn't necessary to Bind SelectedIndex with another property since the problem depends only on the list bounded.
Here is my code which work fine for me:
<toolkit:ListPicker x:Name="ListaCorsi"
SelectionChanged="ListaCorsi_SelectionChanged"
ItemsSource="{Binding ListaCorsiUser}"
SelectionMode="Single"
ItemTemplate="{StaticResource CorsiDataTemplate}"
ItemsPanel="{StaticResource ItemsPanelTemplateListaCorsi}"/>
The list in view model:
private ObservableCollection<Corsi> _listaCorsiUser;
public ObservableCollection<Corsi> ListaCorsiUser
{
get { return _listaCorsiUser; }
set
{
_listaCorsiUser = value;
OnPropertyChanged("ListaCorsiUser");
}
}
The handler for SelectionChanged:
void ListaCorsi_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (ListaCorsi.SelectedItem != null)
{
---
this.CorsoSelected = ListaCorsi.SelectedItem as Corsi;
}
}
Where Corsi is the class type of the list.
Here ListPicker template:
<DataTemplate x:Key="CorsiDataTemplate">
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF3523FF" Offset="0.25"/>
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF3523FF" Offset="0.75"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock TextWrapping="Wrap" Text="{Binding NomeCorso}" FontSize="24" FontFamily="Freestyle Script" TextAlignment="Center"/>
</Grid>
</DataTemplate>
And, in the end, the method delete that checks if the list returned by IsolatedStorage is empty, if so, I put a fake empty element in the list bounded to the ListPicker, in order to not receive the error mentioned in this post.
if (this.CorsoSelected != null)
{
---
List<Corsi> corsi = new List<Corsi>(DBHelper.GetCorsiByUserId(PassaggioValori.UserId));
if (corsi.Count > 0)
{
this.ListaCorsiUser = new ObservableCollection<Corsi>(corsi);
}
else
{
this.ListaCorsiUser = new ObservableCollection<Corsi>(new List<Corsi>() { new Corsi()});
}
----
}
The strange thing was that, if the list was empty when the page has been loaded, nothing happens, instead, when I removed the last element from the list, the application raised the exception "SelectedItem must always be set to a valid value".
Now the problem is solved.