Forms9Patch: Simplify multi-device image management in your PCL Xamarin.Forms mobile apps

13»

Posts

  • renzskarenzska USMember ✭✭

    I've attached the labeltest project.

    To be specific, I am using Visual Studio for Mac Preview 9 (7.0 build 2943). I also tested on Xamarin Studio 6.3 (build 864) with the same issue.

    So the two issues are:

    On 0.10.2.9 version of Forms9Patch, I'm getting the following error in the FormsPreviewer for Android:
    
    "Specified cast is not valid" Forms9Patch.Droid.LabelRenderer.OnElementChanged, line: 0
    
    On iOS and Android the labels are autofitting as I would expect. It is a possibility that it is my XAML causing the issues, but I'm unsure (this is with more testing). I was originally having iOS size correctly, but Android not resizing at all (which still may be the case in some scenarios.
    

    In my sample,

    I have modified it slightly so the bottom row of "buttons" tries Fit="None" and Fit="Width" insteand of Fit="Lines". You should be able to see this in the xaml. My goal is to have the labels autosize to the size of the grid as the device size gets larger, or shrink if it is smaller, and never have the text cutoff or go onto multiple lines. If you have any questions, let me know.

    Thanks for looking into this.

  • renzskarenzska USMember ✭✭

    Looks like they just released Preview 10 of Visual Studio for Mac. I'll be updating to see if that changes anything.

  • BuildCalcBuildCalc USMember ✭✭✭

    @renzska --

    I've just submitted 0.10.2.10 with a work around for what appears to be a bug with XAML Previewer. After you update your Forms9Patch nuget package in your projects, you will need to restart Xamarin.Studio / VisualStudio.Mac and recompile your Android projects to take advantage of the updates.

    -- Ben

  • BuildCalcBuildCalc USMember ✭✭✭

    @renzska --

    Once you have verified that the XAML Previewer is working, the next question is how to accomplish your layout goals. The text in the sample app you've provided is wider than 1 line when on a phone in portrait orientation. As such, you can either:

    • unconstrain its height and set its Fit to LabelFit.None and its Lines=0
    • use LabelFit.Width and set the lines to something that will be adequate to contain your text
    • use LabelFit.Lines and set the font size to be small enough to contain our text

    I would highly recommend that you take a look at the Pages/LabelFitPage.cs and Pages/UnconstrainedLabelFitPage.cs examples in the demo app. Running the demo app and using these pages (Code/LabelFit and Code/Unimposed Height Label Fit) is a good way to determine what Fit, Lines, Alignments, and Truncation Modes you want to use in your application.

    -- Ben

  • renzskarenzska USMember ✭✭

    @BuildCalc, the latest version fixed the Android Xamarin Forms Previewer. Thanks for that!

    On the sizing, my main goal is to have the text autofill the width and then go as tall as they can with the space given them. In this case, the label stretches to fill the grid row height and width. What settings would I need to have this happen?

    What's the outcome of each of the bullet points you mentioned above?

    Thanks again for your help!

    John

  • BuildCalcBuildCalc USMember ✭✭✭

    @renzska --

    Assuming that you're putting each Label in a Frame and that Frame is in a cell of a Grid, I would start with the following settings:

    • HorizontalLayout = LayoutOptions.Fill
    • VeritcalLayout = LayoutOptions.Fill
    • Fit = Width
    • HorizontalTextAlignment = TextAlignment.Center
    • VerticalTextAlignment = TextAlignment.Center

    And you will want to set Lines, FontSize, MinFontSize, and LineBreakMode as a matter of taste. What I mean is, if your text is short and the FontSize is huge, it will fill the entire Frame with a large font text no matter the number of lines. The FontSize property sets the upper limit of the FontSize so you can use it to assure the text doesn't get too big. As the text gets longer and longer, it will first shrink the actual font size to fill the number of lines set by the Lines property and then continue to shrink to stay within the Frame and number of lines. This keeps happening until it gets to the size set by MinFontSize. Once it gets there, it will truncate the text by LineBreakMode setting.

  • BuildCalcBuildCalc USMember ✭✭✭
    edited May 5

    @renzska -- I forgot to mention that I think the LabelFitPage in the demo app might be a great example of what you're seeking. Try the setting I mentioned above on that page and then shorten/lengthen the text and change the orientation to see how it responds.

  • renzskarenzska USMember ✭✭

    @BuildCalc, thanks for the help and the great library!

  • renzskarenzska USMember ✭✭
    edited June 26

    @BuildCalc, Over the course of some changes to my mainpage which uses the autosizing label (and works very well, I might add), I've run into an issue where on Android devices, the labels render, but then disappear slightly after rendering. This occurs to random labels and at random times. I am using the Pixel 23 default Android emulator (it also occurs on my physical device (Samsung Galaxy S4). I believe it might be caused by the complexity of my XAML, because when I remove two header images, the issue does not repeat itself, however, I was hoping you could look into it and determine if there was something you could do within Forms9Patch to resolve the issue, even with the complex XAML form (or provide tips in changing my XAML to achieve the same result).

    I have purchased a license for the control. I have put a sample application project together that I'd like to send you for debugging purposes. I have sent it to the email address on your site with the subject "Forms9Patch: Renzska Forums Issue. If you could let me know if you received it and work through the issue via email (or here if preferred) it would be greatly appreciated as my deadline is coming very soon.

    Thanks,

    John

  • BuildCalcBuildCalc USMember ✭✭✭

    @renzska --

    I got your email. I'll be able to take a look at your layout in the morning. In the meantime, I wanted to say thanks for letting me know that you were able to work around the issue by using a Grid layout instead. For those reading this thread, I can't say enough about how much more efficient a Grid layout is than a nested StackLayout.

    -- Ben

  • BuildCalcBuildCalc USMember ✭✭✭

    Version 0.10.3.0 Now Available

    The primary change in 0.10.3.0 is an improvement to how the ImageButton, MaterialButton and MaterialSegmentedControl aligns text and icons. The changes are meant to give more control on how they are positioned and aligned. Changes include:

    • The Alignment property has been obsoleted in favor of the HorizontalTextAlignment and VeriticalTextAlignment properties.
    • ImageButton now responds to the Orientation property just as MaterialButton does.
    • MaterialSegmentedControl now has the IntraSegmentSpacing and IntraSegmentOrientation properties which mirror the behavior of the Spacing and Orientation properties of MaterialButton and ImageButton.

    Below are some gifs to illustrate these changes in action:

    MaterialButton and MaterialSegmentedController alignment and spacing

    ImageButton alignment and spacing

  • BuildCalcBuildCalc USMember ✭✭✭
    edited July 5

    I recently saw a question on StackOverflow asking how to have a Label in Xamarin.Forms with a phone number and email link. In case you're interested, here is an example of how easy this is with Forms9Patch.

    using System;
    using Xamarin.Forms;
    namespace Forms9PatchDemo
    {
        public class LabelLink : ContentPage
        {
            public LabelLink()
            {
                var label = new Forms9Patch.Label
                {
                    HtmlText = "Contact us on <a id=\"phone\" href=\"tel:+353015546889\">015546889</a> or <a id=\"email\" href=\"mailto:email@hotmail.com\">email@hotmail.com</a>"
                };
                label.ActionTagTapped += (object sender, Forms9Patch.ActionTagEventArgs e) =>
                {
                    var id = e.Id;
                    var href = e.Href;
                    var uri = new Uri(e.Href);
                    Device.OpenUri(uri);
                };
                Content = new StackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    Children = {
                        new Label { Text = "Forms9Patch.Label.HtmlText <a> example" },
                        new BoxView { BackgroundColor = Color.Black, HeightRequest = 1 },
                        label
                    }
                };
            }
        }
    }
    

    Note that his example doesn't work on the iOS emulators because they don't support the tel: and mailto: schemas.

    I also have heard that this is going to be even easier with Xamarin.Forms 2.3.5 because its XAML will support the <CDATA> tag.

  • Hiran.3540Hiran.3540 USMember

    @BuildCalc
    Hi Ben,
    How to setup Forms9Patch with Prism ?

    Means, How can I set MainPage = Forms9Patch.RootPage.Create(new NavigationPage(new PopoverPage())); with Prism navigation ?

  • BuildCalcBuildCalc USMember ✭✭✭
    edited July 6

    @Hiran_Peiris

    What little I know about Prism makes me not sure how you would go about doing this but I have a guess that just might work. Assuming you setup the Prism Bootstrapper as follows ...

    public class App : Application
    {
         public App()
         {
             Bootstrapper bs = new Bootstrapper();
             bs.Run(this);
         }
    }
    

    You would insert Forms9Patch's RootPage into the page hierarchy as follows:

    public class App : Application
    {
         public App()
         {
             Bootstrapper bs = new Bootstrapper();
             bs.Run(this);
             var prismMainPage = MainPage;
             MainPage = Forms9Patch.RootPage.Create(prismMainPage);
         }
    }
    

    I cannot guarantee that this will work as I do not know if prismMainPage is expecting an Application instance as a Parent. But, since it would be easy to try, give it a shot and let me know if it works.

  • BrianLagunasBrianLagunas USInsider ✭✭✭
    edited July 6

    @BuildCalc @Hiran_Peiris Prism doesn't have a bootstrapper anymore. In the OnInitialize, you can just set the MainPage manually and not use the NavigationService.

  • BuildCalcBuildCalc USMember ✭✭✭

    @BrianLagunas

    Thanks for the expert advice!

  • jhoemarjhoemar PHMember

    Hi,

    I run into this problem when building for IOS

    Error MT2002: Failed to resolve 'System.Reflection.Emit.DynamicILInfo' reference from mscorlib, Version=2.0.0.0
    I am using package version 0.10.3.0

    I think it is related to Forms9Patch library because it builds perfectly without it.
    Thank you for any help.

  • BuildCalcBuildCalc USMember ✭✭✭
    edited July 7

    @jhoemar

    Two things I might ask:

    1. Do you have the same issue with the Forms9Patch demo app?
    2. Can you PM me your Xamarin/VisualStudio system details?

    Also, you've probably already seen this post but I thought I might mention it anyway.

  • renzskarenzska USMember ✭✭
    edited July 10

    @BuildCalc,

    I've run into an issue where the Forms9Patch label resizing does not work correctly on the Samsung Galaxy S8 and other devices that have the new aspect ratios (18:9 and 18.5:9).

    Here for some details on the aspect ratios:

    https://stackoverflow.com/questions/43151092/setting-up-the-android-emulator-with-a-larger-screen-aspect-ratio

    I've tried setting ResizeableActivity=False and that works, but the user gets a “Tap here to fill entire screen” button in the empty space which then overrides my ResizeableActivity setting when tapped and is stored permanently.

    I haven't been able to get an emulator to emulate the aspect ratio correctly.

    I'll send you the screenshots of the non-resized text version from the S8 before they tap the "fill the entire screen" and after they tap it.

    Any help would be appreciated. Thanks!

  • BuildCalcBuildCalc USMember ✭✭✭

    @renzska - Just following up on the email I sent you on the 10th. Would you be able to send me the latest layout file for what you're seeing?

  • IlyaSemenchenkoIlyaSemenchenko USMember

    Hi @BuildCalc. First of all, your component is amazing. I`m going to use BubblePopup in my project, but I faced a bug.
    When I use MasterDetailPage and FormsAppCompatActivity, my detail page has top padding.

    Pages structure:
    public App()
    {
    InitializeComponent();

                MainPage = new RootPage(new MasterDetailPage { Master = new ContentPage { Title = "Test" }, Detail = new BubblePopupTestPage()})
                {
                    BackgroundColor = Color.Brown
                };
            }
    

    There is no problem with FormsApplicationActivity.

  • CarlBartonCarlBarton USInsider, University, Developer Group Leader ✭✭

    @BuildCalc I think the FAQ on the web site needs to be updated for the license key settings to reflect the Intialize() as Settings.LicenseKey is read-only

  • BuildCalcBuildCalc USMember ✭✭✭

    @IlyaSemenchenko

    First, let me say THANK YOU for sending me a demo project that allowed me to quickly replicate this issue. I cannot say how much difference that makes between being able to understand an issue and just making some educated guesses (and wasting everyone's time).

    The root of this issue is a bug with Xamarin.Forms MasterDetailView that has yet to be fixed. To work around it, I would suggest making the following change to your MainActivity.cs file (in your Android project):

    using Android.App;
    using Android.Content.PM;
    using Android.Views;
    using Android.OS;
    using Xamarin.Forms.Platform.Android;
    
    namespace Forms9PatchDemo.Droid
    {
        // COMMENT OUT THESE TWO LINES ...
        //[Activity(Label = "App1", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
        //public class MainActivity : FormsAppCompatActivity
    
        // ... AND REPLACE WITH THESE TWO LINES.
        [Activity(Label = "App1", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
        public class MainActivity : FormsApplicationActivity
        {
            protected override void OnCreate(Bundle bundle)
            {
            // ADD THIS LINE
                Window.RequestFeature(WindowFeatures.ActionBar);
    
                base.OnCreate(bundle);
    
                global::Xamarin.Forms.Forms.Init(this, bundle);
                Forms9Patch.Droid.Settings.Initialize("NZPK-RMP4-PJVV-Z7LP-78JF-GNXB-CDJZ-SRYA-BLR2-WBZC-G64K-QJZW-65DB");
                LoadApplication(new App());
    
            // AND ADD THESE THREE LINES
                ActionBar.Hide();
                ActionBar.SetDisplayShowHomeEnabled(false);
                ActionBar.SetHomeButtonEnabled(false);
            }
        }
    }
    

    This is not a perfect solution but should get you up and going quickly. I would also suggest going to the Bugzilla link I gave above and adding your feedback as to why this bug needs attention.

  • BuildCalcBuildCalc USMember ✭✭✭

    @CarlBarton --

    Thanks for letting me know about this. I've updated the web site accordingly.

    -- Ben

  • renzskarenzska USMember ✭✭
    edited July 17

    @BuildCalc,

    I've sent you a sample.

    Thanks again for your help.

    • John
  • MarcinDruzgalaMarcinDruzgala USUniversity

    Hi Ben,

    We are using your library in our forms project (greta job btw, I'm loving your package ;) ) and we have one problem.

    We are creating ModalPopup with a pretty simple form layout (SS attached) with 3 entry fields, the problem is that when we provide a long text inside any of these entries application crashes - stack trace in stack_trace.txt file. Any help would be appreciated.

  • BuildCalcBuildCalc USMember ✭✭✭

    @MarcinDruzgala --

    First, let me apologize for taking so long to reply. I've been out on vacation for over a week and just now getting back to the internet.

    I've taken a look at the stack trace and have a lot of questions but no answers. Can you send me a small sample solution that demonstrates the issue you see? It is the only chance I'll have to replicate the issue - and therefore turn around a fix for you.

    Looking forward to finding the root cause of this issue.

    -- Ben

  • @BuildCalc
    Hi Ben. Thank you again for your great component.
    I have an issue on android with Bubble popup after updating Xamarin.Forms from 2.3.4.231 to 2.4.0.282.
    I attached test project and gif with the issue. Thank you!

  • BuildCalcBuildCalc USMember ✭✭✭

    @IlyaSemenchenko - I should be able to take a look later this weekend.

  • BuildCalcBuildCalc USMember ✭✭✭

    @IlyaSemenchenko -

    I've found the root cause. For the curious, it was caused by a change by Xamarin to how Xamarin.Forms.Platform.Android.MotionEventHelper.cs (line 24) deals with events that have been claimed by a motion event listener. Works great for them but it left external motion listeners out in the cold.

    I'm on the road for the rest of the week. It will take some time to run the fix through the merge - build - test process. Can you wait until mid-next week for a patch?

  • BuildCalcBuildCalc USMember ✭✭✭

    Announcing UWP pre-alpha support in Forms9Patch version 0.9.3.5

    The following Forms9Patch elements are "pre-alpha" for UWP, meaning they mostly work but are not complete:

    • ImageSource
    • Image
    • ImageButton
    • ImageButtonState
    • MaterialButton
    • MaterialSegmentedControl
    • Segment
    • RootPage
    • ActivityIndicatorPopup
    • ModalPopup
    • PermissionPopup
    • Toast
    • AbsoluteLayout
    • BubbleLayout
    • ContentView
    • Frame
    • Grid
    • ManualLayout
    • RelativeLayout
    • StackLayout
    • Display
    • ApplicationInfoService

    Correspondingly, the following are not working:

    • custom fonts
    • Label
    • HtmlText property
    • Image.TintColor
    • ColorGradientBox
    • BubblePopup
    • TargetedToast
    • the Xamarin.Forms.WebView extensions
    • the ToPng() string extension
    • KeyboardService
    • KeyClicksService
    • StatusBarService

    Steps to integrate Forms9Patch into a Xamarin.Forms UWP app

    1. Follow the following steps to create the UWP project for your Xamarin.Forms app: https://developer.xamarin.com/guides/xamarin-forms/platform-features/windows/installation/universal/
    2. Add Forms9Patch nuget package (version >= 0.10.3.5)
    3. In the UWP project's App.Xaml.cs file, replace the Xamarin.Forms.Init(e); line (you added earlier in Step 1) with the following lines:

              var assembliesToInclude = Forms9Patch.UWP.Settings.AssembliesToInclude;
              Xamarin.Forms.Forms.Init(e, assembliesToInclude); 
              Forms9Patch.UWP.Settings.Initialize(this, _put_the_Forms9Patch_license_key_for_this_app_here_ );
      
    4. Set the UWP apps display name:

      1. Open the UWP project's app manifest (double click on the Package.appxmanifest file in the UWP project).
      2. In the [Application] section, set the "Display Name:" to the name associated with your Forms9Patch license key.
      3. In the [Packaging] section, set the "Package display name:" to the name associated with your Forms9Patch license key.
    5. Enable XAML Compilation: In every project that has XAML to display, add the following line to the project's Properties/AssemblyInfo.cs file. Note: Don't make the same rookie mistake I did and put the following line in the UWP project's (instead of the PCL project's) AssemblyInfo.cs file.

              [assembly: Xamarin.Forms.Xaml.XamlCompilation(Xamarin.Forms.Xaml.XamlCompilationOptions.Compile)]
      
  • Kyle_JohnKyle_John USMember

    @BuildCalc Is it support .NET Standard?

13»
Sign In or Register to comment.