DEV Community

Cover image for Hackathon - Hack Together: Microsoft Graph and .NET πŸ¦’ - Day 06
Emanuele Bartolesi
Emanuele Bartolesi

Posted on


Hackathon - Hack Together: Microsoft Graph and .NET πŸ¦’ - Day 06

Today I worked on the UI. Only on the UI.
I was hoping there would be something on FluentUI for drawing a layout, but after a bit of searching in the documentation, I didn't actually find anything.

This is the reason why I created a three columns layout manually.

First of all I added the following code in the app.css file:

.row {
    display: flex;

.column {
    flex: 33.33%;
    height: 400px;
    padding: 8px;
    margin: 12px;
    text-align: center;
Enter fullscreen mode Exit fullscreen mode

Using flex for this kind of layout is very easy and I think it's the fastest way to create a simple columns layout like this.

Then I changed the index.razor and I added a div around the three Fluent Card with the class "row" I have created one step before.

        <div class="row">

            <M365.Today.Components.CalendarCard />

            <M365.Today.Components.MailCard />

            <M365.Today.Components.ToDoCard />

Enter fullscreen mode Exit fullscreen mode

Then I changed each Fluent Card by adding the class "column" to the element.
This is the example of the TodoCard:

    <FluentCard Class="column">
        <div class="contents">
            <FluentIcon Name="@FluentIcons.Check" Size="@IconSize.Size32" Variant="@IconVariant.Regular" Color="@Color.Accent" />
            <div data-is-scrollable="true">
                <FluentDataGrid RowsData="@todos">
                    <PropertyColumn Property="@(p => p.Title)" Title="Title" />
                    <PropertyColumn Property="@(p => Convert.ToDateTime(p.DueDateTime.DateTime))" Format="MM-dd-yyyy" Title="Due Date" />
Enter fullscreen mode Exit fullscreen mode

I wanted to add some colours and a good background to the page. I decided to use the Bing image of the day.
After a quick search, I founded the following repository on

GitHub logo TimothyYe / bing-wallpaper

A RESTful API to fetch daily wallpaper from

Bing Wallpaper API

A RESTful API to fetch daily wallpaper from




  • resolution The resolution of wallpaper image. 1920 is the default value, you can also use 1366 and 3840(4K resolution).
  • format The response format, can be json or image. If response format is set as image, you will be redirected to the wallpaper image directly.
  • index The index of wallpaper, starts from 0. By default, 0 means to get today's image, 1 means to get the image of yesterday, and so on. Or you can specify it as random to choose a random index between 0 and 7.
  • mkt The region parameter, the default value is zh-CN, you can also use en-US, ja-JP, en-AU, en-UK, de-DE, en-NZ, en-CA. You can also set it as random to choose the…

I changed again the app.css file by adding a customization for the body element:

body {
    background-image: url(;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
Enter fullscreen mode Exit fullscreen mode

As I read in the documentation, it's possible to use the API directly in the CSS to add the image as background.

This is the result:

the result

Not the best page in the world, but start to be a good page in terms of layout cleaning and good UI.

Are you interested in learning GitHub but don't know where to start? Try my course on LinkedIn Learning: Learning GitHub.

LinkedIn Learning

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out πŸ™‚

Top comments (0)