Gerald Versluis
Gerald Versluis
  • 375
  • 3 915 683
Boost Your XAML Productivity with These Tools - .NET MAUI 101
Did you know that Visual Studio has some pretty cool tools on board that will make working with XAML so much easier? Really want to get that pixel-perfect design? Use Debug Rainbows 🌈 ua-cam.com/video/AjOR47AxSAk/v-deo.html
In this video I will show you the XAML Live Preview, Live Visual Tree and Hot Reload. Together these tools will make you forget you even wanted a .NET MAUI designer in the first place.
💝 Join this channel to get access to perks:
ua-cam.com/channels/raldVersluis.htmljoin
Disclaimer: this channel is done on personal title, in my free time, and not officially affiliated with or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
🛑 Don't forget to subscribe to my channel for more cool content: ua-cam.com/users/GeraldVersluis
🐦 Follow me on Twitter: jfversluis
🤝 Join the Discord server: discord.gg/2cAyTGNHBD
🔗 Links
Visual Studio XAML Live Preview Docs: learn.microsoft.com/visualstudio/xaml-tools/xaml-live-preview
Hot Reload Docs: learn.microsoft.com/dotnet/maui/xaml/hot-reload
Live Visual Tree Docs: learn.microsoft.com/dotnet/maui/user-interface/live-visual-tree
⏱ Timestamps
00:00 - .NET MAUI XAML Tools
00:15 - Being More Productive with XAML
00:36 - Windows InApp Toolbar
01:10 - XAML Live Preview
02:36 - Live Visual Tree
04:00 - Hot Reload
05:34 - More .NET MAUI 101?
🎥 Video edited with DaVinci Resolve
🙋‍♂️ Also find my...
Blog: blog.verslu.is
All the rest: jfversluis.dev
#dotnetmaui #xaml #maui101 #xamlpreview #productivity #dotnet #maui
Переглядів: 4 142

Відео

