I'm about to start porting my WP8.1 app to W10, and looks like I'll have to make it a Universal Windows App. Now, I'm fine as for the back-end code, as I'll be able to reuse 90% of my classes (Models, ViewModels, and most of my helper classes, extension methods and converters).
The problem is for the UI: I understand I'll have to design the app for different screens and aspect rations, and I don't know how to actually implement that in code.
I mean, as for the UI scaling, I know I can use the VisualStateManager and AdaptiveTriggers to manually set the properties of the UI elements I want to adapt on any screen resolution, or I can use some converters, and that's fine.
Whan I mean is: what's the best method to have the whole UI adapt to different resolutions?
This is an example:
As you can see: the whole navigation pattern changes along the UI when on different screens. On phones, we have the contact page that covers the whole UI, while on tablets and PCs we have the contact page that's just a fraction of the UI, and the pivot pages are moved into another panel on the right. Also, many of the UI elements are completely rearranged.
And of course, some view-level back-end code will change as well.
Now, I'm wondering what's the best approach to do this whole thing.
Should I:
• Have a single XAML file (for every page) with a lot of VisualStates and stuff, and try to rearrange the UI for every screen resolution
• Have different projects with a shared project (like with W8.1 universal apps), so that I can focus on the UI on every specific device? This is the approach I'd be more comfortable with, as I'd be able to design platform specific UI elements without problems. Still, I didn't understand how to actually create a shared project and different projects for each device type in VS2015.
• Use that approach with different XAML pages that share the same code-behind file (even I'm not sure how to implement this, and how to implement platform-specific code-behind parts).
• Some other method
I mean, I'm sure I'm not the only W8.1/WP8.1 developer in trouble here, is there some kind of advice I can use? I already watched all the MVA videos about W10 development, but they didn't get into the implementation details there.
Thank you for your help
Sergio
It really depends on your project. If a UI isn't changing too drastically, I would definitely use AdaptiveTriggers. You can do a lot with very little XAML. Check out Microsoft's sample code if you haven't already: https://github.com/Microsoft/Windows-universal-samples/tree/master/xaml_responsivetechniques
If it is changing drastically, you can do it with AdaptiveTriggers, but it's probably easier to have multiple XAML files. A new way to do this in Win10 is to use DeviceFamily. Essentially, just create a folder called "DeviceFamily-Mobile", and stick a XAML view with the same file name in there. More info: http://sharpgis.net/post/2015/04/01/Creating-DeviceFamily-specific-layouts-in-a-Universal-App
Those two screenshots aren't necessarily that different, if you look at using the SplitView Control and the RelativePanel Control.
See this //build talk for more info.
Related
This is the first Xamarin.Forms app I try to create, so please bear with me.
I'm learning about Xamarin.Forms, and I'm creating my first app (with a map) that will run in the android emulator. I've already added the map, so life is good.
I also understand that, unlike asp.net webforms or Windows forms, I cannot drag & drop controls to the form. I also don't know what the available controls for each platform look like.
With that said, I would like to add the following control to my app. I have no idea how it's called, but it's sort of a panel on the bottom half of the screen. This panel will include a list (much like a gridview).
I saw this Xamarin page with a list of standard controls, but I don't know how to identify them. Even worse, I don't know what to search for in the web.
I would like to know where I can find information on adding that control to a form and populating it with data (like an asp.net gridview)
Something like that is usually rendered using an ActionSheet
Unfortunately there isn't such a control. On iOS it is done by partially covering the screen while presenting the TableViewController. You can't do something like that on Xamarin.Forms. You can do that only on native projects.
There might be some plugins that may do some of that work for you but I don't think any of them fits your request, but you can try how far you can get with this one: https://github.com/rotorgames/Rg.Plugins.Popup
Please note that Xamarin.Forms don't cover all native controls and especially not all properties of those controls. And while you may extend their reach in various ways if you are after copying everything you see in some app it is better to think of some other technology.
Also of note, Android doesn't support everything that iOS supports, so if you see something on iOS screen (like above) it may not be supported on Android, no matter what technology you use you will have to build a very custom solution, which probably isn't part of your first app.
I am developing a windows form. I want to change the physical appearance of the form and its controls. I was able to use the Skincrafter demo, however this is making the application substantially heavier. I am not satisfied with how "heavy" it feels when navigating through tabs, moving the window, etc. It's fairly simple program and I do not have this issue when not using skincrafter. When not using it, the GUI is very responsive and I want to keep it that way.
I've tried many different skins and the results are very similar in every case.
So I will not be using skincrafter unless someone points me out to possible reasons for this slower GUI. I followed their tutorial and didn't do anything else. Simple process. Before: fast GUI - after: slow GUI.
Can anyone recommend me another way to change the appearance of my controls/form? Is there way to programatically change the appearance of controls and form, without relying on a third party skinning software?
Note that I do not want my users to change skins. I want to apply one and that's it.
thank you
Steve
Edit:
The project is far from done so I am going to give WPF some real good thoughts so I don't end up doing this when I have a 4x times as large as it is right now.
I've already start converting and it shouldn't be much of problem. Found timer and serialport cannot be front from the toolbox and timer are replaced by dispatchtimer. No big deal so far.
One another thing that makes me want to work with WPF is that I may have the need to make graphs (plotting) to show temperature over time. I use serialport to communicate with an external USB controller (virtual COM port) that reads a bunch of temperature sensors and fan speeds. I suspect graphing to be better with WPF.
One last thing: it's just about colors/fonts but more about looks of the buttons, looks of the actual window (border shapes). What I wanted to do was something similar that is done with html and css. I do want to have custom labels to give them the look of a "digital display" for real time temperatures and fan speed measurements.
again thanks all for the help provided!
In the distant past, I added lightweight skinning to WinForms projects by subclassing the out-of-the-box controls (Label, TextBox, etc), and having that subclass read in appearance configuration (e.g. color, font) from an XML file (one could also use app.config).
That approach was easy to implement, and I saw no visible performance degradation.
If you just want a consistent, new look and don't need to enable the end user to pick from a variety of skins, the subclassing approach is very straightforward. For example, to modify the look of a Label:
public MyLabel : Label
{
MyLabel()
{
this.ForeColor = Colors.Blue;
}
}
Then, everywhere you currently have a Label in your code, use a MyLabel instead.
If you are starting a new project, I would highly recommend using WPF instead. It provides a much more flexible UI framework. One key feature is that it separates the look from the UI implementation.
I'm creating a Windows 8 metro style application for navigating a rest api which is essentially the same as a file system. I would like to use the same UI as you get with the File picker and the built in search results.
How can I get the XAML (or ideally XAML+code) used in this UI? Are there any samples? Could I use a tool? Is the code available anywhere?
Thanks,
Jon
The FilePicker is provided as an OS piece of UI that is common across all the WinRT dev environments. There is not any source or XAML available for it.
Just build it, right? The UI is so simplistic, that I think an hour and some TLC and you will have what you want. You can't get the raw XAML as it's in the OS itself, but you don't want it anyway - it's certainly implemented with more complexity than you want or need.
I would offer this one bit of advice. It makes sense to copy the general look of the file picker for the sake of usability. However, do yourself a favor and make something different. There's no reason the user should be confused by the similarity - wondering where their SkyDrive is or something else. You may have already thought of this.
I have a ASP.NET Web Application. I want to access this application in Smart phones and tablet computer. So please help me on this. What are the changes required?
The answer to your question could range from nothing to everything. At the end of the day, it all depends on what you existing app looks like in a target mobile device (iPad, Android, etc). If your existing app looks and functions properly, then you don't have to do anything. If not, well, you figure out what's wrong and make it work.
Your question really isn't suited for StackOverflow because it is way to broad and impossible to answer.
Asp.net applications can run in web browsers, including the ones that come with smart phones and tablets. The main concern would be the various screen sizes of the various devices. Because they vary so much, a good design concept for your asp.net application would be to layout content in a way it can adapt to the screen size.
The best technology for this within an asp.net application, especially for an application that was already built, would be to implement style sheets (.css)
Look at these styles as an example:
float, clear, max-width and max-height
Check these and other styles at: http://www.w3schools.com/css/
Now, there is also the concept of having your asp.net application detect which device is being used and then generate UI code (or load .ascx controls) accordingly to provide device specific displays.
Check:
Request.Browser.IsMobileDevice
Request.UserAgent (http://msdn.microsoft.com/en-us/library/system.web.httprequest.useragent.aspx)
However, I would only suggest using this to a minimum, because if you make a change to your UI, you won’t want to keep updating multiple instances of the UI for different devices.
A good compromise would be to build a style sheet for each group of screen sizes (smart phone, tablet, PC, etc.) and then detect which device is in use and include the respective style sheet.
NB: there are many open source projects, which could get you running more quickly with mobile development in mind. Check sourceforge.net and codeplex.com for examples.
im looking for some tips and hints how i can build up my Application in a good way.
So here are some informations: I have at the moment the Mainwindow designed with a grid which holds 4 frames. its looking like this.
At the top is a menu which let you select the different Pages. I have for the main area about 8 pages for e.g. a settings page and 4 content pages. The Sidebar displays some additional informations which can be choosen by the user and the bottom shows only a page when 1 of the content pages are opened.
So my content pages have ViewModels behind to fill them and im trying to use commands in the near future when im understand all features of them ;). So im trying to use the MVVM way, but im very new at this.
I don't really need a navigation menu like it is given from navigation windows.
So is it the best way for an application like that to use Frames or are there any better solutions?
Frames support the built-in navigation infrastructure of WPF so they're a good choice if you plan to use that. It does have some problems (at least some people think so, including me) but for simple/small applications it will do just fine. Of course they'll also work if you want to roll your own light-weight navigation system, like I usually do. I generally navigate by sending instances of ViewModels around and setting them as the contents of windows or content controls, and letting DataTemplates 'dress' them up as they are defined in the views. For larger projects I'd always recommend one of the awesome frameworks which include navigation systems like Prism or Magellan.
Basically it all depends on your requirements; there are a lot of ways to get it right. It's good that you're trying to use MVVM, try to stick with that and it will generally automatically guide you in a good direction.
I'd suggest using a docking library like AvalonDock to spice your application up a bit... however I have a bitter experience with it as it's not MVVM-friendly. I recently spent the better part of a week wrestling with it to make it usable enough in a MVVM scenario and I'm not sure it can ever be done. There may be other libraries that handle things better, but (full-featured, like in Visual Studio) docking is a complicated matter so maybe don't go there. Sorry, I probably felt the need to vent after the AvalonDock frustrations.