Hopefully this makes sense, as it's quite bizarre to me.
Essentially the problem I have is Font Awesome appears to override certain words with icons which I do not want happening - this is all done in XAML. I only want to use Font Awesome if I'm referencing the unicode directly otherwise I want to see the word I actually type.
I'm not entirely sure how to get around this right now, as any reference I find between Xamarin Forms and Font Awesome online it's generally people struggling to get FA working; which is not my current issue.
<Button Style="{StaticResource FontAwesome}" Text=" Sort By" />
Following the code above, I expect to ONLY see the SortBy icon at the start of my Text property - where I reference the code starting & and ending ;
This works fine - however I also get the same icon when I type "Sort", which I do not want.
EDIT
I've decided to use a Frame to get around this minor issue.
<Frame BackgroundColor="#f99000" HasShadow="False" Margin="5, 10" Padding="10">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnSortBy" />
</Frame.GestureRecognizers>
<StackLayout Orientation="Horizontal">
<Label Style="{StaticResource FALIExtendedWhite}" Text="" VerticalTextAlignment="Center" HorizontalOptions="End" />
<Label Text="Sort By" VerticalTextAlignment="Center" HorizontalOptions="CenterAndExpand" TextColor="White" />
</StackLayout>
</Frame>
Related
I am currently working on a UI for an application and I want to align the following label Text automatically horizontally, so I wanted to test, how I can align text normally.
The Label Documentation of Maui state, that I have to do it with the HorizontalTextAlignment Element. I tried it several times and it worked, but here it won't:
<CollectionView Grid.Row="1" BackgroundColor="Black">
<CollectionView.ItemsSource>
<x:Array Type="{x:Type models:MessageModel}">
<models:MessageModel Message="Hallo" Created="01.01.2001 00:00:00"/>
<models:MessageModel Message="Hey na!" Created="01.01.2001 00:00:00"/>
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:MessageModel">
<Label HorizontalTextAlignment="End" TextColor="White" Text="{Binding Created}"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The Output is the following (And yeah I could use one Label, but I wanted to try both ways):
Edit: adding the following Element HorizontalOptions="FillAndExpand" at the label + a Background Color:
Edit2:
I have been dipping my toes in the .NET Maui framework, but unfortunately so far it has been quite disappointing. There seem to be multiple errors related to Shell (title view not working properly) and controls themselves. I have the following main page xaml file:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1.MainPage">
<StackLayout Background="#111111" >
<Frame HasShadow="True" Margin="10" CornerRadius="10" BackgroundColor="#222222">
<StackLayout Spacing="30">
<Grid ColumnDefinitions="30,*">
<Label Text="R" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="Red" ThumbColor="Red" MaximumTrackColor="#AAAAAA" />
</Grid>
<Grid ColumnDefinitions="30,*">
<Label Text="G" FontSize="Medium" TextColor="White" />
<Slider GridLayout.Column="1" MinimumTrackColor="#7FFF00" ThumbColor="#7FFF00" MaximumTrackColor="#AAAAAA" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</ContentPage>
which is just a stack layout with a single frame that houses two sliders with labels. However, the two sliders seem to have a predefined width, as they are not filling the remaining space:
As soon as I add anything to any of the controls in the xaml while the app is running, for example a green background to the first grid, both sliders resize to the correct size:
However, when I reload the application with this change, the sliders go back to the wrong size:
There are additional issues that I encountered as well, when placing this content page as a flyout item in the shell where android behaviour was as described here, but additionally the Sliders are not interactable in Windows version. In this example with a clean project they do work in Windows version.
Try with any third-party packages like syncfusion, etc. to meet your requirements.
So I have an odd thing happening with last Xamarin update and I am not sure what to do about it.
I have a view
<ContentView.Content>
<AbsoluteLayout WidthRequest="100" HeightRequest="100">
<Button x:Name="BackgroundButton" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<Image x:Name="Icon" InputTransparent="True" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Margin="20,15,20,25"/>
<Label x:Name="CountLabel" Style="{StaticResource HubButtonLabel}" HorizontalTextAlignment="End" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
<Label x:Name="ButtonLabel" Style="{StaticResource HubButtonLabel}" HorizontalTextAlignment="Center" VerticalTextAlignment="End" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
</AbsoluteLayout>
</ContentView.Content>
</ContentView>
Is basically just a button wrapper, with some extra icons, and text. I have a few of these in the project of different layouts and styles. Until the last update they worked fine. Now the button renders overtop of everything else. I can confirm that by setting the button color to something semi transparent.
This only happens on Android, it still works as expected on ios
Anyone have a fix for that? or do I need to rework all these views?
Update - So while this isn't really a fix, but also kind of is. If I swap out the Button for an ImageButton - they work again as expected on both platforms.
Bug perhaps with button on Android?
Got an answer on another forum. - Apparently it is a known bug with an easy fix, https://forums.xamarin.com/discussion/comment/394729
Put
global::Xamarin.Forms.Forms.SetFlags("UseLegacyRenderers");
Before the xamarin init in Main Activity Oncreate.
I have a listview that displays some information on the users payment history, and within each payment entry there are various elements that are displayed or not depending on the PaymentEntry object. The variables in this object are populated from an API call that returns Json then deserializes it into an observablelist of PaymentEntry type.
The elements in the listview cells can vary depending on two bools within the entries individually. So one might show a stacklayout that contains two labels, and another entry might not display that. I have the IsEnabled variable of these elements bound to the bools within the list of entries, as I'd expect the listview would be able to dynamically display the viewcells no matter if some of the labels inside the viewcell are disabled or not.
My caching method is RetainElement due to the variable nature of the cells.
Now, the problem is that the binding for IsEnabled doesn't seem to be working. All of the entries are enabled, regardless of whether or not the bool is true or false.
Another problem is that the caching strategy seems to be breaking the listview, it displays only about 8 entries with their elements visible, then the rest of the viewcells are all equal size and completely empty of the labels that should be inside them, whether they have a binding for IsVisible/IsEnabled or not.
Some extra background is that some elements are displayed/hidden with a converter on the bool, a negatebooleanconverter that I'm using.
<ListView
x:Name="MyListView"
CachingStrategy="RetainElement"
HasUnevenRows="True"
ItemsSource="{Binding items}">
<Label
Margin="2.5"
FontAttributes="Bold"
HorizontalOptions="StartAndExpand"
Text="{Binding issuedDate}"
VerticalOptions="FillAndExpand" />
<StackLayout
HorizontalOptions="FillAndExpand"
IsVisible="{Binding isBoolOne, Converter={Helpers1:InverseBoolConverter}}"
Orientation="Horizontal"
VerticalOptions="StartAndExpand">
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="FillAndExpand">
<Label
FontSize="Small"
Text="Sample Text"
TextColor="RoyalBlue" />
<Label FontSize="Default" Text="{Binding SampleStringOne}" />
</StackLayout>
<StackLayout HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand">
<Label
FontSize="Small"
HorizontalTextAlignment="End"
Text="Sample Date"
TextColor="RoyalBlue" />
<Label
FontSize="Default"
HorizontalTextAlignment="End"
Text="{Binding SampleDate}" />
</StackLayout>
<StackLayout
HorizontalOptions="FillAndExpand"
IsVisible="{Binding isBoolTwo}"
VerticalOptions="StartAndExpand">
<Label
FontSize="Small"
HorizontalTextAlignment="Start"
Text="Sample Number"
TextColor="RoyalBlue" />
<Label
FontSize="Default"
HorizontalTextAlignment="Start"
Text="{Binding SampleStringTwo}" />
</StackLayout>
<StackLayout
HorizontalOptions="FillAndExpand"
IsVisible="{Binding isBoolOne}"
VerticalOptions="StartAndExpand">
<Label
FontSize="Default"
HorizontalTextAlignment="Start"
Text="{Binding SampleStringOne}" />
</StackLayout>
Expected result is that the listview will display the cells with varying size based on the data they have enabled. So, for example, if isBoolOne is true, the first stack layout would be disabled, and if isBoolTwo is true, the next stacklayout should be enabled, and since isBoolOne is true, the last stacklayout should be enabled. Instead, all 3 of these are displayed no matter what.
I've tried doing a debug to display each bool in console from the itemsource, and they are being read correctly with no nulls and varying true/false as expected. All of the string bindings display correctly. All of the bool bindings display true apparently.
The second problem is that with caching strategy of retainelement, only the first few elements are visible, the rest are blank. With recycle element they all display, but as I understand this would prevent variation of elements enabled in each.
EDIT: I should make clear I have omitted some of the XAML, including the ListView.ItemTemplate, DataTemplate, ViewCell, a Frame, and an AbsoluteLayout that encompass what I've shown. I did this to minimize the code shown and only display the problem areas.
Hi I am working in shoping app and design like, I have already used tint image:
How I can do that, I I can create a circel like this image
I am not sure why you are not using icons from the resources or get the images from rest api.
This is only needed if you want to create dynamic icons.
If that is the case, use a Frame and put the image on it.
<Frame CornerRadius="15" AbsoluteLayout.LayoutBounds="120, 10, 30, 30" Padding="5" VerticalOptions = "FillAndExpand" HasShadow= "false" BackgroundColor="red" >
<StackLayout Orientation="Vertical" Spacing="0" HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="1" VerticalTextAlignment="Center" HorizontalOptions="Center" />
</StackLayout>
</Frame>
the important thing to note is that , "cornerRadius" should be help the size of "AbsoluteLayout.LayoutBounds" width and size.
to learn more about AbsoluteLayout go here
Use FFImageLoading NuGet Library in your Solution, you can download using link FFImageLoading
Paste Below Code
<ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Center"
WidthRequest="300" HeightRequest="300"
DownsampleToViewSize="true"
Source = "http://loremflickr.com/600/600/nature?filename=simple.jpg">
<ffimageloading:CachedImage.Transformations>
<fftransformations:RoundedTransformation Radius="50"/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>