I want to make a absolutelayout in the corner of the screen,and set the size of it:widhtrequest=60 and heightrequest =60
inside the absolute is a frame and label.
but it seems the absolutelayout is autosized according the Image size inside it.
How can I size it?
You can refer to the following code:
<AbsoluteLayout x:Name="absLayout">
<AbsoluteLayout x:Name="box" BackgroundColor="Blue" WidthRequest="60" HeightRequest="60" >
<Image BackgroundColor="Olive" AbsoluteLayout.LayoutBounds="0,0, 50, 50" Source="test.jpg"
AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
</AbsoluteLayout>
Related
I am using observable collection and displaying my images in carousel view. I need to adjust them by size..for example the first the biggest and then the images should go smaller. Is there a way to achieve this?
<IndicatorView x:Name="indicatorView" IndicatorSize="14"
MaximumVisible="6" IndicatorsShape="Circle"
Margin="0,20,0,30"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="Center">
</IndicatorView>
<!--Pictures-->
<CarouselView Margin="0,0,0,20" HorizontalScrollBarVisibility="Never" x:Name="image"
ItemsSource="{Binding ImageResults, Mode=TwoWay}"
BackgroundColor="{DynamicResource PictureBackground}"
IndicatorView="indicatorView" >
<CarouselView.ItemTemplate >
<DataTemplate>
<Image Source="{Binding FieldVisualData}" WidthRequest="530" HeightRequest="334" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
I find that Image uses the WidthRequest and HeightRequest.
There is a easy way to make the size of the images in CarouselView consistent, you could set AspectFit for each Image to show the same effects.
For example:
<Image Source="{Binding FieldVisualData}"
WidthRequest="530"
HeightRequest="334"
Aspect="AspectFit"/>
I am trying to get an image on the bottom right corner. I can get it easily but the problem now is to change the size of the image. I want to preserve the ratio of image while setting either height or width.
<StackLayout Grid.Column="0">
<Image Source="party.png"
HeightRequest="100"
VerticalOptions="EndAndExpand"
Aspect="AspectFit"/>
</StackLayout>
With the xaml above, I set height and width is being changed accordingly. But, when I add HorizontalOptions="EndAndExpand" in the image i lost the aspect ratio.
How can I put image at bottom right with preserving the aspect ratio?
You can use HorizontalOptions="End" , then image will at bottom right with preserving the aspect ratio .
<StackLayout Grid.Column="0" BackgroundColor="LightBlue">
<Image Source="Saimiri_sciureus.jpg"
HeightRequest="100"
VerticalOptions="EndAndExpand"
HorizontalOptions="End"
Aspect="AspectFit" />
</StackLayout>
The effect :
You can try:
<StackLayout Grid.Column="0" BackgroundColor="LightBlue">
<Image Source="party.png"
HeightRequest="*"
VerticalOptions="EndAndExpand"
HorizontalOptions="EndAndExpand"
Aspect="AspectFit" />
And that will keep the aspect ratio.
I have the following simple XAML page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Test.UserGuides.VPN">
<ContentPage.Content>
<ScrollView>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Margin="10,10,10,10">
<Label Margin="10,10,10,10" Text="How to connect to VPN." HorizontalOptions="Center" />
<Label Margin="10,10,10,10" Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." />
<Image x:Name="imgVPN1" Margin="10,10,10,10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
<Label Margin="10,10,10,10" Text="Select your region and press the Connect button." />
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
In the constructor, I call a method to load the images:
private void LoadImages()
{
imgVPN1.Aspect = Aspect.AspectFit;
ImageSource imagesrc = ImageSource.FromResource("Test.Files.CiscoAnyConnect.PNG");
imgVPN1.Source = imagesrc;
}
The result looks like this on my (rather large, high DPI) phone:
imgur link 1
Of course, I want the image to automatically expand so it takes up the entire width of the screen. While maintaining the aspect ratio. But how can I achieve this? I've already tried putting the Aspect to "AspectFill", and added
imgVPN1.WidthRequest = Application.Current.MainPage.Width;
To the LoadImages method, but that makes the end result look like this:
imgur link 2
I've been toying around with various HorizontalOptions, VerticalOptions, Aspects, GridView, StackLayouts,... The end result is always either the first or the second screenshot. So how can I achieve what I want here?
Here is what can be done. XML almost didn't change, I just removed image Layout Options
<ContentPage.Content>
<ScrollView>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Margin="10,10,10,10">
<Label Margin="10,10,10,10" Text="How to connect to VPN." HorizontalOptions="Center" />
<Label Margin="10,10,10,10" Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." />
<Image x:Name="imgVPN1" Margin="10,10,10,10" />
<Label Margin="10,10,10,10" Text="Select your region and press the Connect button." />
</StackLayout>
</ScrollView>
</ContentPage.Content>
After implementing everything in relative layout which also was not simple (I have the code if anybody needs it let me know) I found easier way. The key point is that image doesn't scale correctly and occupies too much space in height. But we know the size ratio of this image so we can use it. In the code we need to override OnSizeAllocated because in constructor the width is unknown yet. Then it's easy
protected override void OnSizeAllocated(double width, double height)
{
base.OnSizeAllocated(width, height);
imgVPN1.WidthRequest = width;
imgVPN1.HeightRequest = width / 2.152; //given that image is 411 x 191
}
You could use other width than page with if you want. For example you could use stack layout width to consider margins for more accuracy but this is already tuning. Or you actually could use the image width itself like that
protected override void OnSizeAllocated(double width, double height)
{
base.OnSizeAllocated(width, height);
double needHeight=imgVPN1.Width / 2.152;
if (imgVPN1.Height != needHeight)
imgVPN1.HeightRequest = needHeight;
}
Here is what you need.
<ContentPage.Content>
<ScrollView>
<StackLayout Margin="20" Spacing="10">
<Label Text="How to connect to VPN." HorizontalOptions="Center" />
<Label Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." />
<Image Source="yourimage.jpg" HorizontalOptions="Fill" />
<Label Text="Select your region and press the Connect button." />
</StackLayout>
</ScrollView>
</ContentPage.Content>
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;
Now that ScrollView ContentSize property is readonly how do I SET
the size of the ScrollView content?
That very same property that is settable in UIScrollView
(but not in xamarin forms)
I have this:
<ScrollView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" HorizontalOptions="FillAndExpand"
x:Name="attachmentScroller"
>
<StackLayout x:Name="AttachmentsView" Orientation="Horizontal" VerticalOptions="Fill"/>
</ScrollView>
what I've tried is setting AttachmentsView.MinimumWidthRequest to the desired contentWidth;
But that does not seem to expand the parent's scrollview content width
to the desired value.
You can set the set of the content size, by setting the property of the content, instead of the the ScrollView.
Here's it in xaml
<ScrollView>
<StackLayout HeightRequest="100" />
</ScrollView>
To stop the scroll view restricting the size of the contained content to its own size, ensure you set
ScrollView Orientation="Horizontal" or "Both" or "Vertical" respectively.
i.e. for your example -
<ScrollView Orientation="Horizontal" Grid.Row="1"
Grid.Column="0" Grid.ColumnSpan="3"
HorizontalOptions="FillAndExpand"
x:Name="attachmentScroller">
<StackLayout WidthRequest="1000" x:Name="AttachmentsView"
Orientation="Horizontal" VerticalOptions="Fill"/>
</ScrollView>