I need to build some kind of phone emulator to test our webservice and have a general idea how the flow will go.
Doesn't needs to be anything fancy.
Now I made a WPF form with a phone image in it. In the display of the phone I have placed a frame. That looks good so far :)
But what now? How can I fill the frame with say the startscreen? Do I need to create a usercontrol for each page I want to view or show? Or is there another approach?
And how about databinding? I want to use MVVM, so I need to create a viewmodel for each usercontrol like we do normally? Or a viewmodel for each page?
I just discovered the WPF Frame Control and it seems there's not so much info on the net to find, or not what I want.
Thx for any pointers in the right direction.
Here is an image how it now looks:
For each view (screen) that the end user is going to see you will need to make a page that will hold all your logic and functions per page. All you do in Cycle through the pages in your own way.
FrameName.Navigate(PageName);
Remember to initialize the pages before you can use them. You can intialize them when you use the Navigate function like:
FrameName.Navigate(new PageName());
This works well for smaller projets, bigger projects you might want to use some clever way of initializing the pages because you navigate, like:
if(TimeToLoadPage == True)
{
PageName pagename = new PageName();
RunPageNavigation()
}
public Void RunPageNavigation()
{
FrameName.Navigate(pagename);
}
You can data bind the width and height of the page by inheriting from the Frame (Going through Ancestry route). You can do all the content based stuff in a page exactly the same as a window. You can't however control the page like a window.
Hope this helps a bit more.
Related
The NavigationService system that comes with MVVM Light seems to assume that I want to make the whole window navigate to another page, however, I would like to have a lateral bar from which I can select to which page to go, something like a hamburger menu in cellphone apps. That is, I only want to navigate using this frame that is inside a NavigationView.Content.
I could get it going by binding the content frame to the MainPageViewModel and navigate using it, but I would rather use the NavigationService provided by MVVM Light to learn it better.
Thanks for the help!
I could get it going by binding the content frame to the MainPageViewModel and navigate using it, but I would rather use the NavigationService provided by MVVM Light to learn it better.
You're on the right direction. Even if you use the NavigationService class provided by MVVMLight, you still need to provide your content frame instance for its CurrentFrame property. You could check its source code on GitHub.
For example,
var nav = ServiceLocator.Current.GetInstance<NavigationService>();
nav.CurrentFrame = YourframeControl;
Here, I wanted to provide an easy way to you. You could try to use the WindowsTemplateStudio to create your UWP project. You could choose 'Navigation Pane' project type and 'Mvvm Light' design pattern. Then, you would find that the 'WindowsTemplateStudio' has helped you do all relevant things. On the 'ShellPage.xaml', it has a NavigationView control for navigation. It also has implemented a NavigationServiceEx class for you.
In the ViewModelLocator.cs:
public NavigationServiceEx NavigationService => SimpleIoc.Default.GetInstance<NavigationServiceEx>();
In the 'ShellPage.xaml.cs':
ViewModel.Initialize(shellFrame, navigationView, KeyboardAccelerators);
This will do the same thing as my code above. Then, when you use the NavigationService to navigate to other page, it will use the 'shellFrame' control to navigate.
good sirs!
I've been messing around with the next scenario:
First, I have a webform structured as a WebForm containing a DevExpress ASPXPopUpControl and some other controls. Inside the PopUpControl there is a UserControl (lets call it ucA) containing some other controls and a UserControl (called ucB) that contains a cursed ASPxHtmlEditor (added because it's a new requirement).
When the user hits a button on main webform I show the PopUp (originally was a jQuery dialog but since HTMLEditor messes up with jQuery I've been forced to break the standard and use the popup) which contains the ucA. The user fills some fields in ucA and hit the save button. After user hits, I save some dataz and at this point I need to recover a textbox value placed in the webform.
I'm using Parent.FindControl["myTextBox"] but it considers the popupcontrol as parent. When I was using jQuery (before implementing the editor) it worked like a charm.
I feel it's something trivial but thrust me when I say that this stole many hours of research.
Thanks in advance.
EDIT I forgot to mention that I want to look for another UserControl at main webform. This uc its used to display core messages to the user so when he hits the save button, save happens, popup is closed and i look (Parent.FindControl("myUCMessageBoard")) from the ucA for the usercontrol to display a "Transaction complete" message.
I'm thinking you're going to have to do something a little hacky, by using ViewState. If I understand correctly, you are trying to get access to a TextBox's Text on the Web Form, from a UserControl nested within a PopupControl (so you can't traverse all the way up to Web Form Level).
So, what I'd do at some point in the process is store the text in a ViewState variable that you can access from the User Control. It's not optimal, but since you're already hacking to get it to work, what's a little more hacking?
You should expose all controls from ucA as properties, then look for the control inside the DevxPopup the same way you doing. Given that all the controls that you need at the ucA has properties to access them, you could do all the logic you need!
Example:
public ucA : UserControl
{
public string myTextBoxText
{
get
{
return ((TextBox)Controls.FindControl("myTextBox")).Text;
}
}
/*And lot of controls*/
}
Then you looking for the popup at the Form
var ucA = (UcA)Form.Controls.FindControl("myPopup").Controls.FindControl("myucA");
ucA.myTextBoxText = /*Do stuff here with the text*/
Hopes this help you!
In my MainPage.xaml, I created a Pivot Control: <controls:Pivot Title="Powder God" Name="PivotControl">.
My first pivot view is a HubTile that summarize all other individual pages. So my application bar will be different between the first pivot view and all other ones.
That's why I put my application bar in App.xaml's resource section, then load based on selected index of my pivot.
My question is:
In the application bar I will be using for all individual pages, I want to have a delete option, where I will remove that specific item (a view model) from my data context.
I know I can use PhoneApplicationFrame root = Application.Current.RootVisual as PhoneApplicationFrame; to access navigation services, but I don't know how can I reference to my pivot, so that I can get the selected index and proceed forward.
Thanks!
Using MVVM you SHOULDN'T do this:
((PageType)Application.Current.RootVisual).PivotControl. //Blah
PageType is whatever type PhoneApplicationFrame is that contains your PivotControl. If this doesn't work you need a Property in the RootVisual
PAGE
public Pivot MyPivot
{
get
{
return PivotControl;
}
}
APP
((PageType)RootVisual).MyPivot. //Blah
On one level Microsoft's suggestion of putting the ApplicationBar in App.xaml is great as it can be referenced from everywhere and would appear to encourage code reuse: however this question highlights the limit to this approach. An application bar is typically used to provide actions which are specific to the current page (or pivot item) and just because the buttons are the same you may not want the exact same code to run in each case.
In this case I think it would better to create a factory method that creates your common ApplicationBar with the click handlers you specify specific to your page/pivot item. For bonus points put the method in a new class (not App) so it doesn't get lost in all the boilerplate code there. Call this factory method in your page constructor and remember your ApplicationBar in your class. For multiple app bars, create them all up front and you can then easily switch between these app bars in your Pivot SelectionChanged code.
The alternative of creating the ApplicationBar in App.xaml and then retrieving this from the App.xaml.cs "Resources" ResourceDictionary in code, modifying the click callbacks, is more complicated in my opinion.
I wish they'd done a better job of implementing the ApplicationBar so people wouldn't want to do this. I've found that using the ApplicationBar forces you to add code to your Page.xaml.cs even if you use a framework like MVVM Light. This is still OK in MVVM as it's UI specific code that belongs in the View, but it makes things inconsistent if you're using ICommand everywhere else. Last time I decided it was better to create the entire ApplicationBar in code rather than hack this kind of thing via App.xaml.cs.
Update: There is a UserVoice request for a data bindable ApplicationBar.
I'm currently working on a web-based game using ASP.NET and C#. Previously, I've been just organizing the various game screens(start, hi-score, results, etc) into individual Panels nested within a main UpdatePanel and showing/hiding the appropriate Panels as the game progresses. However, I've severely underestimated the scale of the game and I'm gonna have to break it down to more manageable chunks.
My idea now is to have a Main.aspx with an empty UpdatePanel and I'll load the various screens as individual .aspx files into it. Kinda like with WinForms I think, when you create another new WinForm and add it to the current parent form.
I've been trying to find how to get about doing this in the code-behind, but I'm still at a lost. I could probably do this with Response.Redirect, but then there would be the usual flicker when the new page loads, which is something I want to avoid.
I did come across something interesting called a UFrame but that seems to work in the HTML instead of the code-behind.
I appreciate any help or suggestions in this matter, and apologize if this has been asked before. Thank you.
Edit: With regards to womp's answer, .ascx seem to be a step in the right direction for me. I successfully got my Startscreen control control up and running inside the Main.aspx. However, another problem has popped up, where the screen just goes blank when I try to add another usercontrol to a panel inside Main.aspx upon a button click.
The event handler I have for a button in the Startscreen control is:
protected void Btn_Arcade_Click(object sender, EventArgs e)
{
this.Parent.Controls.Add(LoadControl("Arcade.ascx"));
}
I'm not too sure if there's anything wrong with that, but the Parent in this case is basically what I called the GameContentPanel that resides within Main.aspx's UpdatePanel.
I don't think it's a problem with the HTML fudging up either, since I tested it by loading it first instead of the Startscreen, and everything showed up fine.
I've also tried loading both controls together at the start in Main.aspx, and both controls load correctly as well.
Can the "screens" be .ascx usercontrols? You can load a usercontrol into a panel using LoadControl("~/path/to/myControl.ascx"), and then those controls can take part in the lifecycle of the main page.
If they really have to be in separate .aspx pages, then you might need to look at using an iframe, or else maybe rethinking your approach. Webforms apps were designed to have lots of things happening inside the context of one page/form, and not transferring control back and forth to multiple pages.
I've seen two threads here about TDI & C#. Both of them didn't really answer the questions I have ...
Since TDIs are pretty much like a standard nowadays, I can hardly imagine, that I have to buy a special control (like AvalonDock or SandDock).
This must be possible with built in the tab-control(?) somehow! I don't need special features like dock- and draggable tabitems. Just open every form in a new tab. Thats it.
Like putting every forms content controls into user controls and by request (button, menu click ...) add a new tab and put the corresponding user control on it ... something like this.
How would you do it? This can't be THAT complicated (even for me) or am I missing something?!
thanks a lot!
Maybe Josh Smith's article on MVVM can give you an idea how to design such user interface. Example being built there is kinda tabbed document interface so you can use it as a starting block.
It's not that hard. It seems hard because there are a lot of different ways to do it.
Try this:
<TabControl x:Name="documentArea"/>
Handler for AddForm button:
private void AddFormClick(object sender, RoutedEventArgs e)
{
object form = GetNewForm();
documentArea.Items.Add(form);
}
That's it. You have to implement GetNewForm() in one of two ways. Have it return a user control that displays the form.
OR better yet, have it return your document that you want to display. Use a DataTemplate to select the controls to use for displaying this document. This method is going to be more complex to set up.