על Avalonia כבר שמעתם?

קומפיונט

אם לא שמעתם על Avalonia אז כדי שתשמעו, זה הולך להיות הדור הבא של עיצוב אפליקציות דסקטופ עם ממשק גרפי בסביבת NET., הוא כבר נחשב ליורש המוצלח של wpf, אבל הבשורה הגדולה היא שהוא חוצה פלטפורמות לחלוטין, כלומר אתם יכולים לבנות ממשק משתמש פעם אחת ולקמפל אותו ל - Windows / macOS / Linux ועוד פלטפורמות (בלי צורך בפלטפורמת אינטרנט דוגמת Electron), מה שנותן את היתרון הגדול על wpf שכיום תואם רק ל-windows.

למי שמכיר את wpf זה ממש קל לעבור ל - Avalonia, ולמרות שהם מצהירים שהם לא מנסים לחקות את wpf הם ממש דומים, זה אותם שמות של פקדים וכולל כל הפיצ'רים של Markup כדוגמת: BindingExpression DynamicResourceExpression TemplateBindingExpression וכו'.

יש כמה שיפורים של דברים מעצבנים מ-wpf, לדוגמא הסטיילים ב-Avalonia עובדים בצורה אחרת שמזכירה עיצוב ב-css, יש סלקטורים וclassים שאיתם מחילים את הסגנונות. גם האנימציות עובדות בצורה יותר פשוטה (חסל Storyboards). קיים תיעוד למפתחי wpf.

כדי לעבוד עם ויז'ואל סטודיו צריך להתקין את ההרחבה Avalonia for Visual Studio 2022 ולפתוח פרויקט Avalonia חדש.
ואגב, לאילו המסופקים על הבשלות של הפרויקט, אז לפחות לטענת קהילת המפתחים הוא מספיק בשל ומוכן לייצור. יש רשימה של פרויקטים שמשתמשים עם Avalonia, אני לדוגמא אהבתי את זה Fluent Search

הפרויקט הוא חופשי ובקוד פתוח, יושב בgithub ונתמך על ידי NET Foundation.
אתר הבית: Avalonia UI - Home

avr416

@קומפיונט לא היה לי זמן לבדוק את זה לעומק,
אבל זה ממש מזכיר לי את הפרוייקט של מיקרוסופט עצמם Maui - וגם הוא אופן סורס בגיטהב - https://github.com/dotnet/maui.
מה יותר טוב באבלוניה?

dovid

Avalonia זה לא של מיקרוסופט, וגם קדם לMaui.

dovid

יש לכך התייחסות בFAQ:

How does Avalonia UI compare to MAUI?

MAUI is an evolution of Xamarin.Forms, enabling developers to create applications using a unified API using the platforms underlying native UI toolkit. Think of it as an abstraction over the operating systems existing UI controls; thus, Xamarin.Forms can only provide the lowest common denominator of UI controls and APIs available on the supported platforms. In contrast, Avalonia UI is an entire UI toolkit in its own right, responsible for rendering every pixel of the UI. This approach is closer to how Google's Flutter UI framework has been designed and offers numerous benefits, including pixel-perfect apps across every platform and a simplified process of supporting new platforms. Learn more about the benefits on our our blog.

קומפיונט

פוסט זה נמחק!

dovid

קשה לומר חיסרון על לחם באמצע אפיה שהוא עדיין לא אפוי...
Maui הייתה רשמית בלתי בשלה ומוכנה לייצור עד אוגוסט.
ברור שאתה לא מכיר אפליקציות כבדות שכתובות בMaui אם רק לפני חמש דקות זה היה מוכן לעבודה... חכה איזה שנה.

וסתם טיפ שלמדתי מ@magicode, לכו לטכנולוגיה בה כיף לכם בלי צורך למצוא מה רע באחרות.

קומפיונט

@dovid זה שזה לא נתמך בלינוקס לא מספיק סיבה טובה?

dovid

@קומפיונט למה זה נראה לך תומך בלינוקס?
זה עניין של חוסר ביקוש.

קומפיונט

יש ב-Avalonia המון טריקים ופיצ'רים מגניבים, שרק בגללם שווה לבחור אותו (אפילו רק לחלונות), ככל שאני חופר עוד בפרויקט אני מוקסם מהגאונות שטמונה בו (עז"נ חכמה בגויים תאמין), הנה כמה קסמי Binding של Avalonia באמצעות קוד #C:

הצמדה של Text Property מ-TextBox לתוכן הטקסט של TextBlock:

var textBox = new TextBox
{
    Width = 100,
};

var textBlock = new TextBlock
{
    Width = 100,
    [!TextBlock.TextProperty] = textBox[!TextBox.TextProperty]
};

באמצעות שורה 9 חיברתי את textBox.Text עם textBlock.Text, כמה פשוט וקל!

אותו רעיון בתוספת מניפולציה על הטקסט עם האופרטור Select:

var textBox = new TextBox();

var text = textBox.GetObservable(TextBox.TextProperty);

var textBlock = new TextBlock
{
    [!TextBlock.TextProperty] = text.Select(x => x + x).ToBinding()
};

אפשר גם להצמיד Property של פקד ישירות ל-Observable כלשהו:

var source = new Subject<string>();
var textBlock = new TextBlock();

textBlock.Bind(TextBlock.TextProperty, source.AsObservable());

source.OnNext("Next 1");
await Task.Delay(1000);
source.OnNext(" Next 2");

בכל פעם שיגיע ערך מה-Observable הטקסט של הפקד ישתנה לערך החדש.

עד כאן זה היה בקוד #C, גם בתחביר xaml יש עוד המון פיצ'רים הנה כמה לדוגמא:

הצמדה למאפיין בוליאני והפיכה של הערך עם האופרטור !:

{Binding MyProperty} 
{Binding !MyProperty}

הצמדה באמצעות שם של הפקד:

<TextBox Name="tb">
<TextBlock Text="{Binding #tb.Text}"/>

הצמדה לפקד האב באמצעות הסימבול parent$:

<Border Tag="Hello World!">
  <TextBlock Text="{Binding $parent.Tag}"/>
</Border>

אפשר גם באמצעות אינדקס:

<Border Tag="Hello World!">
  <Border>
    <TextBlock Text="{Binding $parent[1].Tag}"/>
  </Border>
</Border>

ואפשר גם באמצעות הטייפ:

<Border Tag="Hello World!">
  <Decorator>
    <TextBlock Text="{Binding $parent[Border].Tag}"/>
  </Decorator>
</Border>

ואפשר גם באמצעות טייפ ואינדקס:

<Border Tag="Hello World!">
  <Border>
    <Decorator>
    <TextBlock Text="{Binding $parent[Border;1].Tag}"/>
    </Decorator>
  </Border>
</Border>

הצמדת מאפיינים מסוג <IObservable<T באמצעות האופרטור ^:

// ViewModel
public IObservable<string> Name {get; set; }

// xaml
<TextBlock Text="{Binding Name^.Length}"/>

הצמדה למאפיינים א סינכרוניים, עם טקסט שמוצג לפני שהערך מוכן:

// ViewModel
public Task<string> MyAsyncText => GetTextAsync();

private async Task<string> GetTextAsync()
{
  await Task.Delay(1000); // The delay is just for demonstration purpose
  return "Hello from async operation";
}

// xaml
<TextBlock Text="{Binding MyAsyncText^, FallbackValue='Wait a second'}" />

בקיצור, תן לחכם ויחכם עוד, יש עוד הרבה דוגמאות שאפשר לראות בתיעוד.
יש הרבה סיבות טובות לבחור ב-Avalonia.

dovid

@קומפיונט הבאת דוגמאות מצויינות, נראה בהחלט מרשים.

תחומים - פורום חרדי מקצועי

על Avalonia כבר שמעתם?