How to use RCL as assembly in Maui project?

Question

It seems that I don't understand how to properly connect rcl to the Maui project. And I can't find approach that will help me.

In the example below I tried to reuse component from the RCL. Firstly css doesn't work at all. I tried a lot of stuff, but nothing give the expected result. These are some attempts add it to index.html.

<link href="_content/RCL7/RCL7.bundle.scp.css" rel="stylesheet" />
<link href="_content/RCL7/RCL7.styles.css" rel="stylesheet" />
<link href="css/RCL7.styles.css" rel="stylesheet" />
<link href="_content/RCL7/css/styles.css" rel="stylesheet" />

I have read a lot about css isolation, but it doesn't work for me, or I just don't understand how to use it properly. Secondly I tried to use static files from the wwwroot folder. You can see shared component from RCL

<div class="my-component">
    This component is defined in the <strong>RCL7</strong> library.
    <img class="spinner" src="background.png" width="64" alt="Loading..." />
</div>

and it has an image with the svg icon. In the Maui project I tried to add this component to the Index page.

    @page "/"

<h1>Hello, world!</h1>

<RCL7.Component1 />

Welcome to your new app.

<img class="spinner" src="_content/RCL7/img/clock.svg" width="64" alt="Loading..." />

And tried to add svg icon directly from the wwwroot folder. But both of them give me the same result that it can't find the icon... Here is the link to GitHub for this testing project - https://github.com/BeaverMyName/MauiTesting7. I will be very grateful if you can help me to understand what is wrong with my approach. Thank you.

You should also show code directly in the question rather that as images. - see https://meta.stackoverflow.com/questions/285551/why-should-i-not-upload-images-of-code-data-errors/285557#285557 — MrC aka Shaun Curtis, Feb 13 '23 at 13:41
@MrCakaShaunCurtis Thank you. I changed it according to your advice. — Beaver, Feb 13 '23 at 14:21

score 1 · Answer 1 · answered Feb 13 '23 at 14:48

1

Based on your Github project you need to do two things:

You need to reference the RCL7 project in TheMauiTesting7 for any _content/??? references to work.

Here's the entry in the project file:

    <ItemGroup>
      <ProjectReference Include="..\RCL7\RCL7\RCL7.csproj" />
    </ItemGroup>

In your library component you need to reference the image correctly i.e. the fully qualified path from any site using the library:

<div class="my-component">
    This component is defined in the <strong>RCL7</strong> library.
    <img class="spinner" src="/_content/RCL7/img/clock.svg" width="64" alt="Loading..." />
</div>

The net result is:

answered Feb 13 '23 at 14:48

MrC aka Shaun Curtis

19,075
3
13
31

Hi, thank you for the answer. So I must add it as a project? I can't just use it as a dll file (assembly reference)? – Beaver Feb 13 '23 at 15:37
I don't believe so for mapping resources. Either a directly linked project, or a Nuget package. – MrC aka Shaun Curtis Feb 13 '23 at 16:36
@Beaver You can refer to this case: [Project reference vs. DLL Reference - Which is better?](https://stackoverflow.com/questions/3047733/project-reference-vs-dll-reference-which-is-better). It talks about project and dll. – Jianwei Sun - MSFT Feb 14 '23 at 05:22
@JianweiSun-MSFT Yes, I understand it. The problem is that RCL located in a separate repo. Therefore I can't refer to it as a project. That is why I asked about the assembly reference. – Beaver Feb 14 '23 at 09:33

How to use RCL as assembly in Maui project?

1 Answers1