Autocomplete textbox in windows phone 8.1 - windows-phone-8

I want in my windows phone 8.1 app some feature,that my user input some character and I suggest him some word.
public IEnumerable AutoCompletions = new List<string>()
{
"Lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "Nullam", "felis", "dui", "gravida", "at"};
for example user input "a" and i suggest "amet","at" and "adipiscing", further user input "am" and i suggest "amet".
Help me please

What you want to do is display only the suggestions that apply for the given input. Not all possible strings.
Lets assume you have the following AutoSuggestBox:
<AutoSuggestBox
TextChanged="AutoSuggestBox_TextChanged"
SuggestionChosen="AutoSuggestBox_SuggestionChosen">
<AutoSuggestBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" />
</StackPanel>
</DataTemplate>
</AutoSuggestBox.ItemTemplate>
</AutoSuggestBox>
These are the event handlers:
private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
{
// You can set a threshold when to start looking for suggestions
if (sender.Text.Length > 3)
{
sender.ItemsSource = getSuggestions(sender.Text);
}
else {
sender.ItemsSource = new List<String> { };
}
}
}
All you have to do is to write a getSuggestions(String text) method that returns plausible suggestions for a given input.

Related

Put wizard navbar on top position

I'm working with a wizard component. The navbar is in the botton but my boss wants me to put it in the top of the wizard,I thought that it was an attribute or tag to do it straight forward but I have been reviewing the documentation and I should be wrong (I only found the showNavBar tag).
Is there a way to do it without css or jquery? (we have some problems in the application setting css when working with some components so I would like to avoid it).
Thank you very much
You can achieve this in either of the two ways:
1 - Extending the WizardRenderer
By extending the WizradRenderer you can change the order of the encoding.
In the original Renderer the encodeContent(facesContext, wizard); is called before encodeNavigators(facesContext, wizard); so it's pretty much simple, extend you custom renderer, change the order of the calls.
public class ExNavWizardRenderer extends org.primefaces.component.wizard.WizardRenderer{
#Override
protected void encodeMarkup(FacesContext facesContext, Wizard wizard) throws IOException {
ResponseWriter writer = facesContext.getResponseWriter();
String clientId = wizard.getClientId(facesContext);
String styleClass = wizard.getStyleClass() == null ? "ui-wizard ui-widget" : "ui-wizard ui-widget " + wizard.getStyleClass();
writer.startElement("div", wizard);
writer.writeAttribute("id", clientId, "id");
writer.writeAttribute("class", styleClass, "styleClass");
if(wizard.getStyle() != null) {
writer.writeAttribute("style", wizard.getStyle(), "style");
}
if(wizard.isShowStepStatus()) {
encodeStepStatus(facesContext, wizard);
}
// encode the navigators before the content
if(wizard.isShowNavBar()) {
encodeNavigators(facesContext, wizard);
}
encodeContent(facesContext, wizard);
writer.endElement("div");
}
}
Update your faces-config.xml
<render-kit>
<renderer>
<component-family>org.primefaces.component</component-family>
<renderer-type>org.primefaces.component.WizardRenderer</renderer-type>
<renderer-class>com.projectPackage.ExNavWizardRenderer</renderer-class>
</renderer>
</render-kit>
2 - jQuery
In your document.ready you can change the DOM, for example this would do the same as the Renderer:
$('.ui-wizard-step-titles').after($('.ui-wizard-navbar'))

windows phone 8 how to swipe local html files just like pivot or panaroma control?

i'm beginner for windows phone 8., actually i have created a project which has some html files(40 files) in local folder and i want to show all html files one by one when user swipe horizontally just like pivot or panaroma control.,
i know statically how to call local html files by using web browser control and i did in many projects., but i don't know to show all files one by one when user swipe horizontally.,
and i tried to dynamically add web browser control inside pivot item.,
this is my code for create dynamic pivot items with web browser controls inside
" pivotPage.cs "
void pivotPage_Loaded(object sender, RoutedEventArgs e)
{
for (int i = 0; i < 40; i++)
{
string _url = "ways/a"+ i + ".html";
PivotItem newPivotItem = new PivotItem();
newPivotItem.Margin = new Thickness(0, -10, 0, 0);
WebBrowser newWebBrowser = new WebBrowser();
newWebBrowser.Navigate(new Uri(_url, UriKind.Relative));
newPivotItem.Content = newWebBrowser;
pivotList.Items.Add(newPivotItem);
}
}
and my pivotPage.xaml is
<Grid x:Name="ContentPanel" Margin="0,0,0,0" Grid.RowSpan="2" Background="#FF378FB1">
<phone:Pivot x:Name="pivotList" Background="White" Margin="10,130,10,80"/>
</Grid>
if i try to create maximum of " 25 " pivot items using for loop like this means i got output with 25 pivot items and i can able to swipe., the code like this
for(int i=0; i<25; i++)
{
string _url = "ways/a"+ i + ".html";
PivotItem newPivotItem = new PivotItem();
newPivotItem.Margin = new Thickness(0, -10, 0, 0);
WebBrowser newWebBrowser = new WebBrowser();
newWebBrowser.Navigate(new Uri(_url, UriKind.Relative));
newPivotItem.Content = newWebBrowser;
pivotList.Items.Add(newPivotItem);
}
but i need to show 40 files, so if i make condition like this means
for (int i = 0; i < 40; i++)
{
}
it shows nothing and app was closed.,
is there any limit for maximum no.of pivot items shown ???
could you please some one try to give me solution for this and also
tell me that is there any control for showing html files like swipe view?
simply said my requirement is " how to show local html files one by one like swipe view in WP8 apps ?"
thanks in advance., am waiting for some answers.,
Finally i find answer myself like this and it works for me.,
Step 1: for displaying collection of contents (html , image , text etc) use data binding concept to create UI in xaml page like this.,
<phone:Pivot x:Name="pivotList" Margin="0,0,0,80" ItemsSource="{Binding}" >
<!-- <phone:Pivot.Title>
<TextBlock Text="40 ways to lose belly fat" FontSize="28" Foreground="#FF00FFEE"></TextBlock>
</phone:Pivot.Title>-->
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding _title}" Foreground="#FF00FFEE" FontSize="48"></TextBlock>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<phone:WebBrowser Name="browser" Source="{Binding _url}" Margin="20,-10,20,0">
</phone:WebBrowser>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
and then in code behind .cs file
public partial class pivotPage : PhoneApplicationPage
{
private List<TList> _pivotList;
public pivotPage()
{
InitializeComponent();
Loaded += pivotPage_Loaded;
}
void pivotPage_Loaded(object sender, RoutedEventArgs e)
{
_pivotList = new List<TList>();
int j = 1;
for (int i = 0; i < 40; i++)
{
_pivotList.Add(new TList
{
_title="flat Belly Tip-"+j,
_url="ways/a"+ i + ".html"
});
j++;
}
pivotList.DataContext = _pivotList;
}
i got that idea from this post
http://stackoverflow.com/questions/14004493/databinding-dynamic-pivot
Hope this ll help.,

WP MVVM Navigation OnNavigatedTO

I am starting to implement MVVM in my application and got an issue of knowing when the user navigated to the view.
To navigate between views, I can just use the navigationService.Navigate(...);
How do I check when I navigated to the view?
May I use the event navigationService.Navigated?
Is there no other method I can use like OnNavigatedTo that the page itself provide?
XAML:
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
DataContext="{Binding titleSearchViewModel, Source={StaticResource Locator}}">
<i:Interaction.Triggers>
<i:EventTrigger>
<cmd:EventToCommand Command="{Binding PageLoaded, Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
VM:
private RelayCommand _PageLoaded;
public RelayCommand PageLoaded
{
get
{
if (_PageLoaded == null)
{
_PageLoaded = new RelayCommand(
() => Loaded()
);
}
return _PageLoaded;
}
}
In case this question is still actual, i prefer this solution: http://www.geoffhudik.com/tech/2010/10/10/another-wp7-navigation-approach-with-mvvm.html
If to use it, it is possible to send recipient ViewModel's parameters from the sender ViewModel:
SendNavigationMessage(Settings.NAVIGATION_PRODUCTS_SUBCATEGORIES,
new Dictionary<string, object> { { "SelectedIndex", Int32.Parse(item.id) } });
And receiver should define in xaml:
NavigatedToCommand="{Binding RefreshCommand}"
And then in receiver ViewModel:
public ICommand RefreshCommand // Should be set as NavigatedToCommand="{Binding RefreshCommand}" in xaml
{
get { return new RelayCommand(Refresh); }
}
public void Refresh()
{
_dataService.GetList(SelectedIndex, DownloadedCallback); // So, this would be called automatically after navigating is complete. SelectedIndex is updated at this moment.
}
Thanks for the answers provided. Both were helpful over a period of time until I decided to create a custom implementation of the navigation service that has been created by a few people.
I then made a contribution to the Cimbalino toolkit to suggest this and it has been introduced a while back.
I my personal opinion, that solves my issue the best. Have a look at the navigation service in there. The Navigated event pretty much solves my issue I had.
https://github.com/Cimbalino/Cimbalino-Toolkit
It basically comes down to this (in your viewmodel):
_navigationService.Navigated += OnNavigated;

Detecting Item visibility in a VirtualizingStackPanel for lazy loading images

Here is my scenario:
I have a Gridview that shows data retrieved from a network service. The number of data may be quite large. So, the VirtualizingStackPanel is used to display the content. Some of those data may require retrival of images when they are rendered(lazy loading)
My (very limited) understanding is that the VirtualStackPanel will automatically request data as the grid requiring that data is being rendered. If the element that needs to be rendered is of image type, I send a placeholder image and submit an async network call to retrieve that image.
But, I notice that the calls to render all the element is being received and consequently a deluge of network calls to retrieve images are sent (esp if most of the items are of image type).
Question: Is there something I should be configuring in code (XAML or C#) for the VirtualizingStackPanel or should go the route of detecting if the item is really being displayed and then issue network call?
Here is my XAML.
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="3"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
VirtualizingStackPanel.VirtualizationMode="Standard"
ItemTemplateSelector="{StaticResource CellStyleSelector}"
ItemClick="ItemView_ItemClick"
IsItemClickEnabled="True"
SelectionMode="None"
IsSwipeEnabled="false">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
Here is the Item's Property which is bound to the Image in XAML
private ImageSource _image = null;
private String _imagePath = null;
public ImageSource ThumbImage
{
get
{
// Check if the image is already cached
if (this._image == null)
{
// Setup a placehoder image
this._imagePath = "Assets/metro_photo_55#2x.png";
this._image = new BitmapImage(new Uri(Defs.BaseUri, this._imagePath));
// Async call to download thumb image from server
this.getThumb();
}
return this._image;
}
private set
{
this.SetProperty(ref this._image, value);
}
}
Here is the async call to download the thumb
private async void getThumb()
{
// Get image and store
Network network = new Network();
// Since this is a bound property. this action updates the UI
this.ThumbImage = await network.getImage(this._rawData[Defs.PATH_KEY], true);
Debug.WriteLine(this._rawData[Defs.PATH_KEY] + " - Thumb retrieved!");
}

Why ListPicker always showing in FullscreenOnly mode

I am using a ListPicker and it is always showing in FullscreenOnly mode even if i change the ExpansionMode to ExpansionAllowed.
But in other page the same code is working properly.
Why is this strange behaviour happening?
(Assuming this is the Windows Phone Toolkit ListPicker)
If your list is longer than 5 items then it will open in FullScreenMode. It isn't possible to change this threshold value.
So, this one will expand:
<toolkit:ListPicker Header="Background">
<sys:String>dark</sys:String>
<sys:String>light</sys:String>
<sys:String>dazzle</sys:String>
<sys:String>4</sys:String>
<sys:String>5</sys:String>
</toolkit:ListPicker>
This one will always be full screen:
<toolkit:ListPicker Header="Background">
<sys:String>dark</sys:String>
<sys:String>light</sys:String>
<sys:String>dazzle</sys:String>
<sys:String>4</sys:String>
<sys:String>5</sys:String>
<sys:String>6</sys:String>
</toolkit:ListPicker>
It is possible to expand more then 5 elements. You must set ItemCountThreshold.
I set it in view model in method where I set collection's items.
Collection = new ObservableCollection<Item>
{
new Item();
new Item();
new Item();
new Item();
new Item();
new Item();
}
CollectionItemsCount = Collection.Count;
And binding in xaml:
<toolkit:ListPicker ExpansionMode="ExpansionAllowed" ItemsSource="{Binding Collection}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" ItemCountThreshold="{Binding CollectionItemsCount}">
(...)