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>
Related
Good day fellow code ninjas!!!
Using a '< TabbedPage/ >' in Xamarin forms I can easily create a tab bar at the top of my page. I would however like to have two tab bars instead of one. For example, 3 tab buttons in the first tab bar row and another 3 in the second row and the user being able to navigate between all 6 pages.
Does anyone perhaps know if this is possible in Xamarin forms and/or if there is any documentation that might assist.
You could use the TabView from the Xamarin Community Toolkit in addition to your TabbedPage 😉. Here's how it works:
<Grid>
<xct:TabView>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
If you put a TabView in each of your TabBar contents you will be able to get the result you want.
In your case, it would be something like this:
<ContentPage Title="Tab 1">
<xct:TabView>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</ContentPage>
<ContentPage Title="Tab 2">
<xct:TabView>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</ContentPage>
If you want to see more about TabViews, there is a great article posted by Gerald Versluis, that explains it perfectly: https://devblogs.microsoft.com/xamarin/xamarin-community-toolkit-tabview/
Give it a try with James Montemagno youtube channel
EDIT
here is the official github link for the library used by that video
https://github.com/roubachof/Sharpnado.Tabs
I've got a facebook like activity feed, and I'm using a repeater because I want to have multiple clickable items within each "activity", ie, clicking on the top portion goes to the users profile, vs. the body of the activity opens the activity, plus some links for comments, likes below that.
<ScrollView orientation="vertical">
<Repeater items="{{ activities }}">
<Repeater.itemsLayout>
<StackLayout orientation="vertical" />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<StackLayout tap="goProfile" >
<Image src="{{image}}" height="35" verticalAlignment="top" />
<Label text="{{user_name}}" />
</StackLayout>
<StackLayout tap="goActivity">
...
</StackLayout>
<StackLayout orientation="horizontal">
<Image tap="addComment" src="{{comment}}" />
<Image tap="addLike" src="{{like}}" />
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
This is basically working fine, except tapping on any of the tappable items does not give any visual feedback, ie. briefly turning the background of the item grey, like it does with a ListView....
I can't figure out how to get this behavior on clickable layouts within my repeater? is this possible? is there another approach I should be following?
I have a listview in Xamarin Forms and I have a requirement to maintain aspect ratio but also this:
When an image is taller than it is wide, show the image flush to the left and right with no margins, have the height be auto
When an image is wider than it is tall, the requirement is the same, but this works. In the screenshot it shows how images currently render when they're taller than wide. Changing the aspect property breaks the condition when it is wider than tall. When I copy this template into a blank page, the image displays fine. I think the issue is being able to set the height of each row in the listview to auto. It may not be the issue though. I'm using a SyncFusion listview for Xamarin
Here is the code for the item template of the listview:
<DataTemplate>
<ViewCell>
<StackLayout Margin="0,10,0,10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<!-- Card Header -->
<!-- Truncated for brevity -->
</Grid>
<StackLayout Grid.Row="1">
<!-- Card title -->
<!-- Truncated for brevity -->
</StackLayout>
<!-- Card Body -->
<StackLayout BindingContextChanged="PostImageStackLayout_BindingContextChanged">
<Grid Grid.Row="2" x:Name="postImageStackLayout" Margin="0,15,0,10">
<!-- Card article image -->
<ffimageloading:CachedImage Grid.Row="0" x:Name="postImage" CacheDuration="1" HeightRequest="300"
Source="{Binding MainIMageURL}" BindingContextChanged="PostImage_BindingContextChanged"
VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
Margin="0,10,0,10" FadeAnimationEnabled="True" Aspect="AspectFit" >
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="PostImageTapped" CommandParameter="{Binding }"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
</Grid>
</StackLayout>
<!--Likes and comment count-->
<!-- Truncated for brevity -->
Don't put fix height on Grid Row where it have the image element. You can use the "auto" value.
<RowDefinition Height="auto"/>
and change the Aspect to
AspectFill
I use the collectionview from the latest Xamarin.Forms 4.3. Here is my sample code
xaml
<ContentView.Content>
<StackLayout>
<CollectionView x:Name="ImagesCollectionView">
<CollectionView.ItemsLayout>
<ListItemsLayout ItemSpacing="20">
<x:Arguments>
<ItemsLayoutOrientation>Vertical</ItemsLayoutOrientation>
</x:Arguments>
</ListItemsLayout>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<ffimageloading:CachedImage
HorizontalOptions="FillAndExpand"
Source="{Binding .}"
Aspect="AspectFill"
LoadingPlaceholder="noimg.png"/>
<Label Text="label"
TextColor="Gray"
Opacity="0.8"
Margin="12,0,0,0"
HorizontalOptions="Start"
FontSize="Small"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentView.Content>
c#
public MySecondView()
{
InitializeComponent();
ImagesCollectionView.ItemsSource = new List<string>()
{
"http://insidetema.com/wp-content/uploads/2018/05/170717100550_1_900x600.jpg"
,"https://informationng.com/wp-content/uploads/2014/03/bigstock_Happy_Business_People_With_Han_4049346.jpg"
,"http://www.blt.co.uk/wp-content/uploads/2018/03/Happy-Places.jpg"
};
}
Output
You can set the HeightRequest and WidthRequest of your image to -1 (then it'll fit all the space available)
I'm trying to add a progress bar in Xamarin Forms within my XAML. But the default progress bar gives me only one type of colour without labels on both ends and the 2 circled points on both ends as shown in the image below:
Further, I am unable to add the progress bar inside the frame. My code is as follows:
<StackLayout Orientation="Vertical" Margin="5">
<Frame Padding="10"
BackgroundColor="White"
HeightRequest="80">
<Frame.Content>
<Label Text="%" HorizontalTextAlignment="End" FontSize="Small"/>
<ProgressBar x:Name="myProgressBar" WidthRequest="100"
HeightRequest="15" VerticalOptions="Center" HorizontalOptions="Center" Progress="0.2"/>
</Frame.Content>
</Frame>
</StackLayout>
Can someone please help me to achieve this as in the image ?
A frame can only hold one element as content.
You can solve that by putting a layout such as a Grid or a StackLayout into the content property of your frame.
<Frame.Content>
<StackLayout Orientation="Vertical">
<Label Text="%" HorizontalTextAlignment="End" FontSize="Small"/>
<ProgressBar x:Name="myProgressBar" WidthRequest="100"
HeightRequest="15" VerticalOptions="Center" HorizontalOptions="Center" Progress="0.2"/>
</StackLayout>
</Frame.Content>
Regarding your progress bar, you will have to implement a custom renderer, which will fill the progress bar with a gradient instead of a simple fill color.
I am playing with Xamarin Forms and I would like to add a Button programmatically. Nothing easier, but I've noted that the results vary greatly if the button has an Image rather than a Text.
Now I have this XAML that defines a three-layered screen (header, content, footer):
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Testing"
x:Class="Testing.MainPage"
Title="MainPage"
NavigationPage.HasNavigationBar="False">
<ContentPage.Content>
<!-- Content -->
<StackLayout x:Name="contentpage" Padding="10,100,10,100">
<!-- Header -->
<StackLayout x:Name="header" Orientation="Horizontal" VerticalOptions="StartAndExpand">
<Button Text="ABCD" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
<Button Text="EFGH" VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand"/>
</StackLayout>
<!-- /Header -->
<!-- Center -->
<StackLayout x:Name="content" Opacity="1" Orientation="Vertical" VerticalOptions="Start" >
<Button x:Name="test" Text="Fire fire fire" HorizontalOptions="CenterAndExpand" VerticalOptions="Start" />
</StackLayout>
<!-- /Center -->
<!-- Bottom -->
<StackLayout x:Name="buttons" Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Button Text="1" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="2" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="3" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="4" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="5" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
</StackLayout>
<!-- /Bottom -->
</StackLayout> <!-- Content -->
</ContentPage.Content>
</ContentPage>
And in the corresponding C# source I add a button to the content:
var custombutton = new Button();
custombutton.HorizontalOptions = LayoutOptions.CenterAndExpand;
custombutton.VerticalOptions = LayoutOptions.Start;
custombutton.Image = "mountain.jpg";
//custombutton.Text = "hello";
content.Children.Add(
custombutton
);
As you can see, I want to change the button's properties by setting an image, but the layout changes dramatically.
As you can see, if I add the button with a text everything's ok (left), but as I change the button's image, the button seems to not obey its vertical options (right), or it adds some weird padding. Of course I would like just to add buttons with texts or images without losing the footer StackLayout, but I don't know what's happening here.
Am I missing something here?
Sizes Update
As suggested, I've tried different layouts, however, I ended up with the same results. This last test is with a Grid, and inside a ScrollView with a StackLayout. Different views and arrangements won't change anything in my project.
What matters is the image size as you can see:
Image sizes here are 1668 × 796 and 355 × 190 pixels.
A fully functional source is here available for download: link to the solution.
Controls Update
Using an Image works flawlessly, regardless of the image size. No clue on why a Button adds such a huge space dependent on the image.