Adding back as much images as found for now
This commit is contained in:
timunie
Родитель
4aaf901701
Коммит
38291d69fc
|
|
@ -16,7 +16,7 @@ This guide has instructions for Rider on macOS, however the steps will be almost
|
|||
|
||||
Our livestream assumes some knowledge of [XAML](../../guides/basics/introduction-to-xaml.md), [MVVM ](../../guides/basics/mvvm.md)development, however this guide should fill in the gaps for beginners.
|
||||
|
||||
|
||||
|
||||
|
||||
## A little background to Avalonia <a id="a-little-background-to-avalonia"></a>
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ MVVM is simply a way to enforce [Separation of concerns](https://en.wikipedia.or
|
|||
|
||||
Following the MVVM approach will alleviate these difficulties and help keep your UI code scalable.
|
||||
|
||||
|
||||
|
||||
|
||||
**How does MVVM work?**
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ public class MainWindowViewModel : ViewModelBase
|
|||
|
||||
Pressing the `Debug Button` again to run the program we can see we have a button and when clicked setting a breakpoint inside the `BuyMusicCommand` code we can see that the code is executed when it's hit.
|
||||
|
||||
|
||||
|
||||
|
||||
Let's position the button to the top right of the screen and make it look a bit nicer.
|
||||
|
||||
|
|
@ -89,7 +89,7 @@ Let's create a file just for Icons.
|
|||
|
||||
In Rider right click on the project and select `Add` → `Avalonia Styles`
|
||||
|
||||
|
||||
|
||||
|
||||
Enter the name `Icons` when prompted and press `Enter`.
|
||||
|
||||
|
|
@ -149,5 +149,5 @@ Return to `MainWindow.axaml`, we can add the Icon to the Button like so...
|
|||
|
||||
Running the application we now have a nice button.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -233,7 +233,7 @@ Your `MusicStoreWindow.axaml` should look like this.
|
|||
|
||||
Run the application:
|
||||
|
||||
|
||||
|
||||
|
||||
Our items are showing in the List... but not very visual.
|
||||
|
||||
|
|
@ -288,7 +288,7 @@ We shall come back to the `Bindings` in a moment, for now lets run the applicati
|
|||
|
||||
As can be seen the albums are displayed vertically. However it would be nice to have them horizontally and wrap around.
|
||||
|
||||
|
||||
|
||||
|
||||
Luckily `ListBox` provides a solution to this with something called `ItemsPanelTemplate`. By default the `ListBox` has its `ItemPanel` property set to an `ItemsPanelTemplate` which contains a `StackPanel`, we can change this to a `WrapPanel` like so.
|
||||
|
||||
|
|
@ -304,7 +304,7 @@ Luckily `ListBox` provides a solution to this with something called `ItemsPanelT
|
|||
|
||||
Now when we run the application we get:
|
||||
|
||||
|
||||
|
||||
|
||||
As our list gets more items, that will wrap around onto the next line, and the user will be able to scroll.
|
||||
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ Notice we check the result for `null`, this is because the `user` may have cance
|
|||
|
||||
Lets run the program and see if it works.
|
||||
|
||||
|
||||
|
||||
|
||||
For the finishing touch we simply need to add persistence to the application.
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ Let's try and make this look a little more modern by applying `Dark` mode and so
|
|||
|
||||
The previewer knows about changes you make to the file your editing, but it doesn't know about changes in other files. This is why you need to build the project if another file was changed.
|
||||
|
||||
|
||||
|
||||
|
||||
3. After where it says `Title="Avalonia.MusicStore"` add the following code:
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ Now click the `Debug` `Button` to run the application again.
|
|||
|
||||
Notice we have a nice acrylic window effect. Shame about the titlebar, though. Let's see how we can make that blend in a bit more.
|
||||
|
||||
|
||||
|
||||
|
||||
\*Note, Linux users can not yet take advantage of this due to limitations of X11. The code will run and the window will still work on Linux, but the full effect will not be realised.
|
||||
|
||||
|
|
@ -108,7 +108,7 @@ Notice we have a nice acrylic window effect. Shame about the titlebar, though. L
|
|||
|
||||
Press the `Debug` button again to run.
|
||||
|
||||
|
||||
|
||||
|
||||
Perfect, a modern looking Window, Avalonia is able to render every pixel.
|
||||
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ From the Rider Welcome Screen, click on `New Solution`. This will open a dialog
|
|||
|
||||
At the bottom on the left hand side under the heading `Other` you will see `Avalonia .NET Core MVVM App` select it and then type `Avalonia.MusicStore` as the `Solution Name`. Everything else can be left as default.
|
||||
|
||||
Click the `Create` button.
|
||||
Click the `Create` button.
|
||||
|
||||
A new project will be created with the following structure.
|
||||
A new project will be created with the following structure.
|
||||
|
||||
The folders are:
|
||||
|
||||
|
|
@ -34,11 +34,11 @@ Some of the important files are:
|
|||
|
||||
Press the debug button top right of the IDE to compile and run the project.
|
||||
|
||||
|
||||
|
||||
|
||||
This will show a Window that looks like:
|
||||
|
||||
|
||||
|
||||
|
||||
A little plain but we now have a running application, and a blank canvas to start from.
|
||||
|
||||
|
|
|
|||
|
|
@ -159,5 +159,5 @@ Now run the application and search for your favourite artist.
|
|||
|
||||
Notice how the Albums covers load one by one, but that the UI remains responsive.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 870 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 230 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 30 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 560 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 4.0 MiB |
|
|
@ -35,5 +35,5 @@ As you can see it firstly uses the business logic apis to load the list of `Albu
|
|||
|
||||
Note we then re-iterate over the `Albums` and asynchronously load each cover. Note that we do this after adding all the albums to the list, as its more important to quickly show the user all the albums available and then load the images.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ First we need to add a Window to the project, right click on the `Views` folder
|
|||
|
||||
When prompted name this MusicStoreWindow and press the `Enter` key.
|
||||
|
||||
|
||||
|
||||
|
||||
This will add the following code:
|
||||
|
||||
|
|
@ -191,7 +191,7 @@ Also set `Width` and `Height` properties of the `MusicStoreWindows` `<Window>` e
|
|||
|
||||
Now run the application and click the Store button.
|
||||
|
||||
|
||||
|
||||
|
||||
As you can see the dialog window is opened perfectly centered inside the MainWindow.
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ This will open the `Packages` tool at the bottom of the IDE, like so.
|
|||
|
||||
Search for `ItunesSearch` and press the green `+` button on the right hand side to install it.
|
||||
|
||||
|
||||
|
||||
|
||||
1. In the `Models` folder add a new class called `Album` and paste in the following code.
|
||||
|
||||
|
|
@ -206,5 +206,5 @@ SearchResults.Add(new AlbumViewModel());
|
|||
|
||||
Now run the application and click the store button, then search for an artist or album name. If all has gone to plan you should see the progressbar animating whilst the server is busy processing the request and then you should see some results appear in the list.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -38,15 +38,15 @@ Examples:
|
|||
|
||||
Once Rider loads you will see the Welcome Screen. Click the `Configure` dropdown and select `Plugins`.
|
||||
|
||||
|
||||
|
||||
|
||||
A new Preferences Screen will open up. Click the `Settings` icon as shown and select `Manage Plugin Repositories...`
|
||||
|
||||
|
||||
|
||||
|
||||
Click the `+` icon and enter the URL `https://plugins.jetbrains.com/plugins/dev/14839`then click `OK`
|
||||
Click the `+` icon and enter the URL `https://plugins.jetbrains.com/plugins/dev/14839`then click `OK`
|
||||
|
||||
Now click on the `Marketplace` tab and search for `Avalonia`. Select `AvaloniaRider` and click `Install` then once that's done, click the `Restart IDE` button that will appear.
|
||||
Now click on the `Marketplace` tab and search for `Avalonia`. Select `AvaloniaRider` and click `Install` then once that's done, click the `Restart IDE` button that will appear.
|
||||
|
||||
Now Rider should be ready to develop Avalonia applications.
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче