Why ListPicker always showing in FullscreenOnly mode - windows-phone-8

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}">
(...)

Related

Flash Builder (FlexPrintJob & PrintDataGrid) Chrome Shockwave error

I have an mx:application using the Flex 4.6.0 SDK and I’m having some issues with the FlexPrintJob in Chrome only. The FlexPrintJob worked fine in chrome, up until maybe a couple weeks ago (I made no changes to the code) and now I’ve started experiencing “Shockwave Crashes”.
While printing I’m using:
first title page template
middle section template to handle a DataGrid. This is using the PrintDataGrid and loops through the dataProvider to see if the data will fit on one page, if not it will create another.
Terms and conditions last page template
Problem: I’ve narrowed it down to this, I’m getting the Shockwave Crash error in chrome when the data (for the middle section) exceeds one page and tries to create another. This just started happening, I’m guessing with a chrome update…Sorry if I left something out and my description is lacking detail. I can add more clarification if needed.
Any ideas what’s going on?
Thanks!
--moe
public function doPrint(): void {
// Create a FlexPrintJob instance.
var printJob: FlexPrintJob = new FlexPrintJob();
// Start the print job.
if (printJob.start()) {
// Create a FormPrintView control as a child of the application.
var thePrintView: FormPrintView = new FormPrintView();
addElement(thePrintView);
// Set the print view properties.
thePrintView.width = printJob.pageWidth;
thePrintView.height = printJob.pageHeight;
thePrintView.horizontalAlign = "center";
// Set the data provider of the FormPrintView component's DataGrid to be the data provider of the displayed DataGrid.
thePrintView.summaryGrid.dataProvider = summaryGrid.dataProvider;
// Create a single-page image.
thePrintView.showPage("single");
// If the print image's DataGrid can hold all the data provider's rows, add the page to the print job.
if (!thePrintView.summaryGrid.validNextPage) {
printJob.printAsBitmap = false;
printJob.addObject(UIComponent(mainPagePrint), FlexPrintJobScaleType.MATCH_WIDTH);
printJob.addObject(thePrintView);
printJob.addObject(UIComponent(terms), FlexPrintJobScaleType.MATCH_WIDTH);
}
// Otherwise, the job requires multiple pages.
else {
// Create the first page and add it to the print job.
thePrintView.showPage("first");
printJob.printAsBitmap = false;
printJob.addObject(UIComponent(mainPagePrint), FlexPrintJobScaleType.MATCH_WIDTH);
printJob.addObject(thePrintView);
thePrintView.pageNumber++;
// Loop through the following code until all pages are queued.
while (true) {
// Move the next page of data to the top of the PrintDataGrid.
thePrintView.summaryGrid.nextPage();
printJob.printAsBitmap = false;
// Try creating a last page.
thePrintView.showPage("last");
// If the page holds the remaining data, or if the last page was completely filled by the last grid data, queue it for printing.
// Test if there is data for another PrintDataGrid page.
if (!thePrintView.summaryGrid.validNextPage) {
// This is the last page; queue it and exit the print loop.
printJob.addObject(thePrintView);
printJob.addObject(UIComponent(terms), FlexPrintJobScaleType.MATCH_WIDTH);
break;
} else // This is not the last page. Queue a middle page.
{
thePrintView.showPage("middle");
printJob.addObject(thePrintView);
thePrintView.pageNumber++;
}
}
}
// All pages are queued; remove the FormPrintView control to free memory.
removeElement(thePrintView);
}
// Send the job to the printer.
printJob.send();
}
I ended up taking things apart one-by-one and figured out what it was - the issue was is the FormPrintView. I had some unneeded properties in my PrintDataGrid that I think were originally copied from my main datagrid in my application.
I'm not sure why it was working before and just starting acting crashing now, but either way I shouldn't have had some of those properties there in the first place.
thanks!
--moe
<mx:PrintDataGrid id="summaryGrid" width="100%" height="100%" sizeToPage="true"
alternatingItemColors="[#f7f7f7, #ffffff]" alpha="0.8"
borderStyle="solid" borderThickness="1" color="#646262"
creationComplete="summaryGrid_creationCompleteHandler(event)" fontSize="9"
headerColors="[#ffffff, #e8e8e8]" headerHeight="25" paddingTop="5"
rowHeight="55" textAlign="center" wordWrap="true" paddingRight="-1" >

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.,

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!");
}

How to set app bar button image via resource or programmatically in windows store app

I want to load an AppBar programmatically, but I'm having trouble setting the image to a bitmap. Is this allowed? Or can only the Segoe UI Symbol characters be used?
I tried doing it in a resource:
<Style x:Key="StudyAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="StudyAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Study"/>
<Setter Property="Content">
<Setter.Value>
<Image Source="Assets/AppBar/Study.png" />
</Setter.Value>
</Setter>
</Style>
No bitmap appears.
I can set the bitmap programmatically:
Uri _BaseUri = new Uri("ms-appx:///");
foreach (MenuItem menuItem in Model.MainMenu.MenuItems)
{
Button button = new Button();
button.Name = menuItem.Name;
button.Click += AppBar_Click;
button.Tag = menuItem.Name;
Style style = (Style)App.Instance.Resources["AppBarButtonStyle"];
button.Style = style;
Image image = new Image();
Uri uri = new Uri(_BaseUri, "Assets/AppBar/" + menuItem.Name + ".png");
image.Source = new BitmapImage(uri);
image.Width = 25;
image.Height = 25;
button.Content = image;
AutomationProperties.SetName(button, menuItem.Title);
TopLeftPanel.Children.Add(button);
}
but if I do:
button.Content = "\uE10F";
I don't see the home character.
In general, are there any examples or guidelines for using custom images in app bars? Segoe doesn't have applicable images for all my menu items.
Unfortunately my app is pretty complex, with two levels of menus, so any suggestions on handling this would be appreciated. Basically, I'm trying to turn my website http://www.jtlanguage.com into an app.
Thanks.
-John
You have to create your own style, AppBarButtonStyle can't be used with image. I recommend you to check this MSDN forum thread, it might be helpful to you. how I can customize my AppBarIcons Images?. Please don't forget to accept this answer if you find your solution.

Mappolyline in WP8 from XAML does not work?

all I am working with WP 8 new Maps from Nokia.
Having a bit problem with mappolyline from xaml, it won't show.
Tried (Some init code removed):
Where Coords is just a public property of type GeoCoordinateCollection
I can show the polygon by doing code but that's not what I want now when I have learned about binding code to templates and so on.
<maps:Map x:Name="Map" Grid.Row="1" >
<maps:Map.MapElements >
<maps:MapPolyline StrokeColor="red" StrokeThickness="2" Path="{Binding Coords}"></maps:MapPolyline>
</maps:Map.MapElements>
</maps:Map>
Try adding polyline through code,
var _polyline = new MapPolyline();
line.StrokeColor = Colors.Red;
line.StrokeThickness = 2;
line.Path.Add(new GeoCoordinate(lat,long));
line.Path.Add(new GeoCoordinate(lat, long));
MyMap.MapElements.Add(line);