Xamarin long text binding causes layout cropping - xamarin

I have a layout in a Xamarin Forms app. It consists of a ScrollView containing a StackLayout and various controls down the page. One of the controls near the top is a label with text bound to a string in the view model. Sometimes this is a very long string and in those cases the content gets cropped halfway down the page.
I've discovered that if I modify the layout while debugging the hot reload causes the view to display correctly.
I've also tried replacing the StackLayout with a grid with Auto sizing rows with the same result.
I have also found that if I set a HeightRequest on the label of something like 8000 and then set to -1 after the binding is updated it sometimes (not always) sizes correctly.
Does anyone have a suggestion on what I can try next?
Layout is essentially:
<ScrollView>
<StackLayout Orientation="Vertical">
<Label Text="Header" />
<Label Text="{Binding PotentiallyLongText}" />
<Label Text="Paragraph of text" />
<Label Text="Another section of text" />
<Label Text="Another section of text" />
<Label Text="Another section of text" />
<Label Text="Another section of text" />
</StackLayout>
</ScrollView>
When the PotentiallyLongText is a very long paragraph with line breaks the content wil end abruptly (often cropped mid-line) further down the page. The ScrollView however does scroll to what would be the correct height.
Here's a screenshot of how it looks when I first load the page:
(The PotentiallyLongText label is the text with the white background)
And if I leave the app and come back or even hot reload via the debugger it looks like this (as it should)
What could cause the layout to cut off initially?

There is a LineBreakMode property of Lable, you could set LineBreakMode="WordWrap" to check.
Have a try with following code to check:
<ScrollView>
<StackLayout Orientation="Vertical">
<Label Text="Header" />
<Label Text="{Binding PotentiallyLongText}" LineBreakMode="WordWrap"/>
<Label Text="Paragraph of text" />
<Label Text="Another section of text" />
<Label Text="Another section of text" />
<Label Text="Another section of text" />
<Label Text="Another section of text" />
</StackLayout>
</ScrollView>

I have seen this bug in Xamarin.Forms 5.0.0.2012 and reported it on GitHub.
I downgraded to Xamarin.Forms 4.8.0.1821 and it worked.

Related

Nativescript Applying androidElevation to a stacklayout

Nativescript docs say androidElevation is a valid property for the stacklayout, but is not displayed when added in my ng project. The same elevation applied to a label works fine. Is there some additional property that needs to be added?
<StackLayout margin="10" androidElevation="12">
<Label text="sample1"></Label>
<Label text="sample2"></Label>
</StackLayout>
androidElevation works only when you set a background color on the view.
<StackLayout margin="10" androidElevation="12" style="background-color: red;">
<Label text="sample1"></Label>
<Label text="sample2"></Label>
</StackLayout>

Why does Xamarin Absolute Layout stacking not respect Children order

I am trying to achieve a layout where the content has an image on background (positioned in bottom left corner, expanding 100% vertically and 60% horizontally)
The whole content is wrapped in an AbsoluteLayout, the main content is then a child to this layout and consists of StackLayout (and some other content inside).
The previewer in Visual Studio (Visual Studio Community 2017) shows the layout correctly - the image is below the content, the content is placed on middle as intended. However, both VS Emulator and Genymotion show the image above the content.
I trimmed the code to be as readable as possible (stripping it of styling)
...
<Frame VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">
<Image Source="Graphic_Anna.png" />
</Frame>
<!-- Start: Actual Page Content -->
<StackLayout VerticalOptions="Center" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="ApplicationLayoutContentLevel">
<Label Text="This is some text in main content" />
</StackLayout>
<!-- End: Actual Page Content -->
</AbsoluteLayout>
</ContentPage.Content>
...
The expected result is shown on this screenshot (from Previewer): https://i.imgur.com/C8GBMSi.png
However, the result in both emulator seems to do this: https://i.imgur.com/NvJFZan.png
Unfortunately, I don't have the option to test the app on an actual Android phone at this moment
Do you want to achieved like the following screenshot?
I do not know which size that you used, so I cutout the picture from your screenshot.
If so, there is my code.If you want to achieve coveraged effect, I used two stacklayout, the first layout will be covered by the second layout.Notice:If you set the VerticalOptions will affect the AbsoluteLayout.LayoutBounds
<ContentPage.Content>
<AbsoluteLayout>
<StackLayout VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">
<Image Source="Graphic_Anna.png" />
</StackLayout>
<!-- Start: Actual Page Content -->
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.8,0.7,0.5,0.5" x:Name="ApplicationLayoutContentLevel">
<Image Source="start.png" Scale="0.7"/>
<Label Text="10/10" TextColor="Black" FontSize="50" Margin="20,10,0,0"/>
<Label Text="Great job! you got everything" TextColor="Black" Margin="0,10,0,0" />
<Label Text="Back to games" TextColor="red" Margin="25,20,0,0" />
</StackLayout>
<!-- End: Actual Page Content -->
</AbsoluteLayout>
</ContentPage.Content>

