Any idea how to create this. I am using ProgressRingBar but it has some limitations. I want to show progress in percentage also inside the ring. Which is not possible with this
Any other way to achieve this for both Android and iOS platforms
Got this working:
<control:ProgressRing Margin = "165,0,-20,40" Grid.Row="0" Grid.Column="1" HeightRequest= "40" RingProgressColor="#ebf5e4" RingBaseColor="LightGray" RingThickness="25" AnimatedProgress="{Binding Progress}" AnimationEasing="2" />
<Label x:Name="LabelProgress" Margin = "200,0,-20,40" Grid.Row="0" Grid.Column="1" FontSize="Micro" Text="{Binding ProgressPercentage}" WidthRequest="50" HeightRequest="20" VerticalOptions="Center" HorizontalOptions="Center" />
I use a label with a ProgressRing to show the percentage of progress. This works for me.
Related
Good day fellow code ninjas!!!
Using a '< TabbedPage/ >' in Xamarin forms I can easily create a tab bar at the top of my page. I would however like to have two tab bars instead of one. For example, 3 tab buttons in the first tab bar row and another 3 in the second row and the user being able to navigate between all 6 pages.
Does anyone perhaps know if this is possible in Xamarin forms and/or if there is any documentation that might assist.
You could use the TabView from the Xamarin Community Toolkit in addition to your TabbedPage 😉. Here's how it works:
<Grid>
<xct:TabView>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
If you put a TabView in each of your TabBar contents you will be able to get the result you want.
In your case, it would be something like this:
<ContentPage Title="Tab 1">
<xct:TabView>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</ContentPage>
<ContentPage Title="Tab 2">
<xct:TabView>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem>
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</ContentPage>
If you want to see more about TabViews, there is a great article posted by Gerald Versluis, that explains it perfectly: https://devblogs.microsoft.com/xamarin/xamarin-community-toolkit-tabview/
Give it a try with James Montemagno youtube channel
EDIT
here is the official github link for the library used by that video
https://github.com/roubachof/Sharpnado.Tabs
I have a Xamarin Carousel view with the PeakAreaInsets set pretty high so that I can see multiple items in the list at once. However I notice that the current item when set to snap, aligns it self more with the top of the page when I would like it to snap to the center of the page. How can I accomplish this?
Here is a snippet of the code in question:
<ContentPage.Content>
<CarouselView ItemsSource="{Binding Days}"
CurrentItem="{Binding SelectedDay}"
VerticalOptions="Center"
HorizontalOptions="Center"
PeekAreaInsets="300"
x:Name="DayCarousel">
<CarouselView.ItemsLayout>
<LinearItemsLayout SnapPointsAlignment="Center"
SnapPointsType="Mandatory"
Orientation="Vertical"/>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout Spacing="0"
Orientation="Vertical"
HorizontalOptions="Center"
VerticalOptions="Center"
Margin="30,10">
<Label Text="{Binding FormattedDate}"
HorizontalOptions="Center"
VerticalOptions="Center"
Style="{StaticResource LabelStyle}"/>
<Label Text="{Binding TitleText}"
HorizontalOptions="Center"
VerticalOptions="Center"
Style="{StaticResource LabelHeader1Style}"/>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.SelectDay, Source={x:Reference this}}"
CommandParameter="{Binding .}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</ContentPage.Content>
Here is about what it looks like now (just a mock up):
And here is what I would like it to look like:
I ended up playing around with it for a bit. I'm not sure how its going to look on other phone formats and sizes since I haven't tested that yet. But eventually I found a happy medium after tweaking the PeakAreaInsets, and adjusting the SnapPointsAlignment. Currently I have it set to PeakAreaInsets = 350 and SnapPointsAlignment="Start"
I'm trying to add a progress bar in Xamarin Forms within my XAML. But the default progress bar gives me only one type of colour without labels on both ends and the 2 circled points on both ends as shown in the image below:
Further, I am unable to add the progress bar inside the frame. My code is as follows:
<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 as in the image ?
A frame can only hold one element as content.
You can solve that by putting a layout such as a Grid or a StackLayout into the content property of your frame.
<Frame.Content>
<StackLayout Orientation="Vertical">
<Label Text="%" HorizontalTextAlignment="End" FontSize="Small"/>
<ProgressBar x:Name="myProgressBar" WidthRequest="100"
HeightRequest="15" VerticalOptions="Center" HorizontalOptions="Center" Progress="0.2"/>
</StackLayout>
</Frame.Content>
Regarding your progress bar, you will have to implement a custom renderer, which will fill the progress bar with a gradient instead of a simple fill color.
I'm styling in Xamarin Forms. I have problem with align Vertical 2 label other size:
This is my XAML code:
<StackLayout HorizontalOptions="EndAndExpand" Grid.Row="0" Grid.Column="1">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="03" FontSize="42" FontAttributes="Bold" Style="{StaticResource LabelNormal}" HorizontalTextAlignment="End" VerticalTextAlignment="End" />
<Label Text="\20" Style="{StaticResource LabelNormal}" HorizontalTextAlignment="End" VerticalTextAlignment="End" />
</StackLayout>
<Label Text="Chưa xỠlý" Style="{StaticResource LabelNormal}" HorizontalTextAlignment="End" />
</StackLayout>
I want "30" and "/20" are straight on bottom. How I can do it?
Resovled
This is my simple solution. I added Margin-bottom is "-7" and it worked.
<Label Text="03" FontSize="42" FontAttributes="Bold" Style="{StaticResource LabelNormal}" HorizontalTextAlignment="End" VerticalTextAlignment="End" Margin="0,0,0,-7" />
While your solution is working it might be not the best, please consider the next topics:
Negative values in padding can introduce inconsistent side effects on different screens and platforms. It should be considered as a very dirty hack and should be avoided.
Performance. It seems that you overused StackLayout. Try Grid, it will reduce the amount of UI elements to render and will increase the loading time.
Good luck!
I'm having a cell view with nested StackLayouts, there's one label that will be wrapped if the text is long, which is the desired behaviour. However, the wrap breaks the LayoutOptions set to (basically) all parent views resulting in a gray gap on the right hand side.
<StackLayout Orientation="Horizontal" BackgroundColor="Gray" Margin="0,30,0,0">
<BoxView
HorizontalOptions="Start"
BackgroundColor="#EEBB00"
WidthRequest="100"
/>
<StackLayout
BackgroundColor="#CC4400"
HorizontalOptions="FillAndExpand"
>
<BoxView
BackgroundColor="Green"
HeightRequest="10"
HorizontalOptions="FillAndExpand"
/>
<Label
FontSize="16"
HorizontalOptions="FillAndExpand"
Text="Name that is toolongandwillbewrapped"
/>
<StackLayout
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
BackgroundColor="Blue"
>
<Label
FontSize="13"
Text="Left"
TextColor="White"
HorizontalOptions="StartAndExpand"
VerticalTextAlignment="End"
/>
<Label
FontSize="13"
Text="Right"
TextColor="White"
HorizontalOptions="EndAndExpand"
VerticalTextAlignment="End"
/>
</StackLayout>
</StackLayout>
</StackLayout>
The resulting views are:
So I can tell why this is happening, but well, of course I don't like it. The expected behaviour is for the right-hand-side stacklayout to expand all the way to the right. I've tried various ways to circumvent this and would not be here if I had succeeded. Does anybody have an idea?
Unfortunately, it's a bug in Xamarin.Forms (probably, iOS-only).
Bugzilla #28650
Bugzilla #31128
Bugzilla #33841
The workaround in that case is using Grid instead of StackLayout : http://forums.xamarin.com/discussion/comment/152969/#Comment_152969