insert Icon in a entry (xamarin) at the begging of the text - c#

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.

Related

Spaces between control on xamarin

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.

Frame to scale with child elements instead of pre-defining Width and HeightRequest

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?

Excessive space in the ListView on Xamarin

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.

How to adjust a label "inside" of a image Xamarin Forms

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.

CarouselView not showing the data

I am trying to display a CarouselView inside a TabbedPage. I already added the (prerelease-)packages to the Project. Here is my xaml file:
<control:CarouselView x:Name="CVMain"
HeightRequest="150" >
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Label HorizontalOptions="Center"
Text="Just a test :)"
VerticalOptions="Center" />
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>
(control: xmlns:control="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView")
The label doesn't show up when I launch my app. The carousel still exists tho, I can confirm that by adding the BackgroundColor="Green"attribute to the CarouselView.
What am I missing?
Edit: As suggested, I placed the Label inside a Grid, but without any success (I also added an Image):
<control:CarouselView x:Name="CVMain" HeightRequest="150">
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.RowSpan="2"
Aspect="AspectFill"
Source="{Binding ImageBase64,
Converter={StaticResource Base64ToImageConverter}}" />
<StackLayout Grid.Row="1">
<Label Text="Test123" />
</StackLayout>
</Grid>
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>

Categories