Nativescript Tabview is not rendered at all but there is no exception/error either

In my HTML file I have this markup: While the ActionBar shows the title , the tabviews in the stacklayout are not visible at all and I get no errors, but I do not understand why??? I am new to nativescript... ;-)
Anyone can see what I do wrong?
<ActionBar title="Working days planner" class="action-bar">
</ActionBar>
<StackLayout class="page">
<TabView id="tabViewContainer">
<TabViewItem title="First Tab">
<StackLayout>
<Label text="Working days" class="action-label m-15"></Label>
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
</ng-template>
</ListView>
</StackLayout>
</TabViewItem>
<TabViewItem title="Second Tab">
<StackLayout>
<Label text="Second Tab" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
</StackLayout>
</TabViewItem>
</TabView>
</StackLayout>
The StackLayout code in the first TabViewItem does work when its put under the ActionBar, but the TabView component somehow screws everything.
I haven't seen that syntax with the TabViewItem element. Try starting from a simpler example from the documentation page:
NativeScript TabView for Angular
Once you get a basic example working take incremental steps to change the content over to yours. Also, this is a basic feature so you can set up a Playground example and share that if you have specific problems.
Try removing the StackLayout above, you really don't need it.

Is there a way that I can have a word inside a label appear in a bold font?

I have this Xaml:
<StackLayout Spacing="0" Margin="20">
<Label Text="I would like the word" />
<Label Text="HERE" />
<Label Text="to be in a bold font and red color" />
</StackLayout>
That gives this:
I would like the word
HERE
to be in a bold font
Is there some way I can combine these labels so that the word HERE appears in bold and red color and all words appear on one line? What I am looking for is this:
I would like the word HERE to be in a bold font
Note that I'm using Xamarin.Forms but I also tagged Xamarin.iOS as I would like to know if this is possible using a renderer and wonder if it can be done in iOS?
Use FormattedText
<Label.FormattedText>
<FormattedString>
<Span Text="I would like the word " />
<Span Text="HERE" ForegroundColor="Red" FontAttributes="Bold" />
<Span Text="to be in a bold font" />
</FormattedString>
</Label.FormattedText>
If you're using Xamarin Forms you can use the FontAttributes style attribute.
<StackLayout Spacing="0" Margin="20">
<Label Text="I would like the word" />
<Label Text="HERE" />
<Label Text="to be in a bold font and red color"
FontAttributes="Bold" />
</StackLayout>

Center Icon and Text in a button Xamarin XAML

I don't how to center the icon inside the button and get it above the text, I didn't find information also about it, I'm asked to do a kind of "tabb" option menu, but below the screen, and I found that it was kind of "hard" because of the "design implications"etc, so I decided that with buttons would be easier, but the problem now is how to center the image and get the text right, If some one could help me, that would be great. This is my code so far:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="Silver"
x:Class="XamForm.View.MainPage">
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
<StackLayout Padding="30">
<Label x:Name="lblCuantos" Text="No #" TextColor="Gray" FontSize="20"/>
<Label x:Name="lblNombre" Text="" FontSize="20"/>
<Button x:Name="btn1" Text="Oprimir" Clicked="Accion"/>
<Button x:Name="btn2" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" Text="Gridd" TextColor="Gray" Clicked="Accion2"/>
<Button x:Name="btn3" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" TextColor="Gray" Clicked="Accion2"/>
</StackLayout>
</ContentPage>
This is the actual result of the button itself:
http://oi59.tinypic.com/11so9le.jpg
This is what the final result of the menu should look like kind off
http://oi62.tinypic.com/10pzw2f.jpg
Thank you!
You can use ContentLayout="Top,0" in button. For Example in your case use below code
<Button x:Name="btn2" ContentLayout="Top,0" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" Text="Gridd" TextColor="Gray" Clicked="Accion2" />
<Button x:Name="btn3" ContentLayout="Top,0" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" TextColor="Gray" Clicked="Accion2"/>
You could use a StackLayout with Orientation set to Vertical, and in it add Button and Label.
The Button.Image property is of type FileImageSource so any image that is 'local' can be used in a button. This means the following code will work:
someButton.Image = "imageName.png";
or you can write
someButton.Image = ImageSource.FromFile("imageName.png");
if imageName.png is located in each of the application projects (Resources folder in iOS, Resources/Drawable folder in Android, and application root in WinPhone; each with the appropriate build action set).
The Xaml equivalent is:
<Button Text="Has Image" Image="someImage.png" />
See the Working with Images doc for full details of what the build action should be for each platform.

Resources