I am designing a Windows 8 Metro reading app, and got a problem of navigation event at the right begining. To simplify the problem, the description is:
There are two Pages: MainPage.xaml and DetailPage.xaml. MainPage.xaml contains a listview, the item is an article object(thoses article items are downloaded from the web), the a item is clicked. The Frame will uses
void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
// Navigate to the appropriate destination page, configuring the new page
// by passing required information as a navigation parameter
this.Frame.Navigate(typeof(DetailPage), e.ClickedItem);
}
After reading the full article, user will clicked the "GoBack" button, which is defined as
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
Then the problem comes, it's supposed that the Frame just navigated back to the MainPage, but after the navigation, the DataContext in the MainPage is missing, and the construction function of the MainPage is called again, fetched the web resource.
As a Windows Phone developer, I'm confused about this problem. Could anybody help me.
Thanks in advance.
The default behavior specified by Page.NavigationCacheMode in WinRT/XAML is different than in the PhoneApplicationPage on Windows Phone. It defaults to NavigationCacheMode.Disabled, while NavigationCacheMode.Enabled or .Required is what you probably want to use to make it work as expected.
I blogged about this problem here, hope it helps.
Even after enabling the NavigationCacheMode, there's one thing which differs when compared to the Windows Phone: The cache is used when navigating back and when navigating forward. In Windows Phone a new instance is always created when navigating forward.
After enabling the NavigationCacheMode in my Windows 8 app, I'm encountering some problems with the memory usage so that's one thing you should keep track of.
Related
I have a single page web app. The keyboard pops-up everytime I click on the screen.
There are no text input boxes in the DOM at all.
How can I debug why the keyboard is popping up.
You can see examples of this strange behaviour at https://blight.ironhelmet.com and https://np.ironhelmet.com
update with a clue: A user is now reporting that rather than the keyboard, a dropdown selection spiner is popping up all the time, long after that dropdown has been removed from the DOM.
For React users:
I had the same thing happen in a React single-page app with React-Router. I didn't write code to remove elements from the DOM, but of course React does that for you.
On my site, there are React components that contain one to four input fields. After any such component appears, and then is hidden (unmounted / not rendered anymore), then any time the user taps a link, the keyboard pops up. This makes the site unusable. The only way to make it stop was to reload the page.
The workaround: calling document.activeElement.blur() in componentWillUnmount for the wrapper component around my <input> fields did the trick.
componentWillUnmount()
{
if (document && document.activeElement)
{
document.activeElement.blur();
}
}
Note that calling window.activeElement.blur() did not seem to do anything.
There's a thread in the Apple support forums about this issue:
https://discussions.apple.com/thread/7692319
Looks like the keyboard was holding a reference to input after I had removed them from the DOM.
I added a test when removing element to see if it was the current activeElement, then, if so, calling document.activeElement.blur() before removing it. Seems to have solved the problem so far.
I have a SketchFlow Project, which is a prototype of an application that we are designing, and I am at the stage that I would like to export the project to another format for sharing.
The first thing that I tried was:
File | Export | Export as Images...
However, after this had finished running, I only had 6 screenshots. I have over 30 screens in the prototype. Does anyone have any idea why all screens are not exported?
I then tried:
File | Export | Export to Microsoft Word...
And this results in the following error:
Any thoughts on what is happening here? I have tried looking for a log file, but I couldn't find one.
The final option which I have tried is:
File | Export | Package SketchFlow Project...
Which seems to work perfectly. However, I would like to embed the images into a design document, and don't really want to have to go through taking screenshots manually, which will be the last resort.
Update 1
Ok, seems like it is certain screens that are causing the problem. When I do the "Export to Microsoft Word..." option, and choose only the first screen, the Word document exports correctly. However, when I add in another screen (one of the ones that wasn't included in the "Export as Images" method, I once again get the error that I showed the screenshot of.
Update 2
As requested in comments, the layout of the pages are as follows.
Header Component - which shows overall title of the application, and some common buttons.
Navigation Component - Menu Structure for all top level pages
All screens, with the exception of the Login/Register page, have the Header and Navigation Component added to them
Some screens are using Sample Data to populate elements on the page. Others are just simple controls, laid out on the page.
Update 3
Ok, I have just done a pretty comprehensive test, and when using "Export to Microsoft Word..." if I exclude all the screens that use Sample Data, the export completes successfully. As soon as I include any screen with sample data, it throws the exception. I can only assume that the "Export as images..." is failing silently when it hits the first screen that has Sample Data in it.
This is a bug. It's related to resource resolution. You may be able to work around by making the ItemTemplate property local instead of the default resource.
For example, with a repro built using the databinding showcase instructions - http://www.microsoft.com/en-us/showcase/details.aspx?uuid=db8a7eb6-3039-4008-a9f2-f5c910bcddf3
Replacing the ItemTemplate
<ListBox HorizontalAlignment="Left" Height="330" Margin="73,40,0,0" Style="{DynamicResource ListBox-Sketch}" VerticalAlignment="Top" Width="535" ItemsSource="{Binding Collection, Source={StaticResource snowboardData}}" DataContext="{Binding Source={StaticResource SampleDataSource}}" ItemTemplate="{DynamicResource ItemTemplate}"/>
With
<ListBox HorizontalAlignment="Left" Height="330" Margin="73,40,0,0" Style="{DynamicResource ListBox-Sketch}" VerticalAlignment="Top" Width="535" ItemsSource="{Binding Collection, Source={StaticResource snowboardData}}" DataContext="{Binding Source={StaticResource SampleDataSource}}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Images}" HorizontalAlignment="Left" Height="64" Width="511"/>
<TextBlock Text="{Binding Text}" Style="{DynamicResource BasicTextBlock-Sketch}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Allowed me to export to Word.
This has been reported to Microsoft and should be fixed in a future VS/Blend update.
After some back and forth offline with #shawty, we believe we have come up with the reason why the export is failing. It is not specifically tied to doing an export when Sample Data is being included, but more specifically when using Sample Data with a Sketch Control.
This is what I did to verify this...
Created new Sketch Flow Project
Added ComboBox control to the page
Added DataSource to the Data tab
Added Collection Property
Added Simple Property to Collection
Edited Data to include some sample data
Bound the ComboBox to the sample data
Ran the application to make sure it is working
Ran the Export to Microsoft Word...
Everything worked correctly
I then repeated the "exact" same process using the ComboBox - Sketch control, and the Export to Microsoft Word... failed to function, displaying the error message shown in question above.
The suggested workaround from #shawty is as follows:
"The sketch controls are functionally exactly the same as the OOTB ones under the hood, they just have a different dictionary of styles applied to them, my suggestion would be to take the OOTB controls, add your own set of styles to them to give them a similar look and feel. You'd only have to define the resource dictionary once at application level for each appropriate control (Button, Label, Datagrid and any others you use) , and the entire application will just maintain the same look and feel."
While this is a perfectly viable solution, it doesn't take anyway from the fact that I believe that this is a bug in the Sketch Flow application. I just don't know where to raise the bug, as there doesn't seem to be a section on Microsoft Connect to raise a bug about Blend, and/or Sketch Flow. If anyone knows where I can take this, I would love to hear about it.
hi anybody help how to write page navigation code for win8 metro apps in user control.
I tried with following code it is not working.
this.Frame.navigate();
If you are following an MVVM pattern with a framework like Caliburn Micro, MVVMLight, MicroMVVM then all of them provide a NavigationService of some sort which is usually used for navigation purpose. I would recommend you use that.
From the child control you can do this
var frame = Window.Current.Content as Frame;
frame.Navigate(typeof (Page2));
Where Page2 is the page you want to navigate to.
I am developing a simple application for windows 8. And now I want to modify the top app bar( i.e it should not look like bottom app bar) and I want it to work much better than only showing the default icons(like navigation job). I want to add my icons of different sizes(length).yes similar to those of weather app or travel app. But I am unable to find any good reference to start with. please help, from where I should start doing it. and whether is it possible to modify the app bar. please guide. note: I am developing app in javascript
Your very basic top appbar can be implemented using the following HTML:
<div data-win-control="WinJS.UI.AppBar" data-win-options="{layout:'custom',placement:'top'}">
<!-- your custom top bar content goes here -->
</div>
From inside the div, you can add anything to your hearts content, even AppBarCommands. Don't forget to initialize all win controls:
<script>
document.addEventListener("DOMContentLoaded", function () {
WinJS.UI.processAll();
}, false);
</script>
Quickstart: adding an app bar with custom content
Read following article, you'll get lot's of good tips
31 Days of Windows 8 | Day #4: New Controls
I'm using a new item Basic Template with the app name and back button.
It is being used inside of a "Blank" project.
However, the back button is not responding to touch events.
This following is code that was generated. The back button just disappears.
<Button x:Name="backButton" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" Click="GoBack"/>
I even tried making my own Click Handle and tried navigating myself with.
this.Frame.Navigate(typeof(MainPage));
However that isn't working either. Probably due to something that auto generated because I can create a button myself and wire it up for that (so I'm really trying to stick with the Templates).
Any ideas please?
Edit:
I found it really odd none of the Navigation is working. After drilling some more it appears to be something with LayoutAwarePage. I'm missing something here. Will post updates.
Edit: Sorry about that. I added the event click listeners back in (I must have removed that copying around). However that still does not fix my issue. I tried setting the back button to the "GoBack" function and when you hit the back button it just disappears. I also tried creating my own method and trying to navigate myself and still did not work.
You need an Click event handler on the button. Click="GoBack"
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
GoBack function is available in LayoutAwarePage which is most likely the base class of your page, if not make sure it is. LayoutAwarePage class resides inside Project\Common
You should not need to write any of your own code to enable the back button, as it ties into the underlying navigation framework automatically. If there is a page in the back stack to navigate to, the back button will be enabled.
What you are missing, from what I can see, is that if you start your app on the Basic page that you added, there's nothing in the back stack of the navigation framework for you to navigate to.
I tested your scenario using the following steps:
I created a new C#/XAML Windows Store app using the Blank App template.
Then added a new Basic page (BasicPage1.xaml).
Opened MainPage.xaml, and added a Button to the page.
Double-clicked the button, and added the following code to the click event handler:
this.Frame.Navigate(typeof(BasicPage1));
Ran the project, and the back button worked as expected.
From the XAML markup that I see, there is no Click event handler tied to the button, so no action is taken unless you hook it to one.
Well, this approach appears to take code from the Basic page. Could you confirm that you are inheriting from LayoutAwarePage and not from Page? Otherwise GoBack is not implemented in this way. Also, you cannot GoBack if you have not navigated from this page in the first place, from another. And, finally (just brainstorming here), you cannot GoBack if you got to this page by setting the Frame itself and not the page (in the previous location). This would clear the navigation history.
And, also, can you confirm this does not work?
this.Frame.GoBack();
Best of luck!
Im making my back buttons like this:
XAML code. In this case LoginPage.xaml.
<Button x:Name="ButtonGoBack" Click="ButtonGoBack_OnClick" Style="{StaticResource NavigationBackButtonNormalStyle}"/>
C# code in LoginPage.xaml.cs
private void ButtonGoBack_OnClick(object sender, RoutedEventArgs e)
{
this.Frame.GoBack();
}
I've just had the same issue as Frank. I found my problem to be that I overrided the OnNavigatedTo handler without calling the base class's (LayoutAwarePage) handler also. This meant LayoutAwarePage wasn't setting its _pageKey member variable which it uses in its OnNavigatedFrom handler.
Hope this helps others with the same issue.
This happened to me too. I know nothing could've changed in my code so I checked the project properties. In Common Properties->References I noticed an anomaly, there have been some resources that was never there, ( all I should have in that project is SQLite for Windows RunTime). I then deleted the unwanted resource and fixed the navigation problem.
If you used
Frame.SetNavigationState("1,0");
you removed the back stack entry , so the back button will not working .