I have migrated an application from Windows 8.1 to Windows 10 and now I wish to make the app adaptive to all windows devices.To do this I can either use Visual state triggers in XAML or my preferred choice, page size change function in C# to respond to the change in window size. But when using this code you have to specify the pixel width and height you want the code to respond to. As we all know there are different versions of laptops with different pixel heights and widths. So when I target one specific pixel width and height I have noticed when I run the app on another laptop with a different pixel width and height icons and buttons are out of place. So in essence my question is when making Universal apps does windows expect you to target each particular device not just the type but the width and height too when designing the screens? Or is there a way to target all pixels and widths of a device type when designing so that icons and buttons are not out of place?
There are 3 different options to make your UI adaptable. You can use an option exclusively or a combination of them.
Visual states and state triggers - one XAML file across all device families but the XAML can quickly become unwieldy for complex XAML
Separate XAML views per device family - Use XAML views to create different UI definitions that share the same code-behind. You can provide a unique UI definition for each device family.
Separate XAML pages per device family - To provide unique views and functionality, you can create separate Page files (XAML and code), and then navigate to the appropriate page when the page is needed.
You can read about these approaches in detail here Define page layouts with XAML
Related
I'm trying to develop a masonry layout in a custom-made image grid/gallery control in WinForm. Currently my control displays images in a square grid format with fast GDI rendering. Masonry layouts are usually common for web, and there's a lot of resources available on the internet for CSS and Javascript. But I noted that some Windows10 applications are also displaying masonry layout, such as Photos app. Another thing I noted is that the commonly used masonry layout on the web is developed in vertical orientation (variable heights) whereas the layout used by Win10 Photos app (and also other similar apps) are using a fixed row height horizontal masonry layout.
I'm trying to develop a similar code (as per screenshot of Photos app). The point I'm unable to figure out is how the layout configures that how many items to show in each row. There are rows that have 4 items, 3 items or sometimes 5 items. Its purely flexible depending upon the photo sizes/aspect. Overall the width of the layout control/panel is fixed.
Is this type of layout inherently supported by UWP apps? Does anyone know any links / guides that explain the logic behind this type of layout? Does the Photos app has public source code? Another UWP app I've seen implementing this type of layout is the "Perfect Flickr" app.
Does anyone know any links / guides that explain the logic behind this type of layout?
The UWP Community toolkit has a StaggeredPanel control which is similar to the one you mentioned. It's open source. You could check its source code to learn how to arrange its child elements.
I am developing a windows runtime app for windows phone, i need to scale the text based on the screen dimension.
for handle the image scaling i have used the 3 folder(scale-100, scale-140 and scale-240)
In the app I have different style for different kind of text(title, subtitle...)
is there any way to apply different style based on the screen size?
Following solution is for Windows (Phone) RT, not for WP Silverlight.
The resource system of Windows RT is much more powerful than a lot of people know. You're not only able to use scaling for images, the same works for resource (.resw) files, even a combination of language/scaling is possible. Simply use the correct naming conventions: e.g. Resources.scale-140.resw.
And then you're able to put about every single attached/dependency property in your resource file, leveraging the resource system based on x:Uid.
<Grid x:Uid="MainGrid">
<TextBlock x:Uid="MyTextBlock" />
</Grid>
You can run a few of the different emulator sizes to test if everything works as desired.
I have just started to develop in universal app. I have developed app in Windows 8 store apps and also developing Windows Phone 8 and Windows Phone 8.1 (SilverLight) Apps. Question is related to universal app in Windows and Single UI which is created in App. Share folder.
1 For web there is word like responsive UI. to create there is media query to write css.
I know css is same as we can create resource with for xaml . I can get resolution form c# and I can create different UI for different resolution and I can visible collapsed according to resolution but is there any single way which automatically adjust according to design.? ( this question is related to data binding controls specially...)
There are several techniques to adjust the page's design to the size, shape, and resolution of the window. These are usually used together.
The first is to use dynamic layout controls instead of hard-coding positions. For example, use a Grid control with * columns to split the screen by percentages, or a StackPanel to stack controls so they as they fit. GridViews can scale to fill the screen (and beyond). This will let the app flow to use the available space.
MSDN discusses this technique in Quickstart: Defining layouts
For larger scale changes where the app should make bigger changes to adjust to larger changes such as portrait vs. landscape vs. snapped modes you can use Visual States. Visual States allow the app to set a specific state (e.g. "Landscape") which automatically changes properties of the page's controls. For dynamic layout the visual states will typically hide and show different controls, for example to switch from a horizontally oriented GridView in Landscape mode to a vertically oriented ListView in Portrait mode. By data-binding both controls to the same data the code-behind doesn't need to know any details about which controls are used at any specific time.
MSDN discusses this technique in Quickstart: Designing apps for different window sizes
Blend has a very good Visual States editor that you can use to define and set up different visual states visually.
The same techniques and code apply to Windows Store apps and for Windows Phone Store apps, but the exact layouts are likely to be different to cater to the different device sizes. Windows Store apps run on a wide range of display sizes and users can resize Windows Store apps freely, so Windows Store apps need to support much more flexible layouts than Windows Phone Store apps. Windows Phone Store apps need to take display resolution into account, but run on fairly consistent aspect ratios which change only for portrait or landscape.
For very simple apps you may be able get away with sharing a single Xaml page in the Shared project of a Universal app, but in most cases you'll be better off with separate page designs for Windows Store and Windows Phone apps. In addition to the screen size differences, there are a few control differences that will require separate Xaml. Xaml doesn't support conditional compilation, so a Shared Xaml file would need to be exactly the same in both.
For Windows Store you can use 'visual states'. You can set rules that determine which visual state is to be used, e.g. when the width is 320 switch to snap mode and modify the layout to suit.
Be careful when looking up information on this because the paradigm changed a lot between Windows 8 and 8.1.
Jerry Nixon has a great tutorial on visual states:
http://blog.jerrynixon.com/2013/11/windows-81-how-to-use-visual-states-in.html
This post from my blog covers a simple scenario using code behind only (VB, but should be easy to change to C#) - not advisable when you have a complex layout:
http://grogansoft.com/blog/?p=116
And there is a sample somewhere amongst these on the Windows Dev Center:
https://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples/view/SamplePack#content
For the phone version(s) you should probably not bother with visual states as a phone app always has the full screen, and it's a better user experience to lock the display to either portrait or landscape.
Your phone/Store apps can share controls, but they have their own pages. I usually create full sized and smaller versions of any data-bound controls and use the smaller size on the phone and when the Store version is in a small state (e.g. 1/2 the screen).
I have a WPF application rendering fonts to a larger size than I expect.
The catch is that only WPF applications I write seem to have this effect, and the problem happens only on one computer. The effect also happens with all WPF programs I write (not just one), and all windows exhit the effect.
I am using Visual Studio 2008 with .NET 3.5 SP1; all programs written in WPF.
The operating system is Windows XP with the latest service packs.
The screen resolution is 1680x1050.
Windows and buttons using Windows XP style.
Font size is Normal.
DPI setting is normal size (96 dpi).
I tested my applications on a two other computers with same OS and settings and it looks fine. My programs run on dozens of other computers and I do not see this problem.
Here is a window that looks good:
Here is a window that shows the problem (notice the button on the lower left, and the font size):
I know I can increase the width and add margin to compensate, but I need to understand why this happening.
I am close to a release and I want to make sure my users do not see this effect.
All ideas appreciated.
I'm not running XP right now, but I thought you could customize the size of the text that appears in window captions (and buttons) via the Display Properties (right-click desktop, select Properties, and it's the 3rd or 4th tab, I think). It lets you select colors for selected items, background colors of windows, etc.
That would be separate from setting the DPI settings.
This looks like an unholy XP feature. It had the option to change the size of the system font independently from the video adapter DPI setting. Very convenient to XP users living in Easy Asia where glyphs that make up the letters are very intricate and need all the pixels they can get to make their script legible.
It is covered by Windows Forms with the Form.AutoScaleMode property, which defaults to Font instead of Dpi. WPF is however strongly biased to Dpi, the normal way of scaling.
I don't think the twain shalt ever meet. Tell your user to reset the XP setting. It is buried somewhere in the Control Panel + Display setting, I don't have it anymore to tell you exactly where to look. Or the logical alternative, changing the video DPI setting to match the font size. That's was in the Adapter tab, IIRC. Changing it from 96 to 120 DPI would be a good guess.
I am currently developing a Winforms Application that will run on a very specific tablet PC.
My development environment uses dual-17" monitors which are far bigger than the tablet screen size of 10.4" (1024x768).
Due to the purchasing department at my company the delivery of the tablet will not be until well into the design cycle.
Is it possible to mimic the tablet size so that I can adjust my forms to match?
You have couple of options:
set one of your screens to the tablet resolution. You might need to move your taskbar to that screen to get the proper-sized workspace.
install Virtual PC and create a VM with the tablet resolution.
set your main form size explicitly to the tablet PC resolution. For best results size it to the proper workspace size, not the desktop size.
Note that your form will have to still be relatively flexible, since users might configure their taskbar to be at a different position, or different size, thus affecting the available workspace for your app.
The fact that you have 1024x768 on 10.4" means the pixels are denser than your typical PC monitor. That means that text 10 pixels high on your monitor might look fine, but 10 pixels high on the tablet PC may be tiny and almost unreadable (even without loss of resolution).
Unless you can find a monitor with similar pixel density, I don't think you can properly mimic it. Even if you can shrink the application to a 10.4" section of the monitor, now you're probably dealing with sub-pixel shading which will look blurrier than on the tablet PC.
The best you can probably do is setting one of your monitors to 1024x768 (without stretching to fill the screen!), or just set your app to that size and eyeball it to take into account that it will actually be smaller.
You could try hosting your main form inside a user control or another form limited to the relevant size. However, the form is then not a "top level" form, but fairly closely looks and behaves like one.
You can perform normal form actions (minimise / maximise / move / resize / etc) so you can get a feel for what it is like and a certain size.
However in this instance, its best to always design the UI for the minimum resolution you have to target, and have it scale upwards on larger monitors.
very easy - if you're concerned about size, or users have to use the touch screen, start your form out with 10pt+ font
very cool - design the form size as, oh, 950x650. Experiment with the anchor property of each control. Allows you to make basically totally resizable controls (if you get creative with the anchor on groupboxes/panels and the controls inside them).
then set your form to maximize itself on the tablet PC (or e.g., if screen size is <= 1280x1024 - the Anchor property has its limitations as to what size increase looks reasonable).