오랜만에 글을 씁니다.
소개할 내용은 이것인데요.
물론 avalonia 만큼 강력하겠나 의문이지만, 샘플을 돌려 보았을땐 꾀나 잘 돌아 갑니다.
XAML과 Blazor 를 한 파일 안에서 혼용도 가능 하네요.
년 20만달러 수익전까진 무료라고 합니다.
오랜만에 HTML 하다가 답답해서 검색하니 나오네요.
(아마도 닷넷데브에선 처음 소개 하는듯 합니다)
Only “Blazor WebAssembly ” is supported at the moment (“Blazor Server ” is on the roadmap)
아직은 살짝 아쉽긴 하지만, 엄청 흥미로운 도구인 점에선 이견이 없다고 생각합니다.
엄청 신기하네요!!!
블레이저 웹에 Xaml을 쓸수 있는 느낌인건가요 신기하네요 ㅋ_ㅋ;
웹뷰가 아니라 자물뷰 인 느낌…
근데 Uno 보니까 xaml로 웹디자인이 되더라구요… 신기… 더군다나 모든 디바이스가 다되는…
아하, Uno도 한 프로젝트에 HTML 과 XAML을 혼용하여 GUI 구성이 가능 한가보죠?
외설이지만…XAML에 HTML을 쓴다고 말씀하시길래…
저 제품을 만든 회사에서는 OpenSilver라는 오픈소스 프레임워크가 있습니다.
OpenSilver 컨트롤 중 XAML 안 HTML Markup을 그대로 사용할 수 있는 컨트롤이 존재합니다.
<Page
x:Class="Application1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ScrollViewer Background="White" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<native:HtmlPresenter xmlns:native="using:CSHTML5.Native.Html.Controls" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="native">
<style type='text/css'>
.sampleTable table {
border-collapse: collapse;
width: 100%;
background-color: #ffffff
}
.sampleTable th, .sampleTable td {
text-align: left;
padding: 8px;
}
.sampleTable tr:nth-child(even){background-color: #f2f2f2}
.sampleTable th {
background-color: #4CAF50;
color: white;
}
</style>
<h1>HTML Example</h1>
<p>This is an example of formatted text: 
<strong>Pellentesque habitant morbi tristique</strong> senectus et
<em>aenean ultricies mi vitae est</em> netus et
<code>commodo vitae</code> , malesuada fames ac turpis egestas.
<a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.
</p>
<h2>This is header Level 2</h2>
<ol>
<li>This is an item in an ordered list</li>
<li>This is another item in an ordered list</li>
</ol>
<blockquote>
<p>This is a blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.</p>
</blockquote>
<h3>This is header Level 3</h3>
<ul>
<li>This is an item in an unordered list</li>
<li>This is another item in an unordered list</li>
</ul>
<h2>Example of HTML form:</h2>
<form action="#" method="post">
<div>
<label for="name">Text Input:</label>
<input id="name" tabindex="1" name="name" type="text" value="" />
</div>
<div>
<p>Radio Button Choice: 
<label for="radio-choice-1">Choice 1</label>
<input id="radio-choice-1" tabindex="2" name="radio-choice-1" type="radio" value="choice-1" />
<label for="radio-choice-2">Choice 2</label>
<input id="radio-choice-2" tabindex="3" name="radio-choice-2" type="radio" value="choice-2" />
</p>
</div>
<div>
<label for="select-choice">Select Dropdown Choice:</label>
<select id="select-choice" name="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>  
</div>
<div>
<label for="checkbox">Checkbox:</label>
<input id="checkbox" name="checkbox" type="checkbox" />
</div>
</form>
<h2>Example of HTML table:</h2>
<table class="sampleTable">
<tr>
<th>Feature</th>
<th>Example</th>
<th>Foo</th>
</tr>
<tr>
<td>tag attributes</td>
<td>You can use tag attributes: example-
<em>example </em>
<strong>example</strong> -
<em>test</em>
</td>
<td> </td>
</tr>
<tr>
<td>inline styles</td>
<td>
<span style="color: green; font-size: 13px;">You can use
<strong style="color: blue; text-decoration: underline;">inline styles</strong>
</span>
</td>
<td>
<strong style="font-size: 17px; color: #2b2301;">x</strong>
</td>
</tr>
<tr>
<td>classes and IDs</td>
<td>
<span id="demoId">This span has an ID
<strong class="demoClass">And this portion has a class</strong> .
</span>
</td>
<td>
<strong style="font-size: 17px; color: #2b2301;">x</strong>
</td>
</tr>
<tr>
<td>successive &#160;s</td>
<td>Here are some spaces:       end of spaces</td>
<td>
<strong style="font-size: 17px; color: #2b2301;">x</strong>
</td>
</tr>
<tr>
<td>span tags</td>
<td>This is an
<span style="color: green; font-size: 13px;">example of span with tags</span>
</td>
<td>
<strong style="font-size: 17px; color: #2b2301;">x</strong>
</td>
</tr>
<tr>
<td>links</td>
<td>
<a href="http://www.cshtml5.com">This is</a> an example of link.
</td>
<td> </td>
</tr>
<tr>
<td>comments</td>
<td>After this text there is a comment that is only visible by looking at the source
<!-- This is a comment! -->
</td>
<td>
<strong style="font-size: 17px; color: #2b2301;">x</strong>
</td>
</tr>
<tr>
<td>Encoding special characters</td>
<td>
<span style="color: red; font-size: 17px;">♥</span>
<strong style="font-size: 20px;">? ?</strong> ><
</td>
<td>
<strong style="font-size: 17px; color: #2b2301;">x</strong>
</td>
</tr>
</table>
</native:HtmlPresenter>
</ScrollViewer>
</Page>
와 좋은 정보 감사합니다.
이것도 크롬 같은 웹브라우저에서 랜더링이 되나요?
네 우노 프로젝트 설치 해보세요 플레이 하면 바로 웹으로 뜹니다
네, UNO는 예전부터 알고 있었습니다. ㅎ
다만 HTML와 Javascript와 혼용은 어려운걸로 기억 되서요. (억지로는 할 수 있겠지만)
Blazor 는 .razor 파일에 c#과 HTML , CSS , 심지어 javascript 까지 한파일에 가능 합니다.
웹 프론트 하다보면, 항상 브라우저 스토리지나, 쿠키관리, 웹푸쉬나, FCM 등 이러한 것들 처럼 일종의 순수 Javascript 지원이 필요 하더군요. ㅠ.
초기엔 cshtml5라는 프레임워크였는데
웹어셈블리 기술이 나오면서
웹어셈블리와 cshtml5의 기술이 합쳐지면서 opensilver 네이밍이 변경되었습니다 
wpf와 많이 닮아있기에
silver light의 부활이라고도 …하하
예전에 정리해논 게 있습니다 이거한번 참고해보세요! 주소