Navigate inside UserControl - windows-phone-8

I'm working on a application where I load a XAML page inside a usercontrol,
depending on which menu item was clicked.
After figuring out how to load in XAML page in a XAML page (using usercontrol), I'm running into the next problem: Navigation.
I added a picture to illustrate what I'm working on.
When you launch the app, you see the left state (state open), where the menu is presented and a little bit of the content on the right.
If you click the red button, the page scrolls to a "full screen" of the right state (state closed). This is still the same page, the MainPage.xaml, but with a new page loaded in the usercontrol. Let's say the loaded page is news, where you can select an article by clicking.
This all works great.
The problem is, when I try to use the navigationservice to see a detail of the news, the app fails. (it does work when I set the news page as start page, but it won't work inside the usercontrol).
I tried fixing this by the following code:
NewsDetail detailpage = new NewsDetail();
this.Content = detailpage;
Actually, this works.. but then I can no longer pass a querystring to load a certain article on the page.
Any ideas on how to fix this problem?

You can use a static variable in App.xaml.cs when querystrings become useless.
just declare a static variable of type say string in app.xaml.cs
public static string MyString;
just assign it a value before navigation
App.MyString="Hello";
And get this value where ever you want to get it.
string ss=App.MyString;

Related

Appmaker: Handle several copies of a page fragment as one?

I have a SideMenu page fragment in my app. On each and every page, I have a copy of this page fragment.
My intention was to create a SideMenu with openable SubMenus (only one sub menu could be open at a time), but I could not get it done to make the app "remember" the state of the SideMenu( like which SubMenu should be open, and which ones shouldn't), because on each site there is a different widget, so when in my code ( in my onClick events) I refer to the widget, I am not handling "a global SideMenu" but rather a specific copy of it, unique to that page.
Sadly, this took several hours of debugging to realize, I am defeated.
Is there anyway to place a page fragment on a page, so I can handle that widget on its own, not just it's copies?
Thanks in advance, I can try to specify more the question if it's needed.
I agree with #MarkusMalessa. You need to invoke the widget on every page and then apply whatever change on it. I am doing the samething on a project in which I intend to shrink and expand the sideMenu. To give you an idea, evertime I click a button on the side menu responsible for the logic, this is the code that's invoked:
var pages = app.pages._values;
pages.forEach(function(page){
var sideMenu = page.descendants.sideMenu1;
if(sideMenu){
if(widget.text === "chevron_right"){
sideMenu.getElement().style.width = "300px";
} else {
sideMenu.getElement().style.width = "60px";
}
}
});
That way every sideMenu widget inside each page that has it receive the same changes.

Going to a specific section from exterior link

I am trying to create an anchor in order to be able to build such an URL :
www.mysite.com/#myAnchor
which should automatically link to the div wanted, even from an exterior website.
However, when I am trying to implement it, here is the adresse to which I am redirected : www.mysite.com/#/myAnchor
So far, I tested different things such as :
<a name="myAnchor" />
<a name="#myAnchor"></a>
<a name="myAnchor"></a>
<span class="anchor " id="myAnchor"></span>
But nothing seems to work.
However when I am on the page I can change the url to go there but from "outside" this just redirects to the top of the page.
Thanks for your help.
That most likely happens because the first anchor is done by the browser, and when the page loads for the first time I assume the content is not all loaded yet (using views?).
If that is the case, then you need to call the service $anchorScroll that angular provides somewhere in your code after the view has been loaded (on a ng-init maybe?). Something like
<a name="myAnchor" ng-init="loadScrollToAnchor()"></a>
And then in your controller, after injecting the service $anchorScroll.
var scrolled = true;
$scope.loadScrollToAnchor = function () {
if ( !scrolled ) {
$anchorScroll();
scrolled = true;
}
};
Update: The scrolled variable is there to make sure that the code is only executed once (at page load), and thus this code should reside in an application-wise controller and not a controller specific to a route or view. However, there are still some shortcomings to this approach that might need to be countered, like if the view that the user loads the page first has no ng-init calling the function, and then he moves to another view that does: the code will execute, and the user viewport will possibly be changed against the user's intents.
To solve it, I actually only had to add this line of code without anything else :
This is doing the trick.

Windows Phone Application Bar Instance Remaining Same When Back Key Pressed

I Have Created an application bar in the First Page and when a click occurs, it navigates to the Second Page and creates a new Application Bar in CodeBehind c#.
Till here it is Working fine but when i press the Back Hard Button while on the second page, the application bar instance is still remaining and appearing in first page.
In the ONNAVIGATEDTO method i'm making the instance of the first page appbar as null but it is not working and the previous application bar (of the Second Page) is still showing in the firstPage.
The application bar is different for each page. No need to create it in code behind.
The null assignment does not work because the appbar is not rendered yet. If you insist of doing it in code behind, which is not recommended, do it on page load. There is also an Items.Clear() method you can use to remove the app bar items. You should do it in XAML though.

Content Dialog template in Visual Studio C#

I'm starting to learn Windows 8.1 phone development and I am trying to get the Content Dialog template to work inside a Pivot page. Work some reason, when I try to get the Add app bar button to navigate to the ContentDialog.xaml page, it is not displaying, but I see the navigate go to the ContentDialog constructor where the this.InitializeComponent() occurs.
I am finding very little online in way of examples on this template, so I am at a loss as to what I am missing. I understand that the ContentDialog page that was created from the template is inheriting from ContentDialog and not Page, but I'm not sure if this is still supposed to be directly accessed or if this XAML is supposed to be inside another "Page" XAML file.
Can someone please help.
The code looks like this in the Pivot page when the click event is selected:
Frame.Navigate(typeof(ContentDialog1));
I really haven't even touched the ContentDialog template from it's default yet, so it is set up like a set password page.
Thanks in advance
UPDATE
I found the answer to my question above. apparently, because it is a Content control, it needs to be called like a normal dialog would need to be called in it's code behind. I think my missconseption was that I thought it being "a template", that when I called it with the navigation calls that it would already have everything needed to get fired. You can also add the Content control to an existing page if you would like.
In either scenario, you need to add a method similar to this in your XAML.CS file.
private async void OpenDialog()
{
await this.contentStuff.ShowAsync();
}
You then need to call this method in the constructor. Then, when called, your dialog will appear.
Hope this helps others just starting out.

Load a XAML page in another XAML page

I need some help on a Windows Phone 8 app I am currently working on.
On the left side, I want a menu, if I click an item, I need to land on the corresponding page.
When the app opens, I see this menu and a bit of the next page.
I can switch between the menu and the full page with a button in the corner.
So far, so good.. I was able to build this and code a news page on the right to test this.
But then.. if I need to load another page, I'm in trouble, because my design at this moment
is a single XAML page that scrolls.
My question is this: Is there a way to load a XAML page in another XAML page?
Will this work with bindings?
Another option would be to put all the XAML for all menu items in place and only show
the things I need for a certain menu item (that feels quite wrong).
Or am I totally missing something?
All help would be very much appreciated, as I'm a new to developing for Windows Phone.
I added a simple drawing, which I hope can explain what I'm trying to.
You can add controls in c#.
namespace MyNamespace
{
public partial class SomePage: PhoneApplicationPage
{
public SomePage()
{
InitializeComponent();
LayoutRoot.Children.Add(new TextBlock()
{
Name = "MyTextBlock",
Text = App.ViewModel.Item[0].SomeProperty
});
}
}
}