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

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

Related

TargetNullValue not working in ListView in Xamarin app

I'm trying to display some text -- or an image -- if there's no data for my ListView to display in my Xamarin Forms 5 app but I can't get it to work.
Here's what my ListView looks like:
<ListView
x:Name="CustomersList"
ItemsSource="{Binding Customers, TargetNullValue='No customers!'}"
BackgroundColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell
Text="{Binding FullName}"
TextColor="{StaticResource PrimaryDark}"
Command="{Binding Source={x:Reference Name=CustomersList}, Path=BindingContext.CustomerSelectedCommand}"
CommandParameter="{Binding .}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The source for the ListView is set as follows in my ViewModel
ObservableRangeCollection<CustomerModel> customers;
public ObservableRangeCollection<CustomerModel> Customers
{
get => customers;
set
{
if (customers == value)
return;
customers = value;
OnPropertyChanged();
}
}
If my API call returns nothing, I do a Customers = null;
When I use TargetNullValue as shown above, I acutally get errors where I bind the TextCell to FullName. It shows:
'FullName' property not found on 'N', target property:
'Xamarin.Forms.TextCell.Text'
It then repeats this error message for every character in No Customers!.
I then tried using FallbackValue. This time I don't get an error but it simply doesn't show the "No Customers!" message.
How do I handle a ListView having no data to show? At the very least, I'd like to show some simple text message but it would be even better to show something nicer, maybe an image.
If you are ok to switch from ListView to CollectionView, you can use the built-in CollectionView.EmptyView:
<CollectionView ItemsSource="{Binding Customers}"
EmptyView="No customers!" ... />
With the same EmptyView you can define whatever view:
<CollectionView>
<CollectionView.EmptyView>
<ContentView>
<image ... />
</ContentView>
</CollectionView.EmptyView>
</CollectionView>
Docs: CollectionView EmptyView

uwp twoway binding not updating UI

I have the following XAML code, where I have a TextBox for user input (phone number) and GridView for user contacts.
<GridView x:Name="ContactsCollection" Grid.Row="1" Style="{StaticResource DefaultGridView}" IsItemClickEnabled="True" ItemsSource="{Binding UserContacts}" ItemTemplate="{StaticResource HorizontalGridViewDataTemplate}" ItemContainerStyle="{StaticResource DefaultGridViewItemContainer}">
<i:Interaction.Behaviors>
<c:EventTriggerBehavior EventName="SelectionChanged">
<c:InvokeCommandAction Command="{Binding SelectContactCommand}" CommandParameter="{Binding SelectedItem, ElementName=ContactsCollection}"/>
</c:EventTriggerBehavior>
</i:Interaction.Behaviors>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
And my TextBox that is binded to the Recipient in the ViewModel.
<TextBox x:Uid="Recipient" Text="{Binding Recipient, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" PreventKeyboardDisplayOnProgrammaticFocus="True" toolkitControls:TextBoxMask.Mask="7(999)999-99-99" toolkitControls:TextBoxMask.PlaceHolder="X" InputScope="NumericPin" HeaderTemplate="{StaticResource UiControlHeaderDataTemplate}" Style="{StaticResource DefaultTextBoxStyle}"/>
Here goes code from the ViewModel.
public string Recipient
{
get { return _recipient; }
set
{
if (value != _recipient)
{
_recipient = value;
RaisePropertyChanged(nameof(Recipient));
ContinueTransferCommand.RaiseCanExecuteChanged();
}
}
}
Now, when I click any contact from the GridView the following functions is called, that assign contact's phone number to the Recipient property.
private void SelectContactCommandAction(object contact)
{
Contact c = contact as Contact;
if (c.Phones?.Count > 0)
Recipient = FormatDataHelper.FormatPhoneNumber(c.Phones.FirstOrDefault().Number);
}
When I click any contact for the FIRST time, the Recipient property is updated, and the UI is updated too. But, if I select other contact, in the debug mode I can see, that Recipient property is updated and saved new value, but the UI (TextBox) is not updated at all. The only way it works, I have to delete any character from the TextBox and select a contact again, in that case UI value will be updated again.
Can somebody please explain this?

custom live tile update issue

