I want to create this ui design in xamarin forms, as progress bar should look like this vertically.
To make the ProgressBar vertical, I have an easy solution for that.You can refer to the XAML below. It could help you.
Xaml:
<StackLayout Rotation="-90" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<ProgressBar Progress="1" ProgressColor="Orange" >
</ProgressBar>
</StackLayout>
Related
I'm having an issue when displaying a large number of visual elements in a scroll viewer, and I've tried every possible way to achieve the same approach, either with 3rd party horizontal list views (Can't find one with variable column/element width) or with rotated native list view (gives weird results).
The only approach that gives the result is via stacklayout docked in scrollviewer where I populate that stacklayout from code. Now the problem is all elements are rendered even if they were not displayed, so it makes the application either very slow.
I thought about having a recyclerview (which exists in native android) but I can't find an approach for it forms as it only exists in android. Now can anyone help me with that? Maybe a custom view where it uses recycler view on android and any similar approach or maybe a regular scrollviewer on iOS ?
Thanks in advance.
Update #1
I could do the rotated listview option using this code -Inspired by this answer-
<RelativeLayout>
<ListView ItemsSource="{Binding Entries}" Rotation="-90" HasUnevenRows="True"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-37}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=-0.5, Constant=37}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<BoxView Rotation="90" BackgroundColor="Beige" WidthRequest="200"/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativeLayout>
But I can never make this box view fill the while cell, there is always empty space -The box view is a place holder instead of other custom control-.
Is there a method to make the box view always fill the whole cell height and fill and expand it to it's WidthRequest property -Which will be dynamic according to a binding later- ?
I have found a workaround for such an issue by using a listview with custom template, where I inside of it I used several scrollviews and linked their movement together. Refer to my answer here: How to make multiple list views scroll together?
To make a chat page, I followed an example I found that sets the ListView rotation to 180, so the list builds from the bottom and then set things in the DataTemplate to rotate 180, so the items will be upright. It's a great solution, but when the keyboard opens, the ListView gets shorter which causes a redraw. During the redraw, the ListView initially appears with rotation 0 and I see an animation as if RotateTo(360) is being called. After initially displaying, I get to watch the list view rotate around in full circle. Click off the message editor, and the ListView gets taller, and it does it again.
Has anyone seen this?
Here's what the Xaml looks like. I can't make a gif of what it looks like, but imagine watching:
MessageList.Rotation = 0;
MessageList.RotateTo(360, 500, Easing.Linear);
each time the keyboard shows and hides, and you'll get the idea...
<ListView
X:Name="MessageList"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
Rotation="180"
ItemsSource="{Binding ChatMessages}"
SelectionMode="None"
HasUnevenRows="True"
SeparatorColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame
BackgroundColor="LightGray"
FlowDirection="LeftToRight"
Rotation="180"
Padding="10"
HasShadow="false"
Margin="80,2,0,5">
<Label Text="{Binding ChatText}"/>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I followed the same tutorial you mentioned and you are probably using a ContentPage renderer to handle your keyboard layout updates on iOS. If you check the sample project https://github.com/rdelrosario/ChatUIXForms you'll notice he resizes the keyboard ContentView with a ContentView renderer for the Editor box at the bottom using the Margin property, rather than the entire ContentPage. Which doesn't trigger the above issue.
What I wound up doing was to make a custom ListView renderer that was keyboard aware in iOS and sets a translation X to move the top of the listview up when the keyboard appears and back down when it goes away. As a result, the listview is not getting resized, and thus does not redraw.
It may be messy, but it makes it work...
I've heard a couple things about ListView.
it takes up the full height of its container
on iOS it just goes ahead and adds empty rows until it takes up the full height
you have to use HasUnevenRows=True to be able to set its height even if all your rows are the same height.
It sure would be great if there were a way to get ListView to not display those extra empty rows though, right? Well, that's what I am trying to do.
<ListView
BackgroundColor="Green"
ItemsSource="{Binding Things}"
HasUnevenRows="True"
HeightRequest="5"> <!-- In the real code I am setting this in a ValueConverter. It's hard coded here for simplicity. -->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="This is text." />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Except I don't even know what it could possibly be doing. Here I use HeightRequest=5 and HeightRequest=50 there is a difference. But I can't tell what it is.
What's going on here?
Now this is a very interesting question. We have had similar issues with ListViews as unfortunately that unlimited scrolling is actually a standard behaviour on iOS, so you have to think of way around it. The way we have done it is basically count the amount of items within the list, this is pretty straight forward, because you only have to call for ListOfItems.Count. Next thing you want to do, you want to get the Height of your Single DataTemplate item. When you do that then just multiple count of your items by Height of single item and set that Value to HeightRequest. It is not ideal, but it does a job.
I understand why this works. What I don't understand is why the 50 other ways I tried did not work. So from that point of view I have no idea why this works.
Wrap it in a StackLayout:
<StackLayout>
<ListView
BackgroundColor="Green"
ItemsSource="{Binding Things}"
HasUnevenRows="True"
HeightRequest="5"> <!-- In the real code I am setting this in a ValueConverter. It's hard coded here for simplicity. -->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text="This is text." />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
It might seem relevant at first but I'm not sure. My ListView was in a grid so it had
<ListView
Grid.Row="1"
Grid.Column="1"
... />
Which got moved into the StackLayout. Again, I know that seems glaringly relevant but I have my doubts. Unfortunately I don't have the time to rip everything out just to test that idea out.
Context
I am discovering step by step Exrin infrastructure. I explored that there are many ready to use infra element to implement command execution in background. Among those I see IsBusyDelay, VisualState.IsBusy, Timeout message, etc. I also know that Exrin does not depend on Xamarin.Forms, so I suppose, no real visual implementation should be provided by Exrin, that very last step remains on me. (which is cool, let me decide the UI experience)
In my ViewModel I set IsBusyDelay = 1000;. The background task is started by Execution.ViewModelExecute(... my task here ..., currently 5000msec delay )
Question
I suppose now I have to implement somewhere a handler(s) or override(s) which will be called automatically, and implement some visual UX to show and hide the a busy/inprogress UX feedback. I just do not know where and how...
This is something you would implement yourself in the view. For example, if you wanted something that covered the whole screen, with a loading indicator, you would add this to your UI.
<Grid HorizontalOptions="FillAndExpand"
IsVisible="{Binding VisualState.IsBusy}"
BackgroundColor="#E6272C30"
VerticalOptions="FillAndExpand">
<Grid HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
Height="200">
<ActivityIndicator Grid.Row="0"
IsRunning="{Binding VisualState.IsBusy}"
IsVisible="{Binding VisualState.IsBusy}">
<ActivityIndicator.Scale>
<OnPlatform x:TypeArguments="x:Double" Android="1" iOS="1.3" />
</ActivityIndicator.Scale>
</ActivityIndicator>
</Grid>
</Grid>
You would add this at the bottom of the page, inside your existing Grid.
Then when IsBusy is trigger, it shows this as an overlay, with the activity indicator.
Of course that is only one way to do it. You could just have an activityindicator next to, or inside a button that was just clicked, or anything similar. It all depends on your UI design.
My LongListSelector is not scrolling properly. When I scroll the list, it automatically reaching back to the top with its rubber band effect.
xaml is
<Grid x:Name="ContentPanel" Height="2000">
<toolkit:LongListSelector x:Name="ItemList" DataContext="Item" IsFlatList="True" StretchingBottom="LoadMoreData">
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Tag="{Binding ItemID}" Loaded="Grid_Loaded" MaxWidth="361" MaxHeight="100">
// some xaml code
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
</toolkit:LongListSelector>
</Grid>
can anyone help me ?
thanku
It's not scrolling correctly because you set the Height of the parent Grid to 2000. This causes the LongListSelector to take as much space as it may need as long as it's less than 2000 and only then starts scrolling. Considering you only have 800 (or a bit more) of height, you don't see the scrolling properly.