I am using this:
<Entry Keyboard="Numeric" VerticalOptions="Center" HorizontalOptions="End" WidthRequest="100"/>
However the numbers are all left justified. Is there a way I can change this so the numbers are right justified and can I also change the text colors of the numbers that appear to blue?
Right-Justified Text
HorizontalTextAlignment="End"
Blue Text
TextColor="Blue"
Updated Code
<Entry Keyboard="Numeric" VerticalOptions="Center" HorizontalOptions="End" WidthRequest="100" HorizontalTextAlignment="End" TextColor="Blue" />
My mistake. HorizontalTextAlignment="End" as described in this comment
Related
I have some code that looks like this:
<Frame CornerRadius="20" >
<Frame.Content>
<Grid x:Name="detailRowArea" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<xaml:CardWordsFourRowsPlus IsVisible="{Binding FourRowsPlus}" />
<xaml:CardWordsFourRows IsVisible="{Binding FourRows}" />
<xaml:CardWordsThreeRows IsVisible="{Binding ThreeRows}" />
<xaml:CardWordsTwoRows IsVisible="{Binding TwoRows}" />
</Grid>
</Frame.Content>
</Frame>
I just now noticed that the developer had used Frame.Content
Can anyone tell me why this is used? The code seems to work without it so I am wondering what advantage it offers.
There really isn't any advantage other than I guess readability, but the Content tags really aren't needed. The Forms control in xaml will assume that any content that appears between the start and end tags is assumed to be assigned to the Content property.
If you want a more detailed explanation you can check out the Content Properties section in the docs.
If you want to not use the <Frame.Content> tag that is fine, bear in mind that Frame descends from ContentView thus you would ideally define the content of this view in the Content tag. This is more of a semantic decision as opposed to performative decision.
This being said, you would need to use the content tag if you wanted to implement any kind of OnPlatform code in your frame. For example (hand coded, could be wrong)
<Frame>
<Frame.CornerRadius>
<OnPlatform x:TypeArguments="x:Single">
<On Platform="iOS">50</On>
<On Platform="Android">75</On>
</OnPlatform>
</Frame.CornerRadius>
<Frame.Content>
<Label Text="Hello World"/>
</Frame.Content>
</Frame>
Is there a way to achieve this entry plus an icon at xamarin forms, without going through platform specific effects/renders, cause right now in order to achieve this, I have implemented a platform effect for this. Please check the image link below:
EntryImage
EDIT1: Changed link
For anyone who is wondering how I used #Alessandro 's answer, here's how it is.
<StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Entry Placeholder="Test"
Text="Test"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
/>
<Image Source="test_image.png"
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="1"
HorizontalOptions="End">
</StackLayout>
I think the best solution is to create a Grid with 1 rows and 2 columns.
In column 0 you add your Entry and in column 1 you add your icon. If you want you can set your Entry to occupy column 1 and 2
Entry with Icon at the right side
<StackLayout Orientation="Horizontal" Spacing="0">
<Entry IsPassword="True" HorizontalOptions="FillAndExpand"/>
<Image Source="icon.png" WidthRequest="50" HeightRequest="50"/>
</StackLayout>
I have a small web app for sending texts between web and mobile - I wanted to create a mobile apps for this web app and decided to go with Xamarin instead of learning both Java and Swift. I bought courses and learned how yo use Xamarin.Forms and I built my first Alpha version (which already released it to the Play Store and the App Store version is in the Review progress).
All the development progress went very well on the Emulator with no issues, but once I downloaded the app to my Nexus 6P (which is a super phone) - after moving between sections on the app, the app stopped. I debugged it and found that it is closing because of OutOfMemoryException. The app only have very few sections with a ListView (I realized that the issue with the ListView which somehow makes the app stop running - while it is running very well on the emulator).
My ViewModels read the data from the server (using HttpClient) and creates the ObservableCollection which is binded to the views. My issue is with the ListView which makes all the problem with the OutOfMemory:
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame HasShadow="False" OutlineColor="White" Padding="10, 10, 10, 20" VerticalOptions="Center">
<Frame.Content>
<Frame OutlineColor="Gray" VerticalOptions="Center">
<Frame.HasShadow>
<OnPlatform x:TypeArguments="x:Boolean" Android="True" WinPhone="True" iOS="False" />
</Frame.HasShadow>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" FontSize="Small"
Text="{Binding Paste.Text}" />
<Grid Grid.Row="1" Padding="0, 20, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage x:Name="btnCopy" Grid.Column="0" DownsampleToViewSize="true" Scale="0.8" Source="copy.png">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CopyToClipboardCommand, Source={x:Reference pastesPage}}" CommandParameter="{Binding .}" />
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<StackLayout Grid.Column="1">
<ffimageloading:CachedImage x:Name="btnFavourite" DownsampleToViewSize="true"
IsVisible="{Binding ShowFavouriteButton}"
Scale="0.8"
Source="{Binding FavouriteImage}">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.ChangePasteFavouriteCommand, Source={x:Reference pastesPage}}" CommandParameter="{Binding .}" />
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<ActivityIndicator IsRunning="{Binding IsFavouriteRunning}"
IsVisible="{Binding IsFavouriteRunning}"
Scale="0.7" Color="Gray" />
</StackLayout>
<StackLayout Grid.Column="2">
<ffimageloading:CachedImage x:Name="btnDelete" DownsampleToViewSize="true"
IsVisible="{Binding ShowDeleteButton}"
Scale="0.8" Source="delete.png">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.DeletePasteCommand, Source={x:Reference pastesPage}}" CommandParameter="{Binding .}" />
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<ActivityIndicator IsRunning="{Binding IsDeleteRunning}"
IsVisible="{Binding IsDeleteRunning}"
Scale="0.7" Color="Gray" />
</StackLayout>
<ffimageloading:CachedImage x:Name="btnShare" Grid.Column="3" DownsampleToViewSize="true" Scale="0.8" Source="share.png">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SharePasteCommand, Source={x:Reference pastesPage}}" CommandParameter="{Binding .}" />
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
</Grid>
</Grid>
</Frame>
</Frame.Content>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
The icons are very small png files. This list is not large and I don't think that a small ListView should throw such an exception. What is wrong here? How can I fix this issue?
I tried to remove the icons and the same issue happen, I tried to change the icons from images to a FontAwesome icons but the app stopped very quickly. I even tried to use the ChacheImages plugin but with no help.
Here is an image of the list that is produced:
Any suggestions?
Thanks,
Seif.
The key part you mentioned is that this occurs after moving through the different sections of your app. This implies you have a memory leak somewhere which gets triggered by navigation.
One common cause is subscribing to events on page appear and never unsubscribing or otherwise keeping whole pages in memory while the navigation code keeps creating new page instances.
Without looking at all of your code, it's hard to say exactly where the problem is.
Also note that your XAML is way too complex. You should always strive to keep control nesting as low as possible. Yet here you have two frames, two grids and stack layouts, all nested. This is terrible for your app performance. Please consider simplifying your layout. There's numerous techniques to accomplish this. Whenever you can, use a simple AbsoluteLayout and proportionally size the controls as needed to display your data.
I´m facing a bad performance using all sort of layouts (e.g. StackLayout, Grid) inside a ScrollView specifically on the WP SL platform. On the other platforms (Android and iOS) the performance is way better using the same layout. I´m using the latest stable version of Xamarin.Forms (2.3.1.114) at the moment. Has anyone faced this issue too?
Thanks.
UPDATE: Code sample added to better understanding. The layout itself is not complex.
<ScrollView>
<StackLayout BackgroundColor="Black" Padding="5" Spacing="20" >
<StackLayout>
<Label Text="User name:" />
<Label Text="{Binding LoggedInUser}" />
</StackLayout>
<StackLayout>
<Label FontSize="Medium" FontAttributes="Bold" TextColor="Gray" Text="Help" />
<BoxView HeightRequest="1" BackgroundColor="Gray" HorizontalOptions="Fill" />
<Label FontSize="Small" FontAttributes="Bold" TextColor="Gray" Text="Please, send an email to xxx#example.com" />
</StackLayout>
</StackLayout>
</ScrollView>
I want to put the one image on left corner and another on right corner of Control(ex :button) and need click event for that.
please tell me....
What have you tried?
Something like this should work but it depends on exactly what you're after:
<Button Click="myClickHandler">
<Grid>
<Image Source="image1.jpg" HorizontalAlignment="Left" Stretch="None" />
<Image Source="image2.jpg" HorizontalAlignment="Right" Stretch="None" />
</Grid>
</Button>
Disclaimer: the above is untested and written freehand. I make no guarantees of it compiling, etc.