I'm working on a weather application for windows phone. One of the features that I want to take advantage of is live tiles. I have a background agent that runs when the user pins a city to the start page.
After it's been pinned, it makes a calls out to the internet to get some weather data. All of this works just fine.
Now for the problem.
Depending on the weather data that's returned, I want to update the tiles that are pinned to the start screen.
I have a number of different .xaml files (rain, snow, sun, etc) that represent each tile.
My first thought was that I would:
expose 2 properties on each tile (CityState and Temp)
set those 2 properties after the tile is created.
save the tile off into IsolatedStorage as an image that I can then use to update the tile on the start screen.
Here is the code that I have to do that:
var ctl = new Snow();
//just some dummy data to test
ctl.CityState = "Test, NY";
ctl.Temp = 25;
ctl.Measure(new Size(173, 173));
ctl.Arrange(new Rect(0, 0, 173, 173));
var bmp = new WriteableBitmap(173, 173);
bmp.Render(ctl, null);
bmp.Invalidate();
var iss =IsolatedStorageFile.GetUserStoreForApplication();
var filename = "/Shared/ShellContent/tileTest.jpg";
using (var stm = iss.CreateFile(filename))
{
bmp.SaveJpeg(stm, 173, 173, 0, 80);
}
tile.BackgroundImage = new Uri("isostore:" + filename, UriKind.Absolute);
var tileToUpdate = ShellTile.ActiveTiles.FirstOrDefault(r => r.NavigationUri == uri);
tileToUpdate.Update(tile);
So, when this runs, it creates a new tile from the XAML file and updates the start screen but the Temp and CityState properties
are not reflected on the new Tile. In the xaml I have 2 textblocks that are bound to the properties in the codebehind. I've also
implemented INotifyPropertyChanged.
Here is the XAML
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="Window"
x:Class="ezweather.services.tiles.Snow"
d:DesignWidth="480" d:DesignHeight="800" Width="173" Height="173" >
<Canvas x:Name="Layer_1" Width="173" Height="173" Canvas.Left="0" Canvas.Top="0" >
<Rectangle x:Name="Rectangle" Width="173" Height="173" Canvas.Left="0" Canvas.Top="-1.52588e-005" Stretch="Fill" Fill="#FF3F6A8D"/>
<TextBlock x:Name="cityState" TextAlignment="Left" FontFamily="Segoe UI Semibold" FontWeight="Bold" FontSize="15" Width="Auto" Height="Auto" Canvas.Left="0" Canvas.Top="0">
<TextBlock.RenderTransform>
<TransformGroup>
<MatrixTransform Matrix="1.33333,0,0,1.33333,11,139.5"/>
</TransformGroup>
</TextBlock.RenderTransform>
<Run Text="{Binding ElementName=Window, Path=CityState}" Foreground="#FFFFFFFF"/>
</TextBlock>
<TextBlock x:Name="temp" TextAlignment="Right" FontFamily="Segoe UI Light" FontSize="44" Width="Auto" Height="Auto" Canvas.Left="0" Canvas.Top="0">
<TextBlock.RenderTransform>
<TransformGroup>
<MatrixTransform Matrix="1.33333,0,0,1.33333,87.57,42.9333"/>
</TransformGroup>
</TextBlock.RenderTransform>
<Run Text="{Binding ElementName=Window, Path=Temp}" Foreground="#FFFFFFFF"/>
</TextBlock>
</Canvas>
</UserControl>
and here is the codebehind
public partial class Snow : UserControl, INotifyPropertyChanged
{
public Snow()
{
// Required to initialize variables
InitializeComponent();
}
private string _cityState;
private int _temp;
public string CityState
{
get { return _cityState; }
set
{
_cityState = value;
RaisePropertyChanged("CityState");
}
}
public int Temp
{
get { return _temp; }
set
{
_temp = value;
RaisePropertyChanged("Temp");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged(string property)
{
if(PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
When this code runs, it instantiates the correct xaml file and saves it to disk.
It then updates the tile on the start screen but the CityState and Temp data does not show up.
I don't know why the CityState and Temp data isn't being written out with the image.
What am I missing?
The primary issue I see here, is you're attempting to render the image, before the control is actually loaded.
Try handle the rendering in the Control.Loaded event.

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.

How to attach EventTrigger in code behind in Silverlight 4

My question is the following:
I have a grid and I attached the SelectedIndexChanged event the following way in the xaml file:
"<cc:DetailViewGrid AutoGenerateColumns="False" HorizontalAlignment="Stretch" Margin="0,0,0,0" Name="dgAcitivityList" VerticalAlignment="Stretch" ItemsSource="{Binding EntityList}" SelectionMode="Single" IsReadOnly="False">
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="SelectionChanged">
<interactivity:InvokeCommandAction Command="{Binding SelectedItemChangeCommand}" CommandParameter="{Binding SelectedItem, ElementName=dgAcitivityList}"/>
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>"
But I want to attach this event in code behind. I ctreated an own grid that is inherited from windows grid, and I put this code to own control.
public override void OnApplyTemplate()
{
//base.OnApplyTemplate();
System.Windows.Interactivity.EventTrigger selectedItemChangedTrigger = new System.Windows.Interactivity.EventTrigger("SelectionChanged");
System.Windows.Interactivity.InvokeCommandAction action = new System.Windows.Interactivity.InvokeCommandAction();
action.CommandName = "{Binding SelectedItemChangeCommand}";
action.CommandParameter = string.Format("{{Binding SelectedItem, ElementName={0}}}", this.Name);
selectedItemChangedTrigger.Actions.Add(action);
System.Windows.Interactivity.Interaction.GetTriggers(this).Add(selectedItemChangedTrigger);
base.OnApplyTemplate();
}
Is this solution proper? It's not working but I'm not sure that I should put this code in the OnApplyTemplate() method.