I have a small issue with rendering of some elements on a WinRT application.
The page is loaded but the elements of my listview are randomly dimmed for a few seconds. Sometimes they appear in gray and sometimes they are fine.
For information I use image for my listview items backgrounds (weight of my image = 4ko).
I also tryed to give them a fixed Width and fixed DecodePixelWith but it doesnt change anything.
Any tips for solving this issue ? screen shot example of my bug
Thanks everyone :p
This one is the datatemplate (it's a short example of my XAML code)
<DataTemplate x:Key="ListViewIntervention">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="170" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.ColumnSpan="2" NineGrid="50,50,170,50" Stretch="Fill">
<Image.Source>
<BitmapImage UriSource="ms-appx:///Assets/Shadow/ListViewUnplanned.png"
DecodePixelWidth="1200"
DecodePixelType="Physical"/>
</Image.Source>
</Image>
</Grid>
<Grid x:Name="grid_with_some_buttons>
</Grid>
</Grid>
</DataTemplate>
and there is my listview :
<ListView
Name="DataListView" Grid.Row="2"
Margin="35,10,15,0" IsSwipeEnabled="False"
ItemTemplate="{StaticResource ListViewIntervention}"
ItemsSource="{Binding InterventionsCollection}"
ScrollViewer.HorizontalScrollMode="Disabled" SelectionMode="Single">
</ListView>
Atm my listView contain 350 items.
Related
I have a lottie animation that is disabled after it is clicked again.
This is what my lottie animation looks like:
Paused:
Played:
As we can see the actual "Image" size is bigger. My row definition size is "Auto", and HeightRequest="180", WidthRequest="180" for the lottie animation.
What I want to happen here is if the lottie animation is disabled, my image that is overlapped with the animation will be (IsVisible) true.
But even if my HeightRequest="10" and WidthRequest="10" the image looks like this:
How can I achieve it to look like the size of the first image without wrapping it with stacklayout? I dont want to wrap it with stacklayout because I want my UI to be responsive.
If I use this code:
<StackLayout Grid.Row="2"
Grid.ColumnSpan="2"
Padding="0,55,0,0">
<Image Source="red_record"
HeightRequest="85"
WidthRequest="85"
x:Name="red_record_lottie"
IsVisible="True"
/>
</StackLayout>
It will look like the desired output (for the UI):
But we know that the code will not make it responsive. How can I make it responsive?
try using a frame since the image is circular u can have a frame and change the corner radius to make a circle.
https://montemagno.com/xamarin-forms-how-to-clip-images-with-rounded-corners/
this might help u and further explain my point of view
According to your description, you just want to get the desire image size, I suggest you can use Grid and Frame to get it.The CornerRadius property of the Frame control can be used to create a circle image.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame
Margin="10"
BorderColor="Black"
CornerRadius="50"
HorizontalOptions="Center"
IsClippedToBounds="True"
VerticalOptions="Center">
<Image
Margin="-20"
Aspect="AspectFill"
HeightRequest="100"
Source="a11.jpg"
WidthRequest="100" />
</Frame>
</Grid>
You can also just use Frame to circle image, to set Frame's HeightRequest and WidthRequest
<Frame
Margin="10"
BorderColor="Black"
CornerRadius="50"
HeightRequest="60"
HorizontalOptions="Center"
IsClippedToBounds="True"
VerticalOptions="Center"
WidthRequest="60">
<Image
Margin="-20"
Aspect="AspectFill"
HeightRequest="100"
Source="a11.jpg"
WidthRequest="100" />
</Frame>
Well... as ironic as it may sound, I have found a solution just now... and I wrapped it with stacklayout 😅😅
This is the code that worked for me:
<StackLayout Grid.Row="2"
Grid.ColumnSpan="2"
Padding="0,0,0,0">
<forms:AnimationView x:Name="blue_record_lottie"
Animation="blue_record.json"
Loop="True"
AutoPlay="False"
HeightRequest="180"
WidthRequest="180"
Margin="0,10,0,10"
OnClick="blue_record_lottie_OnClick"/>
<Image Source="dark_red_rec"
HeightRequest="85"
WidthRequest="85"
Margin="0,55,0,60"
x:Name="red_record_lottie"
IsVisible="False"/>
</StackLayout>
I am also surprised and I have proven this by testing on my emulator (Pixel Pie 2: 1080x1920), and my physical device (samsung galaxy core: 480 x 800).
On my Pixel Pie:
On my Samsung Galaxy Core:
I have a progress bar in Xamarin Forms defined in my XAML.
Actually I want to add labels beneath the progress that shows the minimum and maximum value of the progress bar as shown in the image below:
My XAML code:
<StackLayout Orientation="Vertical" Margin="5">
<Frame Padding="10"
BackgroundColor="White"
HeightRequest="80">
<Frame.Content>
<Label Text="%" HorizontalTextAlignment="End" FontSize="Small"/>
<ProgressBar x:Name="myProgressBar" WidthRequest="100"
HeightRequest="15" VerticalOptions="Center" HorizontalOptions="Center" Progress="0.2"/>
</Frame.Content>
</Frame>
</StackLayout>
Can someone please help me to achieve this in Xamarin Forms ? Also, how can I add a gradient color like in the image ?
For the text, you would probably want to use labels positioned under the progressbar. I'd recommend a grid with two rows.
As for the gradient, unfortunately the xamarin forms progress bar doesn't support this out of the box. You can either create a custom renderer for each platform that draws the gradient, or consider a third party control like Syncfusion's (https://www.syncfusion.com/products/xamarin/progress-bar)
You can make a custom Xamarin Forms control.
The content could be something like that:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5* />
<ColumnDefinition Width="0.5* />
</Grid.ColumnDefinition>
<Image x:Name="gradientImage" Grid.Row="0" Grid.ColumnSpan="2" Margin="10,10,10,0" />
<Frame x:Name="progressFrame" Grid.Row="0" Width="{Binding Progress}" HorizontalOption="End" BackgroundColor="Gray" ... />
<!-- Labels -->
<Label x:Name="startLbl" Grid.Row="1" Grid.Column="0" Text="{Binding startLabel}" HorizontalOption="Start" />
<Label x:Name="endLbl" Grid.Row="1" Grid.Column="1" Text="{Binding endLabel}" HorizontalOption="End" />
</Grid>
For the gradient progress bar, instead of CustomRenderers you can use an image.
this image will be the full width gradient bar
over this image, like a MASK, there is a frame. You have to compute the frame width depending on the progress value. ==> It will 'make appear" the gradient image smotthly when progress will increase.
Hope you understand the concept :)
Then in the code behind (in your ViewModel ?) manage the start/end label values and the computation of the "progress" value... I presume you will have to make a Binding Converter for: "progress" ==> "bar Width"...
Tell me if it's clear
Wanted to comment on above answer from #KFactory but don't have permission yet.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5* />
<ColumnDefinition Width="0.5* />
</Grid.ColumnDefinition>
Has a few typos. missing end quotes and s on closing tag. Should be
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
I am trying to create a custom, material-style, card cell in my Xamarin Forms app. I have the appearance pretty much down, but I'm having problems with the image in it. I want it to touch the top and bottom edges, the left hand edge, and be a square sort of shape, while maintaining the aspect ratio. But right now, all I get is this small image that won't play ball:
(I've had to cover the company images with paint, but trust me that they're about that size).
Here's what I actually want (again, please excuse the paint job)
I'm using an image in a grid view, in the 1st column and spanning all 4 rows. I've tried all of the LayoutOptions, which I used to understand but now I'm second guessing myself. I've also tried putting the image in a StackLayout as I thought you can expand children of a Stacklayout, but still no dice. Here is my simplified Xaml right now:
<Frame CornerRadius="10"
Margin="10, 5"
IsClippedToBounds="True"
BackgroundColor="White">
<Grid BackgroundColor="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="4"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="{Binding ImageSource}"/>
</StackLayout>
<Label Grid.Row="0" Grid.Column="1"
Text="{Binding Favourite.FavKindName}"
FontSize="{DynamicResource InfoLargerTextFontSize}"/>
<Image Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Source="Contact.png"
VerticalOptions="CenterAndExpand" >
<Image.GestureRecognizers>
<TapGestureRecognizer />
</Image.GestureRecognizers>
</Image>
</Grid>
</Frame>
What's more, you can probably tell I'm pretty clueless about the phone icon on the right. I want that to occupy the centre and be of a decent button size for the card cell.
I've spent hours trying to figure this out. What am I doing wrong?
Frame has a default Padding of 20. That's why you have those margins inside the frame.
<Frame Padding="0" // Here , set padding to 0, so you can fill all Frame space
CornerRadius="10"
Margin="10, 5"
IsClippedToBounds="True"
BackgroundColor="White">
I'm looking for a good way to implement a control that looks like a ListView with 2 columns, where each column has distinct height. As I didn't found another solution, I've decided to do it through a Repeater control.
The expected result is something like this:
All the items come from the same DataSource, and this DataSource will contain between one and a dozen of items.
The items must be splitted automatically (by modulo) into the 2 columns
When the user click on the button related to the item, this will open the item's detail page
The red squares are images that must have the same height/width
I'm working on the design of the cell DataTemplate, but I didn't see how to manage the images:
The distinction between the 2 columns is given by a Grid containing 2 Columns
Then I specify the DataTemplate for each column
<ScrollView>
<Grid Padding="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Col.1 -->
<tabletControls:Repeater Grid.Column="0" Margin="10"
ItemsSource="{Binding ListProductItems}">
<tabletControls:Repeater.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" >
<StackLayout>
<ffimageloading:CachedImage Source="{Binding Icon}"
Aspect="AspectFill"/>
</StackLayout>
...
</StackLayout>
</ViewCell>
</DataTemplate>
</tabletControls:Repeater.ItemTemplate>
</tabletControls:Repeater>
<!-- Col.2 -->
<tabletControls:Repeater Grid.Column="1" Margin="10"
ItemsSource="{Binding ListProductItems}">
<tabletControls:Repeater.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" >
<StackLayout>
<ffimageloading:CachedImage Source="{Binding Icon}"
Aspect="AspectFill"/>
</StackLayout>
...
</StackLayout>
</ViewCell>
</DataTemplate>
</tabletControls:Repeater.ItemTemplate>
</tabletControls:Repeater>
</Grid>
</ScrollView
But this doesn't work as expected, as the image's height/width are not the same:
I already tried to play with Aspect (AspectFill, AspectFit, Fill) or VerticalOptions/HorizontalOptions, withou any result...
Is it possible to achieve the expected result without specify an HeightRequest? Are there other options?
I have a problem in my ListView on iOS. I can't adjust it to all iOS templates, ex: put HeightRequest = "855" on my iPhone 7 it already fits correctly, else on the iPhone 5 and smaller my ListView from a scrow. so I want my ListView to automatically adjust to the screen size.
<ListView x:Name="listView"
CachingStrategy="RecycleElement"
ItemsSource="{Binding FeedItems}"
HasUnevenRows="True"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1" HeightRequest="855">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout HeightRequest = "60" WidthRequest="60">
<Image x:Name="Image" Source="{Binding Image}" Scale="1.0" Aspect="AspectFill" VerticalOptions="FillAndExpand"/>
</StackLayout>
<StackLayout Grid.Column="2" Spacing="4" VerticalOptions="Center">
<Label Text="{Binding Category}" TextColor="White" FontSize="Small" LineBreakMode="NoWrap" BackgroundColor="{Binding Color_category}"/>
<Label Text="{Binding PublishDate}" TextColor="#666666" FontSize="Small" LineBreakMode="NoWrap"/>
<Label Text="{Binding Title}" TextColor="#234084" Font="Bold" FontSize="Small" LineBreakMode="WordWrap"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
To expand a little more.
HeightRequest is used when you want to define a fixed size to an element. Xamarin will make its best to fulfill with this. In the other hand when you want your size to be relative you use the VerticalOptions and HorizontalOptions. This two properties will take a LayoutOptions struct and the default value for this is Fill (without expand).
This struct has two sets of properties, the ones I call "regular"
Center
Start
End
Fll
And the ones that "expands"
CenterAndExpand
StartAndExpand
EndAndExpand
FillAndExpand
You can read more about these here.
This last one FillAndExpand will take all the available space in the orientation it's used. This is the one you should use in your ListView to make it as big as the screen
Hope this helps.-