I use the below code to show image on a from.
<ContentPage>
<ContentPage.Content>
<Grid>
// Row definitions here
// Column definitions here
<Image
Grid.Column="0"
Grid.Row="0"
x:Name="myStoryPage"
Grid.ColumnSpan="3">
</Image>
<!-- Next, previous buttons here -->
<skiaforms:SKCanvasView x:Name="canvasView"
PaintSurface="canvasView_PaintSurface"
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="3"
AbsoluteLayout.LayoutBounds="10, 0, 5, 65"/>
</Grid>
</ContentPage.Content>
</ContentPage>
Now I need to highlight an area in the image using SkiaSharp.
I could do drawing a line under the grid using the SKCanvasView. But I want to draw over the image.
I thought to use use AbsoluteLayout but as my page is a ContentPage, I could not use the AbsoluteLayout outside of the content.
If I could use AbsoluteLayout, I can dynamically position it using C# in code behind.
Related
I getting a conception problem to display correctly the page. I want to have on the bottom of the page a button. I used to do it, AbsoluteLayout.
For some of the screens that are small, all the information doesn't appear so I had to activate the ScrollView.
But the ScrollView doesn't make the job as I would like, a part of the information is still "eaten" by the bottom button. (See the image)
There is the code :
<ContentPage.Content>
<AbsoluteLayout>
<ScrollView AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
AbsoluteLayout.LayoutFlags="All">
<StackLayout>
**** Some code *****
</StackLayout>
</ScrollView>
<Button AbsoluteLayout.LayoutBounds="0, 1, 1, 40"
AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional"
... some more code .../>
</AbsoluteLayout>
</ContentPage.Content>
I think the way I want to make it is not correct. what can I do to make it display correctly?
Just as Steve said, using Grid is better than AbsoluteLayout. I made a demo and it works well.
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<ScrollView Grid.Row="0" >
<StackLayout>
<Label></Label>
</StackLayout>
</ScrollView>
<Button Grid.Row="1" />
</Grid>
I have a control in Xamarin Forms where I have a bunch of labels that are visible or invisible based on a few factors.
I want the layout I'm calling the control from to wrap the height based on the labels that are visible. So if the labels are 100dp tall for example (I don't actually know how tall they are) and there are 3 visible, I want the height of the control/layout to be 300dp. Right now the layout is just stretching out to what it would look like if all the labels were visible.
This is my control:
<controls:cardDetail>
<Label Text="hi1" IsVisible="{Binding maybe1}">
<Label Text="hi2" IsVisible="{Binding maybe2}">
<Label Text="hi3" IsVisible="{Binding maybe3}">
<Label Text="hi4" IsVisible="{Binding maybe4}">
<Label Text="hi5" IsVisible="{Binding maybe5}">
<Label Text="hi6" IsVisible="{Binding maybe6}">
</controls:cardDetail>
I call this control from a carousel view inside a stacklayout in another xaml page:
<StackLayout orientation="Horizontal">
<CarouselView x:Name="carView">
<controls:cardDetail/>
</CarouselView>
</StackLayout>
What do I have to do to which page/layout to make this happen? Do I need to use C# or can I just add an attribute in xaml??
Thanks!
I am creating a rounded menu with Xamarin Forms as Below.
The accent color is my Grid. Then I translatex and trnaslatey the buttons.
My issue is that the click button is not raised. I have also tried on the gesture recognizer of my stack panel. Same result.
The part of the code is below:
<Grid BackgroundColor="Accent" Margin="0,0,0,10" VerticalOptions="End" HorizontalOptions="Center">
<StackLayout x:Name="cat" TranslationX="-109" TranslationY="-102"
>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="catBtn_Clicked"/>
</StackLayout.GestureRecognizers>
<Button Clicked="catBtn_Clicked" WidthRequest="60"
HeightRequest="60"
FontSize="35"
CornerRadius="30" HorizontalOptions="Center"
BackgroundColor="{StaticResource RedColor}"
TextColor="White"
Text="{ x:Static local:GrialIconsFont.Calendar }"
FontFamily="{ StaticResource IconsFontFamily }">
</Button>
<Label Text="{extensions:Translate Hello}" HorizontalOptions="Center"/>
</StackLayout>
Make sure that your button is placed inside superView's bounds,
If a button is placed outside superView's bounds, the button will not clickable.
You use TranslationX="-109" and TranslationY="-102" will make the button out of the bounds of StackLayout, so it won't response to the click event. You can add backgroundColor to stacklayout to see its bounds.
I would suggest you to add those buttons or labels directly to Grid and use absolute-layout, relative-layout or other layout to fix their positions.
There are also some examples in Github you can refer, such as CircleButtonMenu, Xamarin.Forms-RadialMenu
I want to create a notification icon and showing all unread message as count, How to achieve this. This tool is best for this.
I'm sharing the one I build.
It's picture with a badge on top of it with Xamaring controls only.
Just fine tune the Height and Width of the "badge" on the Frame and the content on the Label.
Position the X-Axis of the badge with the ConstraintExpression: "Constant=14"
<RelativeLayout>
<Image Source="picture.png" WidthRequest="28" HeightRequest="28" />
<Frame BackgroundColor="#FF0000" OutlineColor="White"
RelativeLayout.HeightConstraint="22"
RelativeLayout.WidthConstraint="22"
CornerRadius="11"
HorizontalOptions="Center"
Padding="0"
IsClippedToBounds="True"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=14}"
RelativeLayout.YConstraint="-6">
<StackLayout WidthRequest="22">
<Label Padding="2" Text="+5" RelativeLayout.WidthConstraint="22" TextColor="White" FontSize="12" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Frame>
</RelativeLayout>
Picture of the above code on my app (the "+5" badge):
First, you need to have a BadgeView, to represent the notification counter.
In order to achieve this, you can use the BadgeView NuGet Package
After adding to your solution, you can add in XAML a badge indicator:
<badge:BadgeView Text="{Binding BadgeNumber}" BadgeColor="{Binding BadgeColor}" VerticalOptions="Center" HorizontalOptions="End" />
The next step, is putting all together, so you need to have a Image (your bell), and pack the image with the Badge View. Since you want to overlay both elements, you can use a Grid.
<Grid>
<Image Source="bell.png" HorizontalOptions="Center" VerticalOptions="Center"
<badge:BadgeView Text="{Binding BadgeNumber}" BadgeColor="{Binding BadgeColor}" VerticalOptions="End" HorizontalOptions="Start" />
</Grid>
Here you are setting the image, to be in the center, and the badge to be in the Top Left Corner. After this, you should manipulate the Badge Position with Margins, in order to put the badge in the correct position that you want.
I'm trying to add a floating button in the bottom right corner of my page inside the StackLayout
<?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:fab="clr-namespace:FAB.Forms;assembly=FAB.Forms"
x:Class="Hura.Pages.LatestNews"
Title="Latest news">
<StackLayout Spacing="10" Padding="5">
<Label Text="Latest news" FontSize="Medium"/>
<ListView x:Name="lsvNews"/>
<Label Text="Latest activities" FontSize="Medium"/>
<ListView x:Name="lsvActivities"/>
<Label Text="Good Mording" FontSize="Large" HorizontalOptions="Center"/>
<AbsoluteLayout x:Name="xyz"
BackgroundColor="Transparent"
HorizontalOptions="End"
VerticalOptions="End">
<Button Text="gggggg"/>
</AbsoluteLayout>
</StackLayout>
</ContentPage>
but the button appears bellow the label. But I want it to appear above the label and not below it.
How can I position the button in the bottom-left corner above the label?
Your issue here is that the StackLayout is simply going to position items in the order that you add them. So since you added the AbsoluteLayout after adding your Label, your Button is going to show up lower than your Label.
Obviously you could move the Label beneath your AbsoluteLayout and get the effect you are asking for like so:
...
<AbsoluteLayout x:Name="xyz"
BackgroundColor="Transparent"
HorizontalOptions="End"
VerticalOptions="End">
<Button Text="gggggg"/>
</AbsoluteLayout>
<Label Text="Good Mording" FontSize="Large" HorizontalOptions="Center"/>
...
But the whole point of a floating button is for it to actually float above other content. In the example that you show, your Button would never float above anything. In order to get the Button to float over other items you would need to add the entire StackLayout to your AbsoluteLayout. Something like this (note that I have not tested this code so you may need to play with it a bit):
<AbsoluteLayout VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout Spacing="10"
Padding="5"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1">
...
</StackLayout>
<Button Text="gggggg"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1,1,AutoSize,AutoSize"/>
</AbsoluteLayout>
The important bits above are that everything is within the AbsoluteLayout, which means you are able to stack your controls correctly. The other important items are the AbsoluteLayout.LayoutFlags and AbsoluteLayout.LayoutBounds. The LayoutFlags and LayoutBounds on the StackLayout basically just tell the StackLayout that it can take up the entire screen. The LayoutFlags and LayoutBounds on the Button say that the Button needs to be in the bottom right corner and that it can size itself.
Make it reverse put Stack Layout inside Absolute Layout to work like expected
Here is sample code
Button btnPlus = new Button()
{
Text = "FAB"
HeightRequest = 50,
WidthRequest = 50
};
StackLayout stackLayout = new StackLayout
{
Children = { STACK_CHILDRENS }
};
AbsoluteLayout absoluteLayout = new AbsoluteLayout();
AbsoluteLayout.SetLayoutFlags(btnPlus, AbsoluteLayoutFlags.PositionProportional);
AbsoluteLayout.SetLayoutBounds(btnPlus, new Rectangle(0.5, 0.95, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
AbsoluteLayout.SetLayoutFlags(stackLayout, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(stackLayout, new Rectangle(0f, 0f, 1f, 1f));
absoluteLayout.Children.Add(btnPlus);
absoluteLayout.Children.Add(stackLayout);
Content = absoluteLayout;