Select Different Camera and Prevent Memory Leaks with CameraView
Переглядів 1 тис.14 днів тому
I forgot a very important detail in my last CameraView video: don't forget to clean up your resources and prevent memory leaks! Another great control is MediaElement, check it out: ua-cam.com/video/_sp4RG0I0x4/v-deo.html In this video we will look at how to select a different camera with the .NET MAUI CameraView as well as learn how to clean up our resources and not cause any memory leaks in ou...
Take Pictures in Your App with CameraView for .NET MAUI
Переглядів 3,2 тис.21 день тому
CameraView is back! Freshly ported from Xamarin, we have an all new CameraView available for you for .NET MAUI. I made a quick follow-up video too with preventing memory leaks and selecting other cameras: ua-cam.com/video/JUdfA7nFdWw/v-deo.html With this first version of CameraView you can control zoom, flash, resolutions, which camera to use and actually take pictures! In this video I will sho...
Background Media Playback and Lock Screen Controls for MediaElement Are Here!
Переглядів 1,6 тис.Місяць тому
MediaElement in .NET MAUI just got a lot more useful! In the latest update you can now play your media in the background and control it from the device lock screen! Want more details about MediaElement? Check this out: ua-cam.com/video/_sp4RG0I0x4/v-deo.html In version 4.0 of the .NET MAUI Community Toolkit MediaElement you can now set metadata for you media, control playing media from the lock...
Extract Text from Images and Pictures with OCR in .NET MAUI
Переглядів 3,5 тис.Місяць тому
Do you want to be able to read the text from within an image with OCR? With Plugin.Maui.OCR extracting text in your .NET MAUI app has never been easier! Want to build your own plugin? This video helps you with that: ua-cam.com/video/ZCQrlGT7MhI/v-deo.html In this video we will see how you can easily implement text recognition (OCR) in your .NET MAUI app. You can extract text from both an image ...
BottomSheet Plugin for Blazor Hybrid & .NET MAUI
Переглядів 3,3 тис.Місяць тому
Something you see in a lot of mobile apps these days is a bottom sheet. In this video we'll learn how to implement one in your .NET MAUI and Blazor Hybrid apps! Looking for the original video? It's here: ua-cam.com/video/JJUm58avADo/v-deo.html With a BottomSheet you will have a great looking way of presenting content to your user. You can put any content in there and show it partly on screen or...
Test Bugfixes on Your Own .NET MAUI Project Before They're Released!1!
Переглядів 1,8 тис.2 місяці тому
Test out fixes in .NET MAUI before they are actually merged and released and on your own project?! You totally can by grabbing the artifacts of the pull request! Each pull request will go through the continuous integration pipeline and produce artifacts. Among those artifacts are the NuGet packages that you can then grab and install on your own project to verify if a fix is correct. In this vid...
Adding Fingerprint Or Face Recognition To Your .NET MAUI App
Переглядів 5 тис.2 місяці тому
Adding biometric authentication to your .NET MAUI app is easier than you think! With this plugin you can easily enable fingerprint or face recognition to your iOS and Android apps. Want to build your own plugin? A matter of minutes with this: ua-cam.com/video/ZCQrlGT7MhI/v-deo.html With Plugin.Maui.Biometric you can add biometric authentication to your .NET MAUI app in minutes. Whether you want...
Detect Long Press in Your .NET MAUI App with TouchBehavior
Переглядів 2,8 тис.3 місяці тому
The TouchEffect from Xamarin has been ported to .NET MAUI and is now known as the TouchBehavior! While the TouchBehavior can do many things, one of them is detect long press on any visual element in your .NET MAUI app. In this video we will see how you can use TouchBehavior to detect long press in your app and invoke functionality as part of that. 💝 Join this channel to get access to perks: ua-...
Prevent App Store Rejection: Add the Apple Privacy Manifest NOW!
Переглядів 9 тис.3 місяці тому
If you want to be able to release your iOS and macOS apps to the store after May 1 2024, stop what you're doing and watch this video! Apple is going to enforce the Apple Privacy Manifest for their apps in the Apple App Store. That means that you have to include one in order for you to be able to update your apps or releasing a new app. Regardless of the framework that you are using to build you...
Make Your Designs Pixel-Perfect with DebugRainbows for .NET MAUI
Переглядів 3,4 тис.4 місяці тому
Getting your UI design just right can be tricky. With Plugin.Maui.DebugRainbows, this is now easier than ever! Ever thought about building your own .NET MAUI library? This video will get you started: ua-cam.com/video/ZCQrlGT7MhI/v-deo.html Just by adding DebugRainbows to your project you will get visual helpers to check your design implementation. But it doesn't stop there, what about a grid ov...
Fullscreen Video Playback with MediaElement in .NET MAUI is here!
Переглядів 2,9 тис.4 місяці тому
The most highly anticipated feature for MediaElement is finally here! You can now play your videos in full screen on iOS, Android, Windows and macOS in your .NET MAUI app. Implement MediaElement in your project? This video will help: ua-cam.com/video/_sp4RG0I0x4/v-deo.html A great community effort led to the implementation of fullscreen playback in the .NET MAUI MediaElement control. In this vi...
How to Generate PDFs in .NET Apps (2024)
Переглядів 5 тис.5 місяців тому
PDF is still the standard for exchanging documents. In this video we'll learn how to generate a PDF report from .NET MAUI. Curious about that PDF Viewer I'm using? Watch this: ua-cam.com/video/dfspSeE9AVk/v-deo.html With the iText library you can generate PDF files from inside of your .NET MAUI application on Windows, Android, iOS and macOS. And it doesn't even stop there! With iText7 you can g...
Free PDF Viewer Control for .NET MAUI - Show PDF Files with Ease!
Переглядів 6 тис.5 місяців тому
A cross-platform FREE PDF control for your .NET MAUI apps? Sounds like a dream? It's not! Are you looking how to generate PDF documents? Check this out: ua-cam.com/video/JOJRzVqTmBY/v-deo.html In this video we'll learn how to show PDF files on Windows, iOS, macOS and Android with a free control that is already built into .NET MAUI! 💝 Join this channel to get access to perks: ua-cam.com/channels...
Publishing .NET MAUI Apps to the Stores Made Easy
Переглядів 8 тис.5 місяців тому
Publishing .NET MAUI Apps to the Stores Made Easy
Add Screen Recording to Your .NET MAUI App in 2 Lines of Code
Переглядів 2,8 тис.6 місяців тому
Add Screen Recording to Your .NET MAUI App in 2 Lines of Code
Material Design & Free Controls for .NET MAUI with UraniumUI
Переглядів 16 тис.6 місяців тому
Material Design & Free Controls for .NET MAUI with UraniumUI
No More Magic String Navigation in .NET MAUI Shell with this Plugin!
Переглядів 7 тис.7 місяців тому
No More Magic String Navigation in .NET MAUI Shell with this Plugin!
Shortcut Keys on Desktop with KeyboardAccelerators - .NET MAUI 101
Переглядів 1,7 тис.7 місяців тому
Shortcut Keys on Desktop with KeyboardAccelerators - .NET MAUI 101
Add a Menu Bar to Your Desktop App - .NET MAUI 101
Переглядів 3,8 тис.7 місяців тому
Add a Menu Bar to Your Desktop App - .NET MAUI 101
Add Context Menus To Any Visual Element - .NET MAUI 101
Переглядів 3,4 тис.7 місяців тому
Add Context Menus To Any Visual Element - .NET MAUI 101
Free and Complete Calendar Control for .NET MAUI: Plugin.Maui.Calendar
Переглядів 6 тис.8 місяців тому
Free and Complete Calendar Control for .NET MAUI: Plugin.Maui.Calendar
What is Blazor WebAssembly, Server, Hybrid, United & Mobile Bindings?!
Переглядів 176 тис.8 місяців тому
What is Blazor WebAssembly, Server, Hybrid, United & Mobile Bindings?!
Custom Storyboard Launch Screen for iOS with .NET MAUI
Переглядів 6 тис.9 місяців тому
Custom Storyboard Launch Screen for iOS with .NET MAUI
Install Xcode Versions Easily, Side-by-Side with Xcodes
Переглядів 5 тис.9 місяців тому
Install Xcode Versions Easily, Side-by-Side with Xcodes
Working with Calendar Data in .NET MAUI with Plugin.Maui.CalendarStore
Переглядів 3,5 тис.9 місяців тому
Working with Calendar Data in .NET MAUI with Plugin.Maui.CalendarStore
Easily Record Audio with .NET MAUI and Plugin.Maui.Audio
Переглядів 3,7 тис.9 місяців тому
Easily Record Audio with .NET MAUI and Plugin.Maui.Audio
Telerik for .NET MAUI: PDF Viewer, TabView, Calendar and Image Editor
Переглядів 4 тис.10 місяців тому
Telerik for .NET MAUI: PDF Viewer, TabView, Calendar and Image Editor
Discovering Multi Triggers - .NET MAUI 101
Переглядів 2,5 тис.10 місяців тому
Discovering Multi Triggers - .NET MAUI 101
Access Calendars and Events with CalendarStore plugin in .NET MAUI
Переглядів 2,8 тис.10 місяців тому
Access Calendars and Events with CalendarStore plugin in .NET MAUI

КОМЕНТАРІ

  • @cissemy
    @cissemy 2 години тому

    How to batch scan?

  • @ericritter46
    @ericritter46 21 годину тому

    mmm right! 6:00

  • @annotations888
    @annotations888 2 дні тому

    Please make a video showing the shell.ItemTemplate with font icons and not images. Eveywhere developers use images but I need the it to work with font icons

  • @alexali9967
    @alexali9967 3 дні тому

    I needed to add HeightRequest & WidthRequest to CameraView to preview the video

  • @user-bt1ye9ul4d
    @user-bt1ye9ul4d 4 дні тому

    Is it free?

    • @jfversluis
      @jfversluis 4 дні тому

      sentry.io/pricing/

    • @user-bt1ye9ul4d
      @user-bt1ye9ul4d 4 дні тому

      @@jfversluis thanks, I started trial business plan, If the trial period has passed, will the free plan be used automatically or will I need to activate it manually?

    • @jfversluis
      @jfversluis 3 дні тому

      @@user-bt1ye9ul4d I don’t know, I don’t work there 😄

    • @user-bt1ye9ul4d
      @user-bt1ye9ul4d 3 дні тому

      @@jfversluis lol

  • @orhancanoguz4423
    @orhancanoguz4423 4 дні тому

    Can you make a video tutorial like this for all Telerik MAUI products?

  • @mahmoud19901990
    @mahmoud19901990 4 дні тому

    Great stuff 😍 when it will support RTL languages?

    • @jfversluis
      @jfversluis 4 дні тому

      Probably a good question for on the repository!

    • @mahmoud19901990
      @mahmoud19901990 4 дні тому

      @@jfversluis Yes i will forward it. another question for you :) Can we control which camera we want to use when using CapturePhotoAsync()?

  • @liemnguyen3088
    @liemnguyen3088 4 дні тому

    I must put video speed at 0.75 to watch your vid.

    • @jfversluis
      @jfversluis 4 дні тому

      That’s what the speed controls are there for! Options for everyone!

  • @rubenribeiro01
    @rubenribeiro01 4 дні тому

    Great video like always, we need and its really productive is the drag and drop controls, that is what i call being productive. Microsoft removed that probably because of s lot of errors it caused, but we’re in 2024, these kinda of tools MUST exist.

  • @anilkumarmootha3738
    @anilkumarmootha3738 4 дні тому

    Its not that simple to query from database if I use SQLite for mobile

  • @randypenajimenez3893
    @randypenajimenez3893 5 днів тому

    I use Blazor and use JS too, is fun to have that power.

    • @jfversluis
      @jfversluis 5 днів тому

      For sure! Having choices and options is good!

  • @paulvanlochem5668
    @paulvanlochem5668 6 днів тому

    Thx again, please make a video about cancelation token :-)

    • @jfversluis
      @jfversluis 6 днів тому

      Thanks Paul! Will finally do 😂

  • @juancamiloramirezvelez5081
    @juancamiloramirezvelez5081 6 днів тому

    Is this control already working in .NET Maui?

    • @jfversluis
      @jfversluis 6 днів тому

      Not sure! Try it out and let me know 😄

  • @ScottLaFoy
    @ScottLaFoy 6 днів тому

    Thank you for your video, it was helpful. I have 2 questions. 1 How can I use face id from the windows iOS simulator? I have been looking for a while and can not find it. 2 Is there a way to tell if the device has fingerprint or face id sensors so I can customize the text on the button? I don't want to ask a fingerprint user to log in with face id.

    • @jfversluis
      @jfversluis 6 днів тому

      Thanks! 1 I don’t think that’s possible so you’ll need to do it on the Mac directly or a physical device. 2 not sure. I dot think you can on iOS there you might need to detect the device and know if it has Face ID or Touch ID

  • @guywangueu9817
    @guywangueu9817 7 днів тому

    Hello I have an error with this package microchart maui System.BadImageFormatException: 'Invalid field token 0x040000a1

  • @kharraz1713
    @kharraz1713 7 днів тому

    Thanks gerald If i want to developing desktop app learn another specific technology for desktop like WPF or just MAUI is enough?

  • @kreatyvny1668
    @kreatyvny1668 7 днів тому

    OMG thank you a lot <3

  • @juancaballero2912
    @juancaballero2912 7 днів тому

    How change navigation bar color ?

    • @jfversluis
      @jfversluis 7 днів тому

      There is now something for that too: learn.microsoft.com/dotnet/communitytoolkit/maui/platform-specific/navigation-bar

  • @wolframliermann2883
    @wolframliermann2883 8 днів тому

    Thanks for all the great stuff. Can you make a video on how to create a MAUI Windows app that is signed with a certificate from a key vault such as azure key vault and where the certificate was automatically updated before it expired?

  • @afouadr
    @afouadr 8 днів тому

    Also include XAML Styler - Visual Studio Extension

    • @jfversluis
      @jfversluis 7 днів тому

      That’s definitely a good extension and addition!

  • @maxchu92
    @maxchu92 8 днів тому

    for Android partial result, android behavior will try to report the current complete sentence unlike iOS. In order to make the partial result to work, we can split the matched string by space, and return only the last string in SpeechRegocnitionListener.SendResults(). This will make both platform behave the same. My method: private void SendResults(Bundle bundle, Action<string> action, bool isPartial = false) { var matches = bundle?.GetStringArrayList(SpeechRecognizer.ResultsRecognition); if (matches == null || matches.Count <= 0) return; if (isPartial) matches = matches.Last().Trim().Split(' '); action?.Invoke(matches.Last().Trim()); } Another problem i had noticed, was the cancel token, the app will only work once after it was cancelled as the CancellationTokensource was not disposed and renewed. We can move the token source into the ListenCommand function, so it construct a new token source everytime it is called, then dispose it when we finish using it.

  • @earthlingthings
    @earthlingthings 8 днів тому

    So, what if I wanted to do this dialogue from a viewmodel class or any other sub class not on the xaml.cs page?

    • @jfversluis
      @jfversluis 8 днів тому

      Wrap it in some kind of service class and maybe use dependency injection

  • @ejdut
    @ejdut 8 днів тому

    Yes, would like a video on pattern matching. All your videos are great!

  • @wadesmith9110
    @wadesmith9110 9 днів тому

    Any plans for .NET MAUI to support HarmonyOS?

  • @christianzaragoza7575
    @christianzaragoza7575 9 днів тому

    Excelente aporte @jfversluis, consulta, hay posibilidad de agregar huellas desde una app windows y se puedan verificar desde una app android? Muchas gracias.

  • @lukehunter1154
    @lukehunter1154 9 днів тому

    Great video! Followed the steps on an Android application, all works perfectly in debug mode but when building the application in Release mode the camera view will not zoom in. Any pointers?

  • @sheiksulaiman9345
    @sheiksulaiman9345 9 днів тому

    Hi foreach observablecollection have 10k records the collection view read data very slow how to solve this

  • @marquardtsnell7916
    @marquardtsnell7916 9 днів тому

    Liked as soon as you said the other video is good for your You Tube stats. Good enough reason for me!

    • @jfversluis
      @jfversluis 9 днів тому

      Haha appreciate that thank you!

  • @queenstownswords
    @queenstownswords 9 днів тому

    Hey @jfversluis, is there any plans/chance to create an option to add a mobile project (MAUI) with Aspire?

    • @jfversluis
      @jfversluis 9 днів тому

      We’re working on that!

  • @pugthegreat9936
    @pugthegreat9936 9 днів тому

    I should use more the Live Visual Tree, never really used it much. Also, life without Hot Reload would be almost impossible. Cheers !

  • @marcelfischer5139
    @marcelfischer5139 9 днів тому

    Incredible help for a counter project like this. In my project this doesn't work so well.

    • @jfversluis
      @jfversluis 9 днів тому

      What doesn’t work for you?

  • @NataliaEriksson
    @NataliaEriksson 9 днів тому

    Hi Gerald! You have asked several times about making video about CancellationTokens. I think this would be appreciated! Cover intro and best practices. With an example would be perfect! For eksample: write search functionality using cancellation tokens and task.run(). In a searchbar while typing, show the search result immediately, search in larger dataset, when typing one letter, and then another, if the output is not ready, cancel search and reserch again with new string. Sounds it good? And keep the channel going! 👍

  • @MrSuxor
    @MrSuxor 10 днів тому

    I appreciate these tools immensely, but I still see a significant need for a XAML preview designer. Sometimes, focusing on the design of a single page or pop-up is crucial. While it's possible to rewrite code to launch directly to that page, it can be frustrating, especially if the page is deep in the navigation hierarchy or only appears under specific conditions, such as error handling. Forcing the app to display such a screen for testing or design purposes can be challenging. Instead of constantly modifying the app to showcase the screen I'm working on, a preview editor would be far more efficient.

    • @jfversluis
      @jfversluis 10 днів тому

      But what would the previewer do? Which flavor of android? Dark mode? Light mode? Tablet? Phone? Watch? The landscape is so much more complex than it ever was. This mirrors what you are looking at on your device with all its nuances. It’s near impossible to create a drag and drop designer that will work great for all the supported platforms

    • @MrSuxor
      @MrSuxor 10 днів тому

      Additionally, my ideal tool would include a single simulator capable of testing multiple screen sizes and operating systems simultaneously. This would allow me to see how my app looks and functions across different devices and platforms in real-time. Currently, launching separate simulators and building packages for each test scenario is incredibly time-consuming. An all-in-one simulator would streamline the design and testing process significantly.

    • @WarBorg
      @WarBorg 9 днів тому

      the Android studio IDE already does this with different previews for all the options you mentioned above when running a kotlin compose app, also xcode does the same for iOS swiftUI apps, but then again they use code to display UI and it's much easier to setup these previews, maybe in the future we could have something like that

  • @rotteneggconcept
    @rotteneggconcept 10 днів тому

    Would like to thank You and James Montemagno for the Best Maui Content, Keep up the Great Content, Please do More MVVM examples, especially on Camera and IO related Examples

    • @jfversluis
      @jfversluis 9 днів тому

      Much appreciated thank you!

  • @jxndwl
    @jxndwl 10 днів тому

    make project Snoop works for MAUI please.

    • @jfversluis
      @jfversluis 10 днів тому

      I’m sorry I don’t know what that is

  • @sheiksulaiman9345
    @sheiksulaiman9345 10 днів тому

    Hi thanks for sharing information

    • @jfversluis
      @jfversluis 10 днів тому

      You’re very welcome!

  • @just-mannn
    @just-mannn 10 днів тому

    Do you plan to integrate OpenGL as it was in Xamarin? And do you plan to add Designer as it was in WinForms and WPF?

    • @jfversluis
      @jfversluis 10 днів тому

      We don’t have plans for that currently

  • @keithsummers1889
    @keithsummers1889 10 днів тому

    Thank you for staying with MAUI -- your audio is greatly improved over last year. You must have upgraded your audio hardware. Excellent move, because I can hear you much better than before.

  • @GUIGOL_DEV
    @GUIGOL_DEV 10 днів тому

    Like the hot reload❤

    • @jfversluis
      @jfversluis 10 днів тому

      Hot reload is amazing!

  • @rikudouensof
    @rikudouensof 10 днів тому

    I already know it exist. Actually since Xamarin era. When it came, left and returned. Actually the one on UWP was way more interactive. To be fair UWP only targeted windows PC, Hololens, Xbox and windows phone

    • @jfversluis
      @jfversluis 10 днів тому

      Haha that’s awesome! You’ve been there for all the iterations! Yeah the cross-platform nature of MAUI definitely makes this tool hard

  • @maxmannstein
    @maxmannstein 10 днів тому

    Love your videos

    • @jfversluis
      @jfversluis 10 днів тому

      Appreciate it Max, thank you!

  • @akshayjain4001
    @akshayjain4001 10 днів тому

    Any of these coming to vs code? Precisely for mac?

    • @jfversluis
      @jfversluis 10 днів тому

      I don’t think that is planned right now but make sure your feedback is known!

  • @mauideveloper
    @mauideveloper 10 днів тому

    we are not getting UI related docs for MAUI :(

    • @jfversluis
      @jfversluis 10 днів тому

      I’m afraid I’m not sure what you mean

    • @jewersp
      @jewersp 10 днів тому

      Do you mean documentation for the IDE with regards to MAUI?

    • @mauideveloper
      @mauideveloper 9 днів тому

      @@jewersp there is no open source UI Plugins for MAUI.

    • @mauideveloper
      @mauideveloper 9 днів тому

      @@jfversluis there is no open source UI Plugins for MAUI

    • @jewersp
      @jewersp 9 днів тому

      @@mauideveloper You need to be more specific. No idea what you're talking about. Plugins for what, the IDE? Or for MAUI app? There are plenty of free UI controls out there, if that's what you mean. However, what does that have to do with docs?

  • @josemanuelgroo
    @josemanuelgroo 12 днів тому

    I am trying to use it in windows but not working, after starting the record and then stop the record it says not recording, any clue about it? I followed all the steps

  • @hankdoout6845
    @hankdoout6845 12 днів тому

    but, the new cameraview seems remove these method, how can I indicate the front camera? thanks

    • @jfversluis
      @jfversluis 12 днів тому

      Select Different Camera and Prevent Memory Leaks with CameraView ua-cam.com/video/JUdfA7nFdWw/v-deo.html

  • @XMasterWoo
    @XMasterWoo 13 днів тому

    If i remember correctly you can also do it by holding middle mouse and selecting multiple lines

  • @khambleyart
    @khambleyart 13 днів тому

    Suh-weet Video! As Usual! Keep 'em coming! :)

    • @jfversluis
      @jfversluis 13 днів тому

      Will do 🫡 thank you!

  • @xopabyteh
    @xopabyteh 13 днів тому

    The captured image doesn't match up with the preview? Could you please help me with that?

    • @jfversluis
      @jfversluis 13 днів тому

      What device are you using? Sounds like some delay?

    • @xopabyteh
      @xopabyteh 13 днів тому

      @@jfversluis Motorola defy. The captured image is larger than the one on the preview. Edit: it happens when the preview resolution aspect ratio doesnt exactly match the screen aspect ration.