I have one ContentView in which i need to set background Image.There is "BackgroundImage" Property for ContentPage,What to do in ContentView?is it possible in xamarin to set background image in ContentView?
In ContentView use AbsoluteLayout and put Image inside AbsoluteLayout with other controls.It works!!
<ContentView.Content>
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image Source="abc.png" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Aspect="AspectFill"/>
<ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<Grid>
......
......
</Grid>
</ScrollView>
</AbsoluteLayout>
</ContentView.Content>
Related
I have a StackLayout with a Frame, ScrollView & Button as it's child controls.
When the ScrollView content is beyond a certain Height, the ScrollView seems to push the Frame above it, squashing it. I would expect that the ScrollView as a container not push upwards the view above it, but contain its content within it.
Frame - red circle, ScrollView - Blue, ScrollView's content - light blue, Button - green
EXPECTED
<?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="Class">
<ContentPage.Content>
<StackLayout
VerticalOptions="FillAndExpand"
Orientation="Vertical">
<Frame
Padding="0"
HeightRequest="60"
WidthRequest="60"
VerticalOptions="Center"
HorizontalOptions="Center"
CornerRadius="30"
BackgroundColor="Red"/>
<ScrollView
Background="Blue"
VerticalOptions="FillAndExpand">
<StackLayout
Margin="20,5,20,0"
BackgroundColor="LightBlue"
HeightRequest="150"/>
</ScrollView>
<Button
VerticalOptions="End"
Text="Next"
BackgroundColor="Green"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Ouputs (Which is what i expect):
Then if i change the ScrollView's StackLayout content's height to 950, it then squashes the content above and it looks as below:
Why is the ScrollView pushing upwards, even when the Frame has an assigned HeightRequest. How can i resolve this?
Why is the ScrollView pushing upwards, even when the Frame has an assigned HeightRequest.
From ScrollView as a child layout, a ScrollView will often be the child of a StackLayout. A ScrollView requires a specific height to compute the difference between the height of its content and its own height, with the difference being the amount that the ScrollView can scroll its content.
So you can assign specific height to Scrollview.
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
<Frame
Padding="0"
BackgroundColor="Red"
CornerRadius="30"
HeightRequest="60"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="60" />
<ScrollView
Background="Blue"
HeightRequest="150"
VerticalOptions="FillAndExpand">
<StackLayout
Margin="20,5,20,0"
BackgroundColor="LightBlue"
HeightRequest="950" />
</ScrollView>
<Button
BackgroundColor="Green"
Text="Next"
VerticalOptions="End" />
</StackLayout>
Another way is to use Gird to assign specific height for Scrollview.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame
Padding="0"
BackgroundColor="Red"
CornerRadius="30"
HeightRequest="60"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="60" />
<ScrollView
Grid.Row="1"
Background="Blue"
VerticalOptions="FillAndExpand">
<StackLayout
Margin="20,5,20,0"
BackgroundColor="LightBlue"
HeightRequest="950" />
</ScrollView>
<Button
Grid.Row="2"
BackgroundColor="Green"
Text="Next"
VerticalOptions="End" />
</Grid>
I have an AbsoluteLayout on a view in my Xamarin.Forms app, with 3 buttons in it. After another control is added programmatically, it covers the buttons. I cannot figure out how I can make the buttons to be always in front.
<ContentPage.Content>
<AbsoluteLayout x:Name="Container" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button
Style="{StaticResource CallButtonStyle}"
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".85,.02"
Text="{Binding CameraSwitchIcon}" />
<Button
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".15,.95,80,80"
Text="{Binding VideoToggleIcon}" />
<Button
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".85,.95,80,80"
Text="{Binding AudioToggleIcon}" />
</AbsoluteLayout>
</ContentPage.Content>
all XF Layouts have RaiseChild() and LowerChild() methods you can use to adjust the Z index
I am trying to get the box view of a content page to 'FillAndExpand' horizontally while making the height equal to it's width. So far for the xaml I've got:
<ContentPage Title="About" >
<StackLayout>
<BoxView x:Name ="imageBoxView" Color="AliceBlue" HorizontalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
But I don't know what value to keep for the Height Request.
You can set the binding context to itself, and then bind the HeightRequest to the view's Width.
Note: This will not work in the XAML preview mode in Visual Studio, but will work at runtime on the device.
<StackLayout>
<BoxView x:Name ="imageBoxView" Color="AliceBlue"
HorizontalOptions="FillAndExpand"
BindingContext="{x:Reference imageBoxView}"
HeightRequest="{Binding Width}" />
</StackLayout>
I have a ScrollView over AbsoluteLayout..
I need to Fix the postion of the ActivityIndicator in centre of screen.
I tried following code.
<ScrollView>
<AbsoluteLayout VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout BackgroundColor="White"
Padding="50,20,50,20"
Spacing="5"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
// have set of elements..
</StackLayout>
<ActivityIndicator IsVisible="{Binding IsBusy}"
IsRunning="{Binding IsBusy}"
Color="Black"
AbsoluteLayout.LayoutBounds="0.5,0.5,0.1,0.1"
AbsoluteLayout.LayoutFlags="All"/>
</AbsoluteLayout>
</ScrollView>
and I find the result as its in the centre of the ScrollView.
I tried by placing the ActivityIndicatorout side the ScrollViewit simply gives white screen as output.
How do I fix the position of the ActivityIndicator in centre of screen ?
As #Vahid said, if you want the ActivityIndicator over the ScrollView, you need to put both inside an AbsoluteLayout, like this:
<AbsoluteLayout VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout BackgroundColor="White"
Padding="50,20,50,20"
Spacing="5">
// Your stuff goes here
</StackLayout>
</ScrollView>
<AbsoluteLayout BackgroundColor="#22000000"
AbsoluteLayout.LayoutBounds="0.5,0.5,1,1"
AbsoluteLayout.LayoutFlags="All"
IsVisible="{Binding IsBusy}">
<ActivityIndicator Color="Black"
AbsoluteLayout.LayoutBounds="0.5,0.5,0.1,0.1"
AbsoluteLayout.LayoutFlags="All"
IsVisible="True"
IsRunning="True"/>
</AbsoluteLayout>
</AbsoluteLayout>
Notice that I added an extra AbsoluteLayout that works like a 'wait overlay' over the ScrollView only - not the whole screen.
Create a grid page with one row and one column.
Define both your ActivityIndicatorLayout and ScrollLayout to be in row 0 and column 0. I add the Content before the Activity Indicator.
You can use Rg.Plugins.Popup
Design popup page with activity indicator and you can display it wherever you want.
My ActivityIndicator is at the bottom of the Page, but it should be in the middle. I tried everything I found in the internet but nothing worked.
Image
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<SearchBar Placeholder="Parkhaus suchen" Text="{Binding SearchText}"/>
<ListView x:Name="HomeListView" ItemsSource="{Binding Parking}" HasUnevenRows="False" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer/>
</ListView>
</StackLayout>
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ActivityIndicator IsRunning="{Binding IsBusy}" IsVisible="{Binding IsBusy}" VerticalOptions="Center" HorizontalOptions="Center"/>
</StackLayout>
</AbsoluteLayout>
Try changing your StackLayout around your ActivityIndicator to use:
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
The PositionPropertional flag tells the AbsoluteLayout that the x and y position of the element is based on the size of the absolute layout, taking the size of the element into account. So 0.5 tells it to center the element within the AbsoluteLayout.
The values for the width and height are both set to -1. This is considered a "special value" for width and height meaning "Auto".