Replicating Habit Tracker UI with ProgressRing in Uno Platform
This article will review the essential steps of replicating a user interface using Uno Platform XAML elements. We’ve also incorporated some refinements to the original design, emphasizing the functionalities of essential elements like ProgressRing, Borders, TextBlock, and more.
This article will cover
- 1. Breaking down the UI into blocks will help you work more methodically and give you insight into which elements to incorporate.
- 2. Coding each block step by step: After identifying the visual blocks to develop, we will build our UI.
- 3. Implementing ProgressRing control available in Uno Platform.
TLDR: Build a mobile user interface using Uno Platform, covering both the analysis of the UI and the step-by-step coding process for different UI elements, including implementing a ProgressRing control.
Breaking Down the Visual Structure of the UI
First, let’s take a look at the Habit Tracker UI we will replicate based on a home screen idea design by Alexandre Naud
To gain a better understanding of how to translate each UI block into functional code, we will divide the UI structure into the following two blocks:
Step 1 - Main Layout Structure
To start, we’ll create the main layout structure using a Grid to house all the code blocks described in this article.
<!--Main layout structure -- >
<Grid Padding="10,20,10,0" ColumnSpacing="20" RowDefinitions="Auto,*" ColumnDefinitions="Auto,*,Auto" Background="Black">
<!-- Add the Header code block-- >
<!-- Add the Home ideas list code block -- >
</Grid>
Follow Along with our Code Samples
Did you know you can access the code sample for this tutorial in our Uno.Samples repo? It's an excellent resource for hands-on experience with the concepts we're discussing.
Try it and see how to apply what you've learned so far!
Code Explanation
Step 2 - Building our Header
Translating our Header into Code
<!--1. Header -->
<!-- Order Button -->
<Button Grid.Column="0" Grid.Row="0" Background="#282929" Height="40" Width="40" CornerRadius="5" Margin="10,0,0,0">
<Image Source="Assets/add"/>
</Button>
<!--Title-->
<TextBlock Text="Combiien" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" Foreground="White" VerticalAlignment="Center"/>
<!-- Add Button-->
<Button Grid.Column="2" Grid.Row="0" Background="#282929" Height="40" Width="40" CornerRadius="5" Margin="0,0,10,0">
<Image Source="Assets/order"/>
</Button>
<!-- Add here the following block of code -- >
Step 3 - Habit List
Building our List
public class Ideas
{
public string Percentage { get; set; }
public string PercentageColor { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public string Amount { get; set; }
public string AmountType { get; set; }
}
[elementor-element k="0f17c3bcf2fa6e7113c1ec2c9e85ed03" data="eyJpZCI6IjU1MDIyNTNiIiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPGRpdiBkYXRhLW1laXN0ZXJub3RlPVwidHJ1ZVwiPjxwPk1vdmluZyBvbiwgd2UnbGwgcG9wdWxhdGUgdGhpcyBtb2RlbCB3aXRoIG1vY2sgZGF0YS4gV2UnbGwgdXNlIGEgc2ltcGxlIGV4YW1wbGUgdG8gZGlzcGxheSB0aGUgbGlzdCBieSBmaWxsaW5nIGl0IGRpcmVjdGx5IGluIHRoZSBNYWlucGFnZS54YW1sLmNzIGZpbGUuIEhvd2V2ZXIsIHlvdSBjYW4gY2hvb3NlIHRoZSBtZXRob2QgdGhhdCB3b3JrcyBiZXN0IGZvciB5b3UuXHUwMGEwPFwvcD48cD5PbmNlIHdlJ3JlIGluIHRoZSA8c3Ryb25nPk1haW5QYWdlLnhhbWwuY3M8XC9zdHJvbmc+IGZpbGUsIHdlJ2xsIGNyZWF0ZSBhIG5ldyBtZXRob2QgY2FsbGVkIDxzdHJvbmc+R2VuZXJhdGVJbmZvPFwvc3Ryb25nPiwgd2hpY2ggd2lsbCBsb29rIGxpa2UgdGhpczo8XC9wPjxcL2Rpdj4iLCJ0eXBvZ3JhcGh5X3R5cG9ncmFwaHkiOiJjdXN0b20iLCJ0eXBvZ3JhcGh5X2ZvbnRfZmFtaWx5IjoiUm9ib3RvIiwidHlwb2dyYXBoeV9mb250X3dlaWdodCI6IjQwMCIsInRleHRfY29sb3IiOiIjMjQyNDI0IiwicGFfY29uZGl0aW9uX3JlcGVhdGVyIjpbXSwicGFfY3Vyc29yX2Z0ZXh0IjoiUHJlbWl1bSBGb2xsb3cgVGV4dCIsInBhX2JhZGdlX3RleHQiOiJOZXciLCJwcmVtaXVtX21zY3JvbGxfcmVwZWF0ZXIiOltdfSwiZWxlbWVudHMiOltdLCJ3aWRnZXRUeXBlIjoidGV4dC1lZGl0b3IifQ=="]
[elementor-element k="0f17c3bcf2fa6e7113c1ec2c9e85ed03" data="eyJpZCI6IjUzM2M4NjI2IiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiZWRpdG9yIjoiPHA+PHNwYW4gc3R5bGU9XCJmb250LXdlaWdodDogNDAwO1wiPlRoZW4geW91IGp1c3QgaGF2ZSB0byBjYWxsIHRoZSBsaXN0IGluIHlvdXIgPHN0cm9uZz5NYWluUGFnZS54YW1sPFwvc3Ryb25nPjo8XC9zcGFuPjxcL3A+IiwidHlwb2dyYXBoeV90eXBvZ3JhcGh5IjoiY3VzdG9tIiwidHlwb2dyYXBoeV9mb250X2ZhbWlseSI6IlJvYm90byIsInR5cG9ncmFwaHlfZm9udF93ZWlnaHQiOiI0MDAiLCJ0ZXh0X2NvbG9yIjoiIzI0MjQyNCIsInBhX2NvbmRpdGlvbl9yZXBlYXRlciI6W10sInBhX2N1cnNvcl9mdGV4dCI6IlByZW1pdW0gRm9sbG93IFRleHQiLCJwYV9iYWRnZV90ZXh0IjoiTmV3IiwicHJlbWl1bV9tc2Nyb2xsX3JlcGVhdGVyIjpbXX0sImVsZW1lbnRzIjpbXSwid2lkZ2V0VHlwZSI6InRleHQtZWRpdG9yIn0="]
[elementor-element k="0f17c3bcf2fa6e7113c1ec2c9e85ed03" data="eyJpZCI6IjZkODQxNWYiLCJlbFR5cGUiOiJ3aWRnZXQiLCJzZXR0aW5ncyI6eyJlZGl0b3IiOiI8cD5Ob3cgdGhhdCB3ZSBoYXZlIG91ciBtb2NrIGRhdGEsIHdlIG5lZWQgdG8ga25vdyBob3cgdG8gZGlzcGxheSBpdCBvbiB0aGUgc2NyZWVuLiBUbyBhY2hpZXZlIHRoaXMsIHdlIHdpbGwgaW1wbGVtZW50IGEgPHN0cm9uZz5MaXN0VmlldzxcL3N0cm9uZz4gYW5kIGluY2x1ZGUgYSA8c3Ryb25nPlN0YWNrUGFuZWw8XC9zdHJvbmc+IHRvIG9yZ2FuaXplIHRoZSByZW1haW5pbmcgZWxlbWVudHMuPFwvcD4iLCJ0eXBvZ3JhcGh5X3R5cG9ncmFwaHkiOiJjdXN0b20iLCJ0eXBvZ3JhcGh5X2ZvbnRfZmFtaWx5IjoiUm9ib3RvIiwidHlwb2dyYXBoeV9mb250X3dlaWdodCI6IjQwMCIsInRleHRfY29sb3IiOiIjMjQyNDI0IiwicGFfY29uZGl0aW9uX3JlcGVhdGVyIjpbXSwicGFfY3Vyc29yX2Z0ZXh0IjoiUHJlbWl1bSBGb2xsb3cgVGV4dCIsInBhX2JhZGdlX3RleHQiOiJOZXciLCJwcmVtaXVtX21zY3JvbGxfcmVwZWF0ZXIiOltdfSwiZWxlbWVudHMiOltdLCJ3aWRnZXRUeXBlIjoidGV4dC1lZGl0b3IifQ=="]
public readonly ObservableCollection<Ideas> ideas;
public void GenerateInfo()
{
// Home ideas list
ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#ffa500", Title = "Walking", Description = "How Many in May?", Amount = "24.08", AmountType = "km" });
ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#164734", Title = "Vacations in France", Description = "Budget with Emma", Amount = "72.000", AmountType = "USD" });
ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#01abf3", Title = "Reading", Description = "Goal: Read 16 books a year", Amount = "12", AmountType = "/16" });
ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#ff4582", Title = "Quit Smoking", Description = "Last cigare on 0420", Amount = "24.08", AmountType = "km" });
ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#ffa500", Title = "Walking", Description = "How Many in May?", Amount = "24.08", AmountType = "km" });
ideas.Add(new Ideas() { Percentage = "50%", PercentageColor = "#164734", Title = "Vacations in France", Description = "Budget with Emma", Amount = "72.000", AmountType = "USD" });
}
public MainPage()
{
this.InitializeComponent();
ideas = new ObservableCollection<Ideas>();
GenerateInfo();
}
<!--2. Home list ideas -->
<ListView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" ItemsSource="{x:Bind ideas}" SelectionMode="None" Padding="0,20,0,0">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Ideas">
<StackPanel Margin="0,5">
<!-- Add the Ideas details card -->
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Ideas Detail Card
This information will be divided into two Borders elements, so add the following code right in the part of the previous block that says “<!– Add the Ideas details card — >”
As you can see, I have left comments within each block to guide you in locating the remaining elements needed to build.
<!-- Main Information -->
<Border Background="#282929" BorderThickness="0.8" Height="65" CornerRadius="8,8,0,0" HorizontalAlignment="Stretch" Margin="0,5,0,0">
<Grid RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,*,Auto" Padding="20,10"
RowSpacing="5" VerticalAlignment="Center">
<!-- Add the Progress Information -- >
<!-- Add the Card’s title and description -- >
<!-- Add the Card’s amount and type -- >
</Grid>
</Border>
<!--Actions Information-->
<Border Background="#141414" BorderThickness="0.8" Height="30" CornerRadius="0,0,8,8" HorizontalAlignment="Stretch">
<Grid RowDefinitions="Auto" ColumnDefinitions="*,*,*" Padding="20,0" RowSpacing="5" VerticalAlignment="Center">
<!-- Add the Card’s actions-- >
</Grid>
</Border>
Did you know?
There are two implementations of the ProgressRing control available in Uno Platform:
Windows.UI.Xaml.Controls.ProgressRing - "WUX ProgressRing" - implementation based on the built-in control in Universal Windows Platform, with support for both native & UWP styling.
Microsoft.UI.Xaml.Controls.ProgressRing - "MUX ProgressRing", implementation based on WinUI 2.x and WinUI 3.
Progress Information
Card Title and Description
<!-- Graphic information -->
<ProgressRing Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center" Foreground="{x:Bind PercentageColor}" Height="50" Width="50" Margin="0,0,15,0" />
<!-- Text information -->
<TextBlock Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Center" Text="{x:Bind Percentage}" FontWeight="Bold" FontSize="12" Foreground="{x:Bind PercentageColor}" Padding="15,0,10,0"/>
<!-- Add here the following block of code -- >
<TextBlock Grid.Row="0" Grid.Column="1" Text="{x:Bind Title}" VerticalAlignment="Bottom" Foreground="White" FontSize="12"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{x:Bind Description}" VerticalAlignment="Top" Foreground="#8d8e8f" FontSize="12"/>
<!-- Add here the following block of code -- >
Card Amount and Type
<TextBlock Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" VerticalAlignment="Center">
<Run Text="{x:Bind Amount}" Foreground="White" FontSize="18"/>
<Run Text="{x:Bind AmountType}" Foreground="#abadae" FontSize="11"/>
</TextBlock>
Card Actions
<TextBlock Grid.Row="1" Grid.Column="0" Text="Less" Foreground="#8d8e8f" FontSize="12" HorizontalAlignment="Left"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Options" Foreground="#8d8e8f" FontSize="12" HorizontalAlignment="Center"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="More" Foreground="#8d8e8f" FontSize="12" HorizontalAlignment="Right"/>
Final Result
Next Steps
[elementor-element k="0f17c3bcf2fa6e7113c1ec2c9e85ed03" data="eyJpZCI6Ijc5ZjE4MDAiLCJlbFR5cGUiOiJ3aWRnZXQiLCJzZXR0aW5ncyI6eyJzb3VyY2UiOiJjdXN0b20iLCJhdXRob3JfYXZhdGFyIjp7InVybCI6Imh0dHBzOlwvXC91bm8td2Vic2l0ZS1hc3NldHMuczMuYW1hem9uYXdzLmNvbVwvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyM1wvMDlcLzE4MTQxMTA4XC9sZW9tYXJpcy5qcGciLCJpZCI6MTYxNTksInNpemUiOiIiLCJhbHQiOiJsZW9tYXJpcyBSZXllcyIsInNvdXJjZSI6ImxpYnJhcnkifSwiYXV0aG9yX25hbWUiOiJMZW9tYXJpcyBSZXllcyIsImF1dGhvcl93ZWJzaXRlIjp7InVybCI6Imh0dHBzOlwvXC90d2l0dGVyLmNvbVwvTGVvbWFyaXNSZXllczExIiwiaXNfZXh0ZXJuYWwiOiIiLCJub2ZvbGxvdyI6IiIsImN1c3RvbV9hdHRyaWJ1dGVzIjoiIn0sImF1dGhvcl9iaW8iOiJGb2xsb3cgTGVvbWFyaXMgb24gVHdpdHRlciIsImxpbmtfdGV4dCI6IkFsbCBQb3N0cyIsImltYWdlX3ZlcnRpY2FsX2FsaWduIjoibWlkZGxlIiwiaW1hZ2Vfc2l6ZSI6eyJ1bml0IjoicHgiLCJzaXplIjo3Miwic2l6ZXMiOltdfSwiaW1hZ2VfZ2FwIjp7InVuaXQiOiJweCIsInNpemUiOjEyLCJzaXplcyI6W119LCJiaW9fY29sb3IiOiIjQTRBNEVDIiwiYmlvX2dhcCI6eyJ1bml0IjoicHgiLCJzaXplIjowLCJzaXplcyI6W119LCJwYV9jb25kaXRpb25fcmVwZWF0ZXIiOltdLCJwYV9jdXJzb3JfZnRleHQiOiJQcmVtaXVtIEZvbGxvdyBUZXh0IiwicGFfYmFkZ2VfdGV4dCI6Ik5ldyIsInByZW1pdW1fbXNjcm9sbF9yZXBlYXRlciI6W119LCJlbGVtZW50cyI6W10sIndpZGdldFR5cGUiOiJhdXRob3ItYm94In0="]
[elementor-element k="0f17c3bcf2fa6e7113c1ec2c9e85ed03" data="eyJpZCI6IjJkYzAwYzk2IiwiZWxUeXBlIjoid2lkZ2V0Iiwic2V0dGluZ3MiOnsiaWNvbl9saXN0IjpbeyJfaWQiOiI1ZDhmZmRjIiwidHlwZSI6InRlcm1zIiwiY3VzdG9tX2RhdGVfZm9ybWF0IjoiRiBqLCBZIiwiY3VzdG9tX3RpbWVfZm9ybWF0IjoiZzppIGEiLCJ0YXhvbm9teSI6InBvc3RfdGFnIiwic2hvd19pY29uIjoibm9uZSJ9XSwic3BhY2VfYmV0d2VlbiI6eyJ1bml0IjoicHgiLCJzaXplIjoyMywic2l6ZXMiOltdfSwiZGl2aWRlciI6InllcyIsImRpdmlkZXJfd2VpZ2h0Ijp7InVuaXQiOiJweCIsInNpemUiOjIsInNpemVzIjpbXX0sImRpdmlkZXJfaGVpZ2h0Ijp7InVuaXQiOiIlIiwic2l6ZSI6MTAwLCJzaXplcyI6W119LCJpY29uX3NpemUiOnsidW5pdCI6InB4Iiwic2l6ZSI6MTAsInNpemVzIjpbXX0sImRpdmlkZXJfY29sb3IiOiIjMjQyNDI0IiwidGV4dF9jb2xvciI6IiMyNDI0MjQiLCJwYV9jb25kaXRpb25fcmVwZWF0ZXIiOltdLCJwYV9jdXJzb3JfZnRleHQiOiJQcmVtaXVtIEZvbGxvdyBUZXh0IiwicGFfYmFkZ2VfdGV4dCI6Ik5ldyIsInByZW1pdW1fbXNjcm9sbF9yZXBlYXRlciI6W119LCJlbGVtZW50cyI6W10sIndpZGdldFR5cGUiOiJwb3N0LWluZm8ifQ=="]
Tags: