I'm using the list View in XAML, and using below codw to draw a rectangular box, I want to place a 2 letter alphabets inside the box like windows phone contacts they palce alphabets inside the rectangle box. Is there any way to place a text inside rectangle box
<BoxView Color="Green" WidthRequest="50" HeightRequest="20" HorizontalOptions="Start">
You want to replicate what it looks like on WinPhone.
(Sorry no code, I don't have my computer with me)
Use a flattened Frame (HasShadows=false, CornerRadius=0)
Set the Padding=10, Margin=3 (breathing room),
BackgroundColor=Green
Put a Label inside the Frame
Set FontSize=25, TextColor=White, Center it (Horizontal and
Vertical Alignment), FontAttributes=Bold
Hope this helps.
You can use like this
<StackLayout Padding="1" BackgroundColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout BackgroundColor="White" HorizontalOptions="FillAndExpand" >
<Label Text="Sample" TextColor="Black" HorizontalTextAlignment="Start"/>
</StackLayout>
</StackLayout>
May this will solve the problem.
Related
My app contains a Flexlayout inside a scrollview. This flexlayout is used as a bindablelayout and contains some items. When there are enough items to fill the screen the vertical itemspacing is nicely done:
However, if the list gets smaller, and less items are visible, the vertical spacing becomes weird (I suspect the items want to fill out the whole available space, but I'm not sure of that):
I want the items to always have the same space between rows. Is this possible?
Xaml:
<ScrollView Margin="10" Grid.Row="1" x:Name="UserActionScrollView">
<FlexLayout x:Name="UserActionFlexLayout" BindableLayout.ItemsSource="{Binding DisplayedUserActions}" JustifyContent="Start" Wrap="Wrap" Direction="Row">
<BindableLayout.ItemTemplate>
<DataTemplate>
-- Datatemplate --
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>
Based on your code, the main axis is horizontal direction with multiple lines. So you could set the alignment of cross axis(vertical direction) using AlignContent.
You could set like this:
<FlexLayout x:Name="UserActionFlexLayout" ... AlignContent="Start">
By the way, i think you could use CollectionView instead for this case. You could customize the layout you want. For example, you could use ItemsLayout property:
<CollectionView ItemsSource="{Binding DisplayedUserActions}">
<!--set 3 columns, and itemspacing for each direction-->
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="3" VerticalItemSpacing="20" HorizontalItemSpacing="20"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Also, you don't have to put it in a ScrollView as CollectionView can scroll itself.
For more info, you could refer to FlexLayout and Specify CollectionView layout
Hope it works for you.
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 a problem. I used the following code to create a Floating Action Button Menu: https://github.com/Polarts/CrossFAB
Now, I added it to my code like this:
<ContentPage.Content>
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView Orientation="Vertical" AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Vertical">
<Label Text="Undone" TextColor="Black" FontSize="26" FontAttributes="Bold" Margin="10" />
</StackLayout>
</ScrollView>
<c:FloatingMenu Margin="0, 0, 10, 10" BGColor="Gray" OpenIcon="Share.png" CloseIcon="X.png"
AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<c:FloatingButton x:Name="FB" BGColor="Blue" IconSrc="Facebook.png"/>
<c:FloatingButton x:Name="TW" BGColor="White" IconSrc="Twitter.png"/>
<c:FloatingButton x:Name="TB" BGColor="Navy" IconSrc="Tumblr.png"/>
</c:FloatingMenu>
</AbsoluteLayout>
</ContentPage.Content>
I used an AbsoluteLayout, because the FloatingMenu needs to be in the bottom right corner, but the problem is that right now, I can use the Floating Action Button, but the scroll of the ScrollView isn't working. When I put the FloatingMenu code above the ScrollView, the FloatingMenu stops working and I can only scroll.
How can I use both items for clicks?
When you set the AbsoluteLayout.LayoutBounds="0,0,1,1" and AbsoluteLayout.LayoutFlags="All" on a view, you're saying that you want you want the view to start in the top left corner and you want it to take up the full width and height of the view.
Since you set the LayoutBounds on both your views to this, you essentially have two views that take up the entire screen stacked on top of each other. You can test this out by adding a background color to either of the views and see what happens. Because of this, whichever view you put second is getting the touches, because it's the one on top.
If you want your FloatingMenu to be in the bottom right hand corner, you need to fix the layout bounds on that view to reflect that.
Something like this might get you started:
<c:FloatingMenu
Margin="0, 0, 10, 10"
BGColor="Gray"
OpenIcon="Share.png"
CloseIcon="X.png"
AbsoluteLayout.LayoutBounds=".95,.95,50,50"
AbsoluteLayout.LayoutFlags="PositionProportional">
This says that we want to put the view 95% over and 95% down the screen with a set width and height of 50. We say PositionProportional because we want the position, the first 2 numbers to be read as a proportion, not as absolute values.
You may also need to adjust the layout of the Floating Menu view. I suspect you're doing something like EndAndExpand for your Vertical and Horiztonal options that may not work like you expect when you fix the absolute layout.
Make sure to also take a look at the documentation on AbsoluteLayout.
PositionProportional, indicates that the x and y values will be
interpreted as proportional, while the size values are interpreted as
absolute.
A position of (0,0) puts the child in the upper-left corner, while a position of (1,1) puts the child in the lower-right corner, and a position of (0.5,0.5) centers the child within the AbsoluteLayout.
So you could try to change like below:
<ContentPage.Content>
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ScrollView Orientation="Vertical" AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Vertical">
<Label Text="Undone" TextColor="Black" FontSize="26" FontAttributes="Bold" Margin="10" />
</StackLayout>
</ScrollView>
<c:FloatingMenu Margin="0, 0, 10, 10" BGColor="Gray" OpenIcon="Share.png" CloseIcon="X.png"
AbsoluteLayout.LayoutBounds="1,1" AbsoluteLayout.LayoutFlags="PositionProportional">
<c:FloatingButton x:Name="FB" BGColor="Blue" IconSrc="Facebook.png"/>
<c:FloatingButton x:Name="TW" BGColor="White" IconSrc="Twitter.png"/>
<c:FloatingButton x:Name="TB" BGColor="Navy" IconSrc="Tumblr.png"/>
</c:FloatingMenu>
</AbsoluteLayout>
</ContentPage.Content>
In my XAML Page, I have nested stacklayouts, and in an end nest, I have two buttons. Only one of them will click (the first one). I have made it real simple. Only Color is different. When I put the red one on top, it will click. When I put the green one on top, it will click. Why both do not click, why only the first one? I need both to click.
<StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions= "CenterAndExpand" HeightRequest="75" IsVisible="{Binding IsUpcomingTrip}">
<StackLayout Orientation="Vertical" HorizontalOptions= "CenterAndExpand">
<StackLayout Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions= "FillAndExpand" HeightRequest="25">
</StackLayout>
<Button x:Name="btnCancelTrip1" Text="CANCEL TRIP" TextColor="WhiteSmoke" BackgroundColor="Red"
HorizontalOptions="FillAndExpand" Clicked="Test_Click">
</Button>
<Button x:Name="btnUpcomingTrip" Text=" REGISTER YOUR UPCOMING TRIP " TextColor="WhiteSmoke" BackgroundColor="DarkGreen"
HorizontalOptions="FillAndExpand" Clicked="Test_Click">
</Button>
</StackLayout>
</StackLayout>
I expect that both buttons should be clickable. Only the first one is clickable. When red on top, it is enabled/ clickable. When green on top, it is enabled/clickable. But not both.
The solution is to remove one stack layer. The buttons will work fine if there are two nested stack layers, but not when there are three (In which case only the first one works).
If you really need a 3rd layer, then use Grid for the 3rd layer instead of StackLayout.
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>