I'm trying to put a label inside of my image, I couldn't use a Margin property, because some reason it's not working, untill now I have this :
And what I want is this :
XAML :
<StackLayout Orientation="Vertical">
<Label HorizontalOptions="Center" Text="something" TextColor="Black"/>
<Image HorizontalOptions="Center" Source="spin.png"/>
</StackLayout>
You need a Grid instead of a StackLayout (notice how both the Label and the Image are in the same row and column):
<Grid HorizontalOptions="Center"
VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image HorizontalOptions="Center"
Source="spin.png"
Grid.Row="0"
Grid.Column="0"/>
<Label HorizontalOptions="Center"
Text="something"
TextColor="Black"
Grid.Row="0"
Grid.Column="0"/>
</Grid>
Because the Label is listed beneath the Image in the XAML code above, the Label will be drawn on top of the Image.
You also could have used an AbsoluteLayout, which is another layout that is good at layering things.
Related
I just want to put the icon on the begging of the Entry, there is not way, i had read and i can not, please i need any help
Here you have part of the code where i want to insert the ico
<ContentPage.Content>
<Grid RowSpacing="{OnPlatform iOS=25,Android=20}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="3" HorizontalOptions="Center"
WidthRequest="{OnPlatform iOS=300,Android=300}"
Orientation="Vertical">
<!-- Here where i insert the image -->
<Image Grid.Column="1" Source="userImage.png"></Image>
<Label
Text="Usuario"
FontSize="{OnPlatform Android=13}"
TextColor="Black"
/>
<Frame
HasShadow="{OnPlatform Android=true, iOS=false}"
Padding="{OnPlatform Android=6,iOS=0}"
CornerRadius="{OnPlatform Android=7}">
<Entry
Placeholder="Usuario"
ClearButtonVisibility="WhileEditing"
MaxLength="25"
FontSize="{OnPlatform Android=15,iOS=16}"
TextColor="Blue"
x:Name="txtUser">
</Entry>
</Frame>
</StackLayout>
You seem to be using Grids and StackLayouts somewhat haphazardly.
Your problem indeed comes from trying to left align an element in a vertical StackLayout. Simply having this in an horizontal StackLayout should fix your problem.
<StackLayout>
<StackLayout HorizontalOptions="Center"
WidthRequest="{OnPlatform iOS=300,Android=300}"
Orientation="Horizontal">
<Image Grid.Column="1"
Source="userImage.png"/>
<Label Text="Usuario"
FontSize="{OnPlatform Android=13}"
TextColor="Black" />
</StackLayout>
<Frame HasShadow="{OnPlatform Android=true, iOS=false}"
Padding="{OnPlatform Android=6,iOS=0}"
CornerRadius="{OnPlatform Android=7}">
<Entry Placeholder="Usuario"
ClearButtonVisibility="WhileEditing"
MaxLength="25"
FontSize="{OnPlatform Android=15,iOS=16}"
TextColor="Blue"
x:Name="txtUser" />
</Frame>
</StackLayout>
Watch out when you are defining a "Grid.Row" or a "Grid.Column" in a xaml element that is not directly "underneath" your Grid. In your example, assigning a grid column to your image element does not work since it is a child of the StackLayout and not the Grid. This will not assign the element to any of the grid's row or column since it is not a child of it. You can look into Xamarin's Grid Control documentation for more information.
I have built a simple and basic app. In order to help people to understand easly the app.
I would like to create a dynamic turorial. My idea is put differents content's pages in a carousel or collection view. And In every content's pages there is an image in background and I will add label and box to explain fonctionalities
Here you will find an example of an image that I will put in background of content page and add label to explain highlighted information
My question are :
I have 3 content pages that I will put backgroud image on it :
home =new HomePage(), Page2 page2 =new Page2() & Page3 page3 =new Page3()
how can i easly add label where I want as the image will be in background ?
how I can put those content pages in carrousel view or collection view ?
Thanks for your help
You can create carousel like this:
<StackLayout Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<CarouselView x:Name="cvTutorial" ItemsSource="{Binding Tutorials}" HorizontalScrollBarVisibility="Never" ItemsUpdatingScrollMode="KeepItemsInView" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" PeekAreaInsets="10" IsScrollAnimated="True" PositionChanged="cvTutorial_PositionChanged">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" Padding="0" HorizontalOptions="End">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ffimageloading:CachedImage BackgroundColor="Transparent" Grid.Row="0" x:Name="tutorialImg" Source="{Binding ImageUrl}" Aspect="AspectFit" HorizontalOptions="FillAndExpand"
Margin="{DynamicResource 50,40,50,00}" HeightRequest="350"/>
<StackLayout Grid.Row="1" HorizontalOptions="Center" VerticalOptions="End" Padding="0,30,0,0" Spacing="15">
<Label Style="{StaticResource RobotoBoldSize24WhiteLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Title}" Padding="10,10,10,0" />
<Label Style="{StaticResource RobotoRegularSize16LightGrayLabelStyle}" HorizontalTextAlignment="Center" Text="{Binding Subtitle}" HorizontalOptions="Center"
Padding="50,10,50,10" />
</StackLayout>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Grid x:Name="indicatorGrid" ColumnSpacing="3" HorizontalOptions="Center" VerticalOptions="Start" Padding="{DynamicResource MarginPadding00_20_00_40}"
ColumnDefinitions = "25,25,25">
<pancake:PancakeView x:Name="Dot_1" Grid.Column="0" Style="{StaticResource SelectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_2" Grid.Column="1" Style="{StaticResource UnselectedIndicatorStyle}" />
<pancake:PancakeView x:Name="Dot_3" Grid.Column="2" Style="{StaticResource UnselectedIndicatorStyle}"/>
</Grid>
</StackLayout>
Check working sample - https://rb.gy/mlmh0q
I use the following code to create a xamarin form using visual studio for android when i look into the output lot of spaces between the controls.
Attachment contains output in emulator. Please let me know how to reduce the space between the controls:
.
Code use to create a form:
You can add the specific value for your Height in Grid.(If you do not set it, the default value of the RowDefinition.Height property is *). If you do not want to set the specific Height, please change the value of VerticalOptions from CenterAndExpand to Center(Row 1 and Row 3's Lable).
Here is code.
<ContentPage Title="Home" >
<StackLayout>
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="200"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<CarouselView x:Name="Imageslider">
<CarouselView.ItemTemplate>
<DataTemplate>
<Image Source="MonkeyFace.jpg" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Image>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</Grid>
<Label Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Black" Text="About Us" VerticalTextAlignment="Center" FontSize="Large" />
<Label Grid.Row="2" Padding="2,0,2,0" HorizontalTextAlignment="Center" VerticalOptions="Center" HorizontalOptions="Center" Text="Surabi Institute of Hotel Management and Fashion Technology recognized by Bharathidhasan University. Surabi Institute of Hotel Management and Fashion Technology was established in the year of 2006. The aim of the Founder is to Provide Hotel Management / Fashion Technology to the poor and Need of the Society">
</Label>
<!-- Place new controls here -->
<Label Grid.Row="3" HorizontalOptions="Center" VerticalOptions="Center" TextColor="Black" Text="Saravana Educational Welfare Trust" />
</Grid>
</StackLayout>
</ContentPage>
Here is running screenshot.
I have a pop-up window which is built in a Grid. I want my pop-up window to have rounded corners, Therefore I made a custom renderer for a Frame, which I then intend to encapsulate the Grid in, like so:
<local:MaterialFrame BackgroundColor="Red" WidthRequest="Auto" >
<Grid BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackLayout HorizontalOptions="CenterAndExpand" BackgroundColor="#1eaaf0" Padding="40">
<local:IconView Source="ic_connect.png" Foreground="White" WidthRequest="40" HeightRequest="40" />
<Label x:Name="TitleLabel" Style="{DynamicResource FontBold}" Font="26" />
</StackLayout>
</Grid>
<Grid Grid.Row="1">
.......
</Grid>
</Grid>
</local:MaterialFrame>
The problem is though, that the Frame scales to fill the entire view! I could set WidthRequest and HeightRequestto a predefined value. But really, what I want, is, similar to the Grid, to make it Auto, so that the child elements decide those values.
Is that achievable?
i am using Xamarin to realize a listView that is filled dynamically with a list of object.
The main problem is that even i use a static list of 2 elements (for example) there is, in the view, a blank space belonging the listView.
The inherent code is the following:
SfidePage.xaml
<ListView
Grid.Row="2"
x:Name="sfideLanciate"
HasUnevenRows="true"
SeparatorVisibility="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
BackgroundColor="{StaticResource OpzioniTitleBackgroundColor}"
Margin="0,1,0,0"
RowSpacing="0"
ColumnSpacing="10"
VerticalOptions="Start"
Padding="5"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ci:CircleImage Source="avatar" Aspect="AspectFill"
HorizontalOptions="Center" VerticalOptions="Start"
HeightRequest="70" WidthRequest="70"
BorderColor="{StaticResource OpzioniLineDividerBackground}" BorderThickness="3"
Grid.Row="0"></ci:CircleImage>
<Grid RowSpacing="0" ColumnSpacing="0" Grid.Column="1" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Text="In attesa di Kyle Cain" FontSize="16" Grid.Row="0" TextColor="Black" FontAttributes="Bold"></Label>
<Label Text="Ardeatina Roma 70" Grid.Row="1" TextColor="Black"></Label>
<Label Text="10 DOMANDE - Argomento: Pannelli integrativi" Grid.Row="2" TextColor="{StaticResource LightGreyInfo}"></Label>
</Grid>
<Label Text="1h" Grid.Column="2" Grid.Row="0" TextColor="{StaticResource LightGreyInfo}" HorizontalTextAlignment="Center"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
SfidePage.xaml.cs
public partial class SfidePage : ContentPage
{
public SfidePage ()
{
InitializeComponent ();
sfideLanciate.ItemsSource = new List<int> { 1, 2 };
}
}
The output is the following:
https://i.imgur.com/jQ40JCr.png
"SFIDE COMPLETATE" is a Stack Layout after the listView, so the blank space is part of the listView.
How can i adapt the height of listView to its elements?
It might be related to the padding property, have you tried removing it?
Also, you set the Margin-Top as 1, this could probably create the Space too.
You set the top margin to 1 in your code: Margin="0,1,0,0" change that to Margin="0" and the space should be gone...
In the Listview, add and set the property "HasUnevenRows = true".
If it doesn't have that property it doesn't bind items to the uneven rows, but still displays them as blank rows.