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.
Related
I have built a Xamarin Forms app for Android and iOS for the company that I work for. This is my first exposure to Xamarin and while I really like the ability to write native apps for these platforms in C#, there are some details that I'm still working on.
One of the pages that I create is a thumbnail view of all products of a particular type. I was creating the page by dynamically generating a Grid where I would create a stack panel with an image, price and name of the product, and insert it into the appropriate row/cell combination. Problem is, on large catalogs, this would cause the page to crash because it is using too much memory with the Image control. I solved this by using a WebView for the image/price/name combination, which works but I know is not the best way.
I've researched using bindings but I can't for the life of me figure it out. I'm not using XAML but rather generating the UI dynamically from the code. If anyone would be willing to give me a sample of how to do this the right way I would really appreciate it!! There are a fair amount of examples out there, but I can't find anything on how to display essentially a gallery of products.
I am new to Creating WPF GUI Applications.
I am a Mid Level Programmer. I dont have any idea or knowledge about the Graphics Development.
I would like to know how do I use the UI Elements designed in Photoshop in my WPF Application.
Eg: I would like to replace the default textbox or the button in WPF with the button or textbox designed in Adobe Photoshop.
Last Information:
I am using Expression Blend 4.
Any Help Would Be Appreciated, Thanks
Starting with WPF
I personally work with a combination of Microsoft Visual Studio (environment) and Microsoft Expression Blend (elements editing).
Blend is a WYSIWYG front-end for designing XAML-based interfaces for WPF and Silverlight applications, and it's good for templates, visual states, and animation.
Editing Templates
If you are working with templates, a nice tool is WPF Theme Editor by DevExpress. It integrates with Blend, and the tree browser and template hierarchy are very useful for locating styles.
One thing you'll always find helpful is access to the actual structural templates for the elements. I usually find myself visiting the DevExpress WPF Controls website, which has a very comprehensive list of libraries and controls.
The Demo Center for DevExpress is also a great downloadable app for extracting and editing templates. I find it particularly useful with complex elements like charts (not included in Blend), where you can toggle the visibility of elements and then move the code to your dev space.
Creating Graphics
For working with graphics themselves, I found Microsoft Expression Design to be quite good for drawing and exporting vectors into png, WPF or Silverlight formats. It has a nice simple set of tools, and you can import elements from vector. Also, version 4 is free.
Testing
I just discovered this nice tool for testing live called Snoop. It's open source, and it allows you to spy/browse the visual tree of a running WPF application (without the need for a debugger), and change properties live.
For all of these you will probably need at least a basic knowledge of how to write/read WPF. I personally use all of the previous and write custom styles for custom elements.
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 love the Monocross idea but am a bit lost for Windows Phone 7 when I want to use a Panorama and/or Pivot control. The only view provided is the Page view. So navigating from one page to another works great! But now I want a Pivot or Panorama. Basically I could create a new controller for this view, but do get the "pages" inside the controls. The navigate does really Navigate to it, but not inside the Pivot / Panorama.
For Monotouch and MonoDroid samples have been prepared how to do this (basically a new viewcontroller was created). But WP7 has been left behind.
Anybody?
I am also doing cross platform development using mono and like you and many others face the problem of what to do with respect to the user interface and other underlying hardware integration.
I decided that I did not want to be at the mercy of yet another third party framework (mono is enough) and researched for a solution that I could build and maintain myself. The new MVVM pattern along with Expression Blend is really cool but soon you find yourself stuck when it comes to cross platform development.The MVC an MVP patterns also did not seem to suit what I needed. Finally settled on the PM pattern and expanded it into a PMH where the H is for hardware. To achieve what I needed I had to abstract the fundamental widgets (buttons, panels, textboxes) into a underlying platform layer for each device type. My platform layer represents around 1% of my code base and allows me to skin the application for each device I target it for.
For my WP7 solution I use hardly any HTML only around 25 lines which is enough to initialise the application and the main page. The rest of the user interface is put together programmatically just like I would in WinForms. On WP7 I still make use of the Pivot control as it really is pretty groovy and am modelling a similar control for use on Android/iPhone. While it wont be 100% the same it will be very similar and still use the same navigation engine within my core code.
I am not complete with my development yet but so far I am very happy with my progress. I have been developing user interface for Windows application for some 20 years and I never use the interface builder tools as I find they never give me what I want and really waste my time (Blend is pretty cool though) and also create a tremendous code bloat especially in Blend.
I can't entirely help with monocross - I did do a sample for droid once - https://github.com/slodge/monocross-tab-activity-view - but I never completed the wp7 part of that.
For mvvmcross... which is related... there's a couple of samples - one in the tutorial (a bit hacky!) and one in the conference app - much the preferred sample.
The basic technique I choose was to use sub-viewmodels for each "tab" of the panorama - see how the databinding DataContext is set for each Item in https://github.com/slodge/MvvmCross/blob/master/Sample%20-%20CirriousConference/Cirrious.Conference.UI.WP7/Views/HomeView.xaml
Note that in a bigger app there may be important memory issues to consider when doing this - especially when using a pivot control which does not load all pages into memory at the same time (so you don't really need to load all viewmodels either)
Some bloggage on the conf app: http://slodge.blogspot.co.uk/2012/03/update-on-mvvmcross-sqlbits-conference.html
And the final sql bits source: https://github.com/slodge/MvvmCross/tree/master/Sample%20-%20CirriousConference
I'm writing an app in C# WPF and I'm hoping to implement a similar kind of touch-based horizontal scrolling that's featured prominently in Windows 8.
At the moment I'm using ScrollViewer with content inside it. This works fine as far as the scrolling is concerned, but it creates problems when interacting with controls inside of it (for example, sliders).
With my limited programming knowledge (a month ago the most I'd done was create a mockup in Photoshop :P), I'd assume this was because the touch hits the ScrollViewer first? Is there some way of flipping this around? I would be happy even if you had to hit a white space to be able to scroll, I just need the user to be able to interact with the controls inside easily without accidentally scrolling all over the place ^_^
Unfortunately, I can't just code for Windows 8 as this is specifically for a bunch of touch-enabled Windows 7 machines.
Look for the Metro theme here you might find some usful style here that you can modify and use..
Also you can check this website for information and guidelines on Metro UI on WPF