AvaloniaUI 가 언제 preview 5까지 나왔을까요;

📌 자유게시판
1

분명 얼마전에 봤을 때도 preview 2 였던 것 같은데…

다른 건 모르겠지만 이제 Avalonia Desktop App 프로젝트(모바일 미포함)에 대해서는 MVVM Toolkit을 선택할 수 있도록 변경되었군요.

image

preview2 까지만 해도 제 기억엔 mvvm toolkit을 사용하면 뭔가 오류가 발생했어서

0.10.18 버전으로만 Toolkit을 썼었습니다.

다른 프로젝트들도 둘러봐야겠습니다.

5 Likes
2

아발로니아도 Prism이 있었군요

4 Likes
3

이정도면… @jamesnet214 님의 Jamesnet.Wpf 라이브러리의 아발로니아 버전도 나올 것 같은데요!?

4 Likes
4

지금 지난 토요일에 배운 걸 아발로니아로 바꿔보려고 했는데 자료가 적어서 역시 쉽지 않은 것 같습니다.

모든 컨트롤의 Custom Control화는…보니까 아발로니아에서는 TemplatedControl이라는 걸 써야할 듯한데, 저 아발로니아 프리즘은 기존 프리즘 생각하고 접근하면 좀 어려울거같습니다…ㅋㅋ

4 Likes
5

아 그러고보니 아발로니아에선 Template이나 그런게 없다고 하던데…
그런면에선 적용하기엔 좀 힘들긴 하겠네요…

3 Likes
6

찾아보니 얼추 TemplatedControl로 가능한 것 같습니다.

WPF의 사용자 지정 컨트롤 같은 프로젝트 템플릿은 당연히 존재하지 않습니다.

다만,

  1. 위 첨부 사진의 Avalonia .NET Core MVVM App 프로젝트 선택
  2. ReactiveUI 선택
  3. 일반 .NET Class Library 프로젝트 생성
  4. 아래 그림처럼 TemplatedControl 생성
    image
  5. 실행 프로젝트에서 TemplatedControl이 들어있는 프로젝트를 참조한 뒤, axaml에서 네임스페이스를 설정하고 적용할 것.
<Window x:Class="AvaloniaApplication1.Views.MainWindow"
        xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:lib="using:ClassLibrary1"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:vm="using:AvaloniaApplication1.ViewModels"
        Title="AvaloniaApplication1"
        d:DesignHeight="450"
        d:DesignWidth="800"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        mc:Ignorable="d">

    <Design.DataContext>
        <!--
            This only sets the DataContext for the previewer in an IDE,
            to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs)
        -->
        <vm:MainWindowViewModel />
    </Design.DataContext>

    <lib:TemplatedControl1 />

</Window>

여기서 주의할 것은Avalonia는 네임스페이스를 참조할 때 clr-namespace를 사용하지 않고 using을 사용한다는 것과, Style을 적용할 때 TargetType이 아닌 Selector를 이용한다는 점입니다. (CSS Selector 개념)
그래서 TargetType이 아니기 때문에 CSS Selector 문법을 사용해야하며 문법상 : 문법은 CSS에서 클래스를 지정하는 것이기 때문에 문법이 겹쳐서 | 를 이용해야 합니다.

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="using:ClassLibrary1">
    <Design.PreviewWith>
        <controls:TemplatedControl1 />
    </Design.PreviewWith>

    <Style Selector="controls|TemplatedControl1">
        <!--  Set Defaults  -->
        <Setter Property="Template">
            <ControlTemplate>
                <TextBlock Background="Black"
                           FontSize="50"
                           Foreground="Red"
                           Text="Templated Control" />
                <!--<TextBlock Text="{TemplateBinding controls:TemplatedControl1.Text}" />-->
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>

<Style Selector="controls|TemplatedControl1">

부분을 잘 확인해주세요.

  1. 마지막으로, App.axaml에 TemplatedControl을 추가해줍니다.
    프로젝트를 생성하고 TemplatedControl을 위와 같은 IDE에 의존하여 생성했을 때 App.axaml에는 무언가 등록되는 것 같습니다.
<Application x:Class="AvaloniaApplication1.App"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:lib="using:ClassLibrary1"
             xmlns:local="using:AvaloniaApplication1"
             RequestedThemeVariant="Default">
    <!--  "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options.  -->

    <Application.DataTemplates>
        <local:ViewLocator />
    </Application.DataTemplates>

    <Application.Styles>
        <FluentTheme />
        <StyleInclude Source="avares://ClassLibrary1/TemplatedControl1.axaml" />
    </Application.Styles>
</Application>

에서

<StyleInclude Source="avares://ClassLibrary1/TemplatedControl1.axaml" />

를 잘 보시면 되는데, Source=“” 까지 쓰고나면 VS에서 여러 선택지를 드롭다운으로 뿌려주고, 저렇게 avares 안에 내가 만든 TemplatedControl의 경로가 들어있습니다.
선택해주면 스타일 적용이 성공하고, Avalonia 실행 프로젝트에서 컨트롤을 참조해서 사용할 수 있습니다.

4 Likes
7

아니요~ ControlTemplate, DataTemplate 모두 있습니다.

CustomControl부분은 제가 위에 써둔 방식을 이용해서 연구하면 될 것도 같아요.

프로젝트 템플릿 내보내기는 이따 회의다녀와서 해보겠습니다.

3 Likes
8

해봤는데…템플릿을 내보내기도, 내보낸 템플릿으로 프로젝트를 생성하는 것도 시간이 엄청나게 많이 걸립니다.

시간이 엄청나게 많이 걸리는 것 말고는 WPF때와 정상적으로 똑같이 동작하는 것으로 보입니다.

2 Likes
9

오…저번에 @FrontGame 님 교육 때 실시간으로 프로젝트 구성부터 파일을 하나씩 하는거보고
낯설지 않아서 좋던데…

확실히 WPF 개발자분들이 크로스플랫폼 진입을 아발로니아로 하는게 더 좋다는게 확실해지네용

2 Likes
10

여담이지만, 아발로니아를 처음 만드신 분은 WPF의 크로스플랫폼 진입 용도로 만들지는 않았다고 하네요.

역시 오픈소스화가 진행되면서 인큐베이터의 의도대로 흘러가지는 않는 것으로…

2 Likes
11

희망회로 돌려본 정도로…

2 Likes