Avalonia.Samples aims to provide some minimal samples focusing on a particular issue at a time. This should help getting new users started.
Home Page: https://www.avaloniaui.net
@danwalmsley should we include demos for embedded applications here too?
This is a simple but yet stunning sample, so we want to show it.
The problem is very strange for me, I have never encountered this before, and, to be honest, I am not entirely sure what exactly the problem is, in my code, in Avalonia, in .NET Core, or maybe in the debugger. Or maybe not a problem at all, but an inevitable behavior when using a debugger and breakpoints.
When I add my custom control to Window (this control uses Render), and then execute an asynchronous command in the WindowViewModel that awaits something longer than ~2 seconds (and has a breakpoint on it), and after that it also executes some code, then when the code of this command is completed, the application freezes completely and then crashes.
public class SnowfallControl : Control
{
private readonly List<Snowflake> snowflakes = [];
private readonly DispatcherTimer timer = new();
private readonly Stopwatch stopwatch = new();
public SnowfallControl()
{
Loaded += (_, _) =>
{
// Initialize snowflakes
for (var i = 0; i < 200; i++)
{
snowflakes.Add(new Snowflake
{
Position = new Point(Random.Shared.NextDouble() * Bounds.Width, Random.Shared.NextDouble() * Bounds.Height),
Speed = Random.Shared.NextDouble() * 40 + 20,
Size = Random.Shared.NextDouble() * 2 + 1
});
}
timer.Interval = TimeSpan.FromMilliseconds(1000.0 / 60.0); // 60 FPS
timer.Tick += (_, _) => InvalidateVisual();
timer.Start();
stopwatch.Start();
};
}
public override void Render(DrawingContext context)
{
base.Render(context);
// Calculate elapsed time since last frame
var elapsedTime = stopwatch.Elapsed.TotalSeconds;
stopwatch.Restart();
// Update and draw snowflakes
foreach (var snowflake in snowflakes)
{
snowflake.Position = new Point(snowflake.Position.X, snowflake.Position.Y + snowflake.Speed * elapsedTime);
if (snowflake.Position.Y > Bounds.Height)
{
snowflake.Position = new Point(Random.Shared.NextDouble() * Bounds.Width, 0);
}
context.DrawRectangle(Brushes.White, null, new Rect(snowflake.Position.X, snowflake.Position.Y, snowflake.Size, snowflake.Size));
}
}
}
public class Snowflake
{
public Point Position { get; set; }
public double Speed { get; set; }
public double Size { get; set; }
}
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:AvaloniaCustomControlRenderBugReproduction.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:AvaloniaCustomControlRenderBugReproduction.Controls"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaCustomControlRenderBugReproduction.Views.MainWindow"
x:DataType="vm:MainWindowViewModel"
Icon="/Assets/avalonia-logo.ico"
Title="AvaloniaCustomControlRenderBugReproduction">
<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>
<Grid>
<StackPanel>
<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Command="{Binding DoSomethingCommand}" Content="Test"/>
</StackPanel>
<controls:SnowfallControl IsHitTestVisible="False"/>
</Grid>
</Window>
public class MainWindowViewModel : ViewModelBase
{
#pragma warning disable CA1822 // Mark members as static
private string greeting = "Welcome to Avalonia!";
public string Greeting
{
get => greeting;
set => this.RaiseAndSetIfChanged(ref greeting, value);
}
public ReactiveCommand<Unit, Unit> DoSomethingCommand { get; init; }
public MainWindowViewModel()
{
DoSomethingCommand = ReactiveCommand.CreateFromTask(DoSomething);
}
private async Task DoSomething()
{
await Task.Delay(5000);
//No matter what code will be executed after awaiting, the issue happens
var test1 = "Test1";
var test2 = "Test2";
var test3 = test1 += test2;
//Greeting = "Delay awaited";
}
#pragma warning restore CA1822 // Mark members as static
}
await Task.Delay(5000)Fatal error. Internal CLR error. (0x80131506)
at Avalonia.Rendering.Composition.Drawing.RenderDataDrawingContext.DrawRectangleCore(Avalonia.Media.IBrush, Avalonia.Media.IPen, Avalonia.RoundedRect, Avalonia.Media.BoxShadows)
at Avalonia.Media.DrawingContext.DrawRectangle(Avalonia.Media.IBrush, Avalonia.Media.IPen, Avalonia.Rect, Double, Double, Avalonia.Media.BoxShadows)
at AvaloniaCustomControlRenderBugReproduction.Controls.SnowfallControl.Render(Avalonia.Media.DrawingContext)
at Avalonia.Rendering.Composition.CompositingRenderer.UpdateCore()
at Avalonia.Rendering.Composition.CompositingRenderer.Update()
at Avalonia.Rendering.Composition.Compositor.CommitCore()
at Avalonia.Rendering.Composition.Compositor.Commit()
at Avalonia.Media.MediaContext.CommitCompositor(Avalonia.Rendering.Composition.Compositor)
at Avalonia.Media.MediaContext.CommitCompositorsWithThrottling()
at Avalonia.Media.MediaContext.RenderCore()
at Avalonia.Media.MediaContext.Render()
at Avalonia.Threading.DispatcherOperation.InvokeCore()
at Avalonia.Threading.DispatcherOperation.Execute()
at Avalonia.Threading.Dispatcher.ExecuteJob(Avalonia.Threading.DispatcherOperation)
at Avalonia.Threading.Dispatcher.ExecuteJobsCore(Boolean)
at Avalonia.Threading.Dispatcher.Signaled()
at Avalonia.Win32.Win32DispatcherImpl.DispatchWorkItem()
at Avalonia.Win32.Win32Platform.WndProc(IntPtr, UInt32, IntPtr, IntPtr)
at Avalonia.Win32.Interop.UnmanagedMethods.DispatchMessage(MSG ByRef)
at Avalonia.Win32.Interop.UnmanagedMethods.DispatchMessage(MSG ByRef)
at Avalonia.Win32.Win32DispatcherImpl.RunLoop(System.Threading.CancellationToken)
at Avalonia.Threading.DispatcherFrame.Run(Avalonia.Threading.IControlledDispatcherImpl)
at Avalonia.Threading.Dispatcher.PushFrame(Avalonia.Threading.DispatcherFrame)
at Avalonia.Threading.Dispatcher.MainLoop(System.Threading.CancellationToken)
at Avalonia.Controls.ApplicationLifetimes.ClassicDesktopStyleApplicationLifetime.Start(System.String[])
at Avalonia.ClassicDesktopStyleApplicationLifetimeExtensions.StartWithClassicDesktopLifetime(Avalonia.AppBuilder, System.String[], Avalonia.Controls.ShutdownMode)
at AvaloniaCustomControlRenderBugReproduction.Program.Main(System.String[])
When the program crashes, the IDE also displays the following message:
Target process has exited during evaluation of instance method System.Exception::get_Message() with actual parameters System.ExecutionEngineException. This may possibly happen due to StackOverflowException.
The problem does not arise in production if the program is executed without debugging. The problem also does not arise even if the program is launched in debugging mode but there is no breakpoint on await.
Originally posted by @BnnQ in AvaloniaUI/Avalonia#14144
my project was created with the visual studio tempalte, support desktop ,android and web.
MainViewModel:
public class MainViewModel : ViewModelBase
{
ViewModelBase _CurrentViewModel;
public ViewModelBase CurrentViewModel
{
get { return _CurrentViewModel; }
private set { this.RaiseAndSetIfChanged(ref _CurrentViewModel, value); }
}
public MainViewModel()
{
_CurrentViewModel=new LoginViewModel();
}
}MainView.axaml:
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:App1.ViewModels"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:CompileBindings="True"
x:Class="App1.Views.MainView"
x:DataType="vm:MainViewModel">
<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:MainViewModel />
</Design.DataContext>
<Grid>
<TransitioningContentControl Content="{Binding CurrentViewModel}"></TransitioningContentControl>
</Grid>
</UserControl>LoginViewModel:
public class LoginViewModel : ViewModelBase
{
public LoginViewModel() { }
}LoginView.axaml:
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:App1.ViewModels"
mc:Ignorable="d" d:DesignWidth="1440" d:DesignHeight="900"
x:Class="App1.Views.LoginView"
x:DataType="vm:LoginViewModel">
<WrapPanel Background="White">
<Image Source="/Assets/bg.png" Margin="5"></Image>
<Grid RowDefinitions="*,auto,*" ColumnDefinitions="*,auto,*" VerticalAlignment="Center">
<Grid Grid.Row="1" Grid.Column="1" Margin="5">
<StackPanel Orientation="Vertical">
<TextBlock Text="Login" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" FontSize="28" Foreground="#282C40"></TextBlock>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="5,20">
<TextBlock Text="User" FontSize="14" Foreground="#80828E" VerticalAlignment="Center" Margin="5"></TextBlock>
<TextBox Watermark="Your account" MinWidth="376" FontFamily="Source Han Sans CN" FontSize="14" Foreground="#333333" VerticalAlignment="Center" VerticalContentAlignment="Center"></TextBox>
</StackPanel>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="5,5">
<TextBlock Text="Password" FontSize="14" Foreground="#80828E" VerticalAlignment="Center" Margin="5"></TextBlock>
<TextBox PasswordChar="*" Watermark="Your password" MinWidth="376" FontSize="14" Foreground="#333333" VerticalAlignment="Center" VerticalContentAlignment="Center"></TextBox>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</WrapPanel>
</UserControl>when run it , the main window only show the full name of the view model. I hope it show the login view
Describe the bug
I'm new to Avalonia and MVVM, so I wanted to take one of the tutorials to get easily started. But the guide is not matching with the current Avalonia version in terms of stuff looking different in Visual Studio and on the guide.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A beginners guide is most useful when it can be followed 100% the experience described. Please let someone knowledgable go through it and fix the issues coming up in the documentation.
Screenshots
As an example I adjusted my content like shown here:
https://docs.avaloniaui.net/docs/next/tutorials/todo-list-app/main-window-content
But getting an error of "Unable to resolve type MainWindowViewModel from namespace using:ToDoList.ViewModels Line 13, position 6"
As correctly the "MainWindowViewModel" is not created it seems.
Here is written "Locate the Models folder": https://docs.avaloniaui.net/docs/next/tutorials/todo-list-app/creating-a-model
Which is not created by default.
Same issue here: https://docs.avaloniaui.net/docs/next/tutorials/todo-list-app/creating-a-view-model#view-model-to-model-dependency
As "MainWindowViewModel" is not existing
This leads to other issues later on following the guide.
Desktop (please complete the following information):
Additional context
For me as beginner it's hard to get into Avalonia and MVVM programming when the basic tutorial is not working. As I'm confused by the missing MainWindowViewModel and other stuff. I solved some if it by looking at other tutorials but that's not the intention of a tutorial for new users.
Sure it's an additional learning oportunity, but I would like to understand the basics first before I start debugging it.
Thanks you
Only reproduced on mac
Propsal: A wizard like UI with next and prev buttons
Create an extended control while keeping styles of base class.
hyperlink button
hot key box
I'll send a pull request with a proposal for a sample
From telegram:
How avalonia textbox control focus will do wpf programmatically
FocusManager may change in 11.0. so I will wait for 11.0 to arrive
the avalonia version 11 break changed , but this repo avalonia version 0.10...
when update this repository avalonia to version 11?
In step 3 it says to:
"Add the following code to the MainWindowViewlModel class in MainWindowViewModel.cs."
I think that should be MainViewModel class in MainViewModel.cs. There is no MainWindowViewModel class or .cs file.
In step 4:
x:DataType="vm:MainWindowViewModel"
should be:
x:DataType="vm:MainViewModel"
Also, there needs to be:
xmlns:views="clr-namespace:BasicMvvmSample.Views"
somewhere before the Title line.
MainWindowViewModel is used in a few other places as well. Changing it to MainViewModel makes all the compile errors go away.
Unfortunately I'm now getting an error that says "A project with an Output Type of Class Library cannot be started directly." I understand what it's saying but I don't know how to fix it.
Not a request for a new sample but I found the casual misogyny in the "Commands" sample to be very off-putting, and this could cause developers to avoid Avalonia, or form an opinion of the people behind it as chauvinistic and behind the times.
It's not outright offensive, but it's just cringey and not funny. The tutorial is full of this kind of stuff:
"Baking a cake can take long time and we will have to wait for it. While our wife is working for us, we can do other stuff like watching football."
Also just the idea of a topic about "Commands" and theming it to be about commanding "your wife" is just really gross.
There's no shortage of silly but innocuous things this could be about instead. I can offer a suggestion of "commanding" a robot HAL to "open the pod bay doors" and HAL refusing as a nod to the famous scene from 2001 A Space Oddessy, and then having HAL comply with a robot name instead of your friend. Obviously the technical content does not need to change, just the text and the tutorial documentation.
I would be happy to submit a PR with this change if you'd like, but I didn't want to just lead with that in case it was presumptuous. I am an outsider to the Avalonia community so I don't want to project my values onto your community, if you really like the "wife command" tutorial i'll just move along.
Thanks!
Hey there,
I'm missing a sample for developing a REAL WORLD App with all the bells and whistles you would like to have in a "professional" App (I'm trying to adopt Avalonia for a company app). The Todo and Music Store App examples are great, but still kind of missing a real world scenario using features you probably would like to have in such a project that should also be deployed on mobile platforms. Even AngelSix, who I think you hired to do an Avalonia Series and who is doing a great job on this, is currently still missing some of these topics that are elementary for a non-beginner.
I would provide a sample myself but I'm pretty new to Avalonia and struggling a bit with these topics (not in general, I got it working, but how to do it the RIGHT way)... At least I'm willing to submit a pull request for a sample Todo app incl. tutorial, but I would need your help to cover the topics below (links or short code examples would be awesome).
I've only fully completed the checked parts and have a lot of questions about the unchecked ones.
MainViewModel in the MainWindow for desktop apps
SingleView into the MainWindow, how would I do that?Splat, right? So how would I inject the dependencies in a ViewModel in an elegant way?Microsoft.DependencyInjection.Extensions - is that the right way to do it?ReactiveUI the only way Routing could work? (see CommunityToolkit.Mvvm below)RoutingService to instanciate ViewModels and navigate between them, but is this PROPER Routing already?Here are some topics that would be nice to have later, but that I would not integrate in the first place to keep things simple.
myapp file.txt opens file.txt in the editor)I think Camelot is a pretty good example for many of these topics, but unfortunately not fully cross platform (Android, iOS and WASM are missing) and if you would like to create an App for Android or iOS, a dual pane file manager is not the right choice in my opinion.
So I would extend / add the topics to the existing Todo List tutorial. That would make it easier to keep up to date and to follow along. Although Todo List is pretty simple, it could add some features and need routing, use DI, store some settings for an API URL, etc.
Ref: https://docs.avaloniaui.net/docs/next/tutorials/todo-list-app/process-a-new-item
The given example does not compile!
`
Observable.Merge
(
addItemViewModel.OkCommand,
addItemViewModel.CancelCommand.Select(_ => (ToDoItem?)null)
)
.Take(1)
.Subscribe(newItem =>
{
if (newItem != null)
{
ToDoList.ListItems.Add(newItem );
}
ContentViewModel = ToDoList;
});
`
where CS1660 error is thrown in line .Subscribe(newItem => ...
The Subscribe function awaits an IObserveable object not a lambda!
I also suggest to rather use C# patterns instead of null checking, e.g.
if (newItem != null) ....
if (newItem is not null)...
Add reflection free ViewLocator sample
Add:
return data switch
{
FirstPageViewModel => new FirstPageView(),
SecondPageViewModel => new SecondPageView(),
_ => new TextBlock {Text = "Not Found: " + data.GetType().Name}
};https://github.com/kekekeks/Avalonia.BattleCity
Shows how to create a simple canvas-based game with no lower level access to the rendering stack. Something what can be a base for most of applications.
How do I valdiate a value in my ViewModel?
I think it might be a good idea to resurrect some of the best WPF blog's/samples here where the license is compatible. One of the best I know of was from one of the original WPF engineers:
https://github.com/bstollnitz/old-wpf-blog
Everything is MIT license. It would be good to reach out to Bea and make sure she is ok with it (https://bea.stollnitz.com/).
Copy over each blog/sample that is relevant to Avalonia and modify code as needed.
There are other blogs from original WPF engineers as well that might be good to consider as well.
It shouldn't be a much related to avalonia, nor a big problem. But users expect some build in solution for this integration.
We should at least have ready to show sample in this repo, which would answer these questions.
How to:
Related:
AvaloniaUI/Avalonia#8588
AvaloniaUI/Avalonia#5241 (comment)
AvaloniaUI/Avalonia#8936
Based on https://docs.avaloniaui.net/docs/next/concepts/headless/
Unit test sample where:
Write a Text-Editor with custom Font support
At the same time some docs about Fonts need to be added
How to store and reload settings
Save and reload dark / light Theme
Save and reload Accent Color
I'll send a pull request with a proposal for a sample
https://docs.avaloniaui.net/guides/deep-dives/reactiveui/data-persistence
Animated Splash Screen for Xplat with initialization progress (db update, etc...)
Is it possible to make a sample mimicking Microsoft's purchase database one (https://github.com/Microsoft/Windows-appsample-customers-orders-database; https://learn.microsoft.com/en-us/samples/microsoft/windows-appsample-customers-orders-database/customers-orders-database-sample/) ? This would be very helpful to beginner developers as a practical first project with Avalonia.
DynamicResource, Theme-Mode switching
Show how one can switch a DynamicResource at runtime
Different options to animate a Control vua Styles and code behind
We have AutoGrid control created as a sample. It makes a little use as an independent control but is a great example of how to create custom panel-like control.
https://github.com/AvaloniaUI/AvaloniaAutoGrid
Would be great if we move it to this repo and archive the initial one.
If possible, create a photo annotation tool
Take a picture
Add text that can be dragged and edited
Add simple shapes
[<] I'll send a pull request with a proposal for a sample
FROM Telegram chat:
Jaanus, [23.03.2023 12:20]
Hey, is there a project or a plan to improve Mobile Development experience ?
There is no clear documentation on how to make basics things that are in fact very easy to do after some research, like overriding Back Button click in MainActivity.cs for Android, which Xamarin library to use like Xamarin.Essentials, etc ..
It would be nice to have some reference or a kind of "guide" about Mobile dev which is a little underrated in Avalonia I think.
Max Katz, [23.03.2023 12:23]
You can create documentation request issues on the https://github.com/AvaloniaUI/Documentation
Max Katz, [23.03.2023 12:24]
BackButton is possible in avalonia, but yes, there is no documentation for that yet
Max Katz, [23.03.2023 12:24]
But please be specific with requests
Jaanus, [23.03.2023 12:31]
Oh okay, so some doc for mobile are planned for v11 release ?
Jaanus, [23.03.2023 12:36]
Lots of things are easily possible with Xamarin libraries, so maybe it would be great to just redirect to the interesting ones for peoples who discover Mobile Dev
Max Katz, [23.03.2023 12:45]
Some of these libraries that were ported to maui can be used with avalonia too. Another good candidate for documentation or samples.
Custom font loading sample. The font should be a open source font.
From twitter: https://twitter.com/ahrentlov/status/1561721224824340481?s=21&t=47hXOjLBRVO9gqv0TxUBXw
Any good documentation or samples on how to load and use custom fonts? I have not seen a good source yet.
Idea 💡: make a WritableBitmap which updates frequently. For example cycle through colors
Please add sample for Responsive UI for Desktop and Mobile size devices.
Like changing font, height, width of controls as per platform it is running on through Xaml.
Showing fixed side drawer on Desktop while having sliding drawer for Android and iOS.
Changing Grid row and column count as per Platform Desktop, Mobile etc.
Or Load different UserControl based on Platform through Xaml
The tutorials which are atm in the docs, should be moved to this repo.
https://docs.avaloniaui.net/tutorials/todo-list-app
https://docs.avaloniaui.net/tutorials/music-store-app
The pull request template includes a checkbox item to consider adding a link to new samples from the AvaloniaUI documentation. The link to the documentation appears to be broken. https://github.com/AvaloniaUI/Documentation
Update the template.
Many developers don't like IValueConverters because of their verbosity.
They need to create an instance of a class, implement two-way methods, add it to the resources, and so on.
Instead, we should let them know that it's possible to use converters with x:Static and FuncValueConverter.
Simple examples:
public static class IntConverters
{
public static FuncValueConverter<int, bool> IsNotZero { get; } = new(i => i != 0);
}<Image Grid.Column="0" Source="/Assets/checkmark.png" Width="28" Height="28"
IsVisible="{Binding Value.Count, Converter={x:Static converters:IntConverters.IsNotZero}}" />That's it.
I haven't checked our documentation and all samples. But in general, that's what we can recommend for one-way IValueConverter and IMultiValueConverter. Additionally, we should add FuncValueConverter two-way conversion support.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.