C#•17mo ago

✅ Margins not aligning with video

I'm watching AngelSix's video series on avalonia, and he's using JetBrains IDE where I'm using Visual Studio. In his video he does

<Grid Grid.Row="2" Margin="[all:]8">
  <Button Grid.Column="0" Margin="0,0,0,0"></Button>
</Grid>

<Grid Grid.Row="2" Margin="[all:]8">
  <Button Grid.Column="0" Margin="0,0,0,0"></Button>
</Grid>

which sets the margin for all the items within that grid. However, when I do the same thing in my IDE, it errors when I try and run the program and instead I have to do

<Grid Grid.Row="2" Margin="8">
  <Button Grid.Column="0" Margin="8,0,0,0"></Button>
</Grid

<Grid Grid.Row="2" Margin="8">
  <Button Grid.Column="0" Margin="8,0,0,0"></Button>
</Grid

to get the same effects he's getting and I'm just curious if that is an IDE specific thing, or if I'm doing something wrong? Thanks.

87 Replies

Mekasu0124OP•17mo ago

also, no matter what settings I change or don't change, and no matter what solutions I follow no matter what I google, I cannot get the designer window to show up in visual studio for .axaml files. How can I get the designer to show up?

HimmDawg•17mo ago

However, when I do the same thing in my IDE, it errors when I try and run the program

What's the exact error?

Vi Ness•17mo ago

I believe the [all:] part is just Rider giving you a visual on what part of the margin you are setting. Later you'll see him use something like Margin="4,8" and Rider will show Margin="[lr:]4,[tb:]8" just to help you see right away which part is the left/right and which part is the top/bottom. The margin on the Grid isn't actually setting the margin for each of the items in it, just adding around the Grid as a whole. The darker blue part of this image shows the margin on the Grid

Vi Ness•17mo ago

Pretty much anything you see in his axaml files that is dark gray like [all:] you don't have to type yourself, it's just a visual aid

Mekasu0124OP•17mo ago

Tysm. That makes a lot of sense. Another question, you know when you’re typing code and that window pops down to give you like an autocomplete of what you’re typing? I had it when I was using MAUI but now that I’m using Avalonia it won’t show up and neither will the designer screen. I’ve tried everything and can’t get it to show up. Either of them

Vi Ness•17mo ago

Do you have the Avalonia for Visual Studio 2022 extension installed? You can get it here: https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaVS or by going to Extensions -> Manage Extensions and searching for it in Visual Studio

Avalonia for Visual Studio 2022 - Visual Studio Marketplace

Extension for Visual Studio - Previewer and templates for Avalonia applications and libraries.

Mekasu0124OP•17mo ago

I’ll check it out when I get home continuing with the video series, he uses svg files inside of his buttons using the <Image /> tag. I followed the same steps to add the Svg.Skia package to the workspace, and even removed it when I noticed my Nugut packages already had an Avalonia.Svg.Skia. I currently have

<Button Width="50">
  <Image Source="{SvgImage /assets/svg_files/Monitor.svg}" />
</Button>

<Button Width="50">
  <Image Source="{SvgImage /assets/svg_files/Monitor.svg}" />
</Button>

just like he does which I got from the github of https://github.com/wieslawsoltes/Svg.Skia and I'm getting an Unable to resolve type SvgImage from namespace https://github.com/avaloniaui Line14, Position12. error on the Source part of the Image tag. What do I have wrong? this is the full axaml file https://pastebin.com/LZ6LKENC

Mekasu0124OP•17mo ago

https://pastebin.com/fLq7tg5Q this is the updated code. I've been trying to find a solution and am becoming rather aggravated....ugh

Pastebin

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

Vi Ness•17mo ago

I seem to get that error if I uninstall Avalonia.Svg.Skia. In your App.axaml.cs file could you add the line using Avalonia.Svg.Skia; to the top and see if it gives you an error?

Mekasu0124OP•17mo ago

I put that at the top, and when I hover over the red line on the Svg part I get

CS0234; The type or namespace 'Svg' does not exist in the namespace 'Avalonia' (are you missing an assembly reference?)
IDE0005; Using directive is unecessary.
Show potential fixes (Alt+Enter or Ctrl+.)

CS0234; The type or namespace 'Svg' does not exist in the namespace 'Avalonia' (are you missing an assembly reference?)
IDE0005; Using directive is unecessary.
Show potential fixes (Alt+Enter or Ctrl+.)

Vi Ness•17mo ago

Okay, so it just looks like the NuGet package isn't installed. I remember seeing that you're new to C#; do you know how to use the NuGet Package Manager?

Mekasu0124OP•17mo ago

and when I go to Project > Manage Nugut Packages there is nothing there for svg I do, I just don't know what package I need

Mekasu0124OP•17mo ago

this one? Avalonia.Svg.Skia?

Vi Ness•17mo ago

Yep! Make sure to install the version that matches the version of Avalonia that you're using. Likely 11.0 if you just started using Avalonia

Mekasu0124OP•17mo ago

do I need to restart the ide after installation?

Vi Ness•17mo ago

You hopefully shouldn't but if something isn't working right away you can try that I forget which episode he fixes the previewer in but you should be able to see the svg image if you run the app now

Mekasu0124OP•17mo ago

still having the same error even after restarting the ide

Mekasu0124OP•17mo ago

using Avalonia;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Markup.Xaml;
using Avalonia.Svg.Skia;

namespace LoudnessMeter
{
    public partial class App : Application
    {
        public override void Initialize()
        {
            AvaloniaXamlLoader.Load(this);
        }

        public override void OnFrameworkInitializationCompleted()
        {
            if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
            {
                desktop.MainWindow = new MainWindow();
            }

            base.OnFrameworkInitializationCompleted();
        }
    }
}

using Avalonia;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Markup.Xaml;
using Avalonia.Svg.Skia;

namespace LoudnessMeter
{
    public partial class App : Application
    {
        public override void Initialize()
        {
            AvaloniaXamlLoader.Load(this);
        }

        public override void OnFrameworkInitializationCompleted()
        {
            if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
            {
                desktop.MainWindow = new MainWindow();
            }

            base.OnFrameworkInitializationCompleted();
        }
    }
}

and this is my App.axaml.cs file

Vi Ness•17mo ago

And that using statement isn't giving you an error? Try changing your Image to <Svg Path="/Assets/Images/Monitor.svg"/> I imagine that'll tell you that it can't find "Svg" but just in case

Mekasu0124OP•17mo ago

unable to resolve type Svg in namespace no the using Avalonia.Svg.Skia; is just greyed out

Vi Ness•17mo ago

Greyed out is fine, it just means that it found it but you never used it in the code

Mekasu0124OP•17mo ago

I just don't understand why this isn't working. I have tried every solution I have found on stack overflow and other places. the docs https://docs.avaloniaui.net/docs/controls/image are saying to do it this way, but that's so above my comprehension level that I have zero idea how to do it

Vi Ness•17mo ago

I'm not sure why your MainWindow isn't seeing the package. At this point in the tutorial, everything is just in a single project, right?

Mekasu0124OP•17mo ago

Vi Ness•17mo ago

You're not using a variable image so you won't have to worry about using a binding converter like that

Mekasu0124OP•17mo ago

oh ok sighs of relief

<Window 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"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="LoudnessMeter.MainWindow"
        Title="LoudnessMeter">

<Window 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"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="LoudnessMeter.MainWindow"
        Title="LoudnessMeter">

am I missing something here?

Vi Ness•17mo ago

I don't think so. I don't have anything that specifically mention svgs in mine

<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:AngelSixLoudnessMeter.ViewModels"
             xmlns:models="clr-namespace:AngelSixLoudnessMeter.Models"
             xmlns:collections="using:CommunityToolkit.Mvvm.Collections"
             xmlns:converters="clr-namespace:AngelSixLoudnessMeter.Converters"
             xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
             xmlns:sys="using:System"
             xmlns:controls="clr-namespace:AngelSixLoudnessMeter.Styles;assembly=AngelSixLoudnessMeter"
             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="630"
             MinWidth="1000" MinHeight="630"
             x:Class="AngelSixLoudnessMeter.Views.MainView"
             x:DataType="vm:MainViewModel">

<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:AngelSixLoudnessMeter.ViewModels"
             xmlns:models="clr-namespace:AngelSixLoudnessMeter.Models"
             xmlns:collections="using:CommunityToolkit.Mvvm.Collections"
             xmlns:converters="clr-namespace:AngelSixLoudnessMeter.Converters"
             xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
             xmlns:sys="using:System"
             xmlns:controls="clr-namespace:AngelSixLoudnessMeter.Styles;assembly=AngelSixLoudnessMeter"
             mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="630"
             MinWidth="1000" MinHeight="630"
             x:Class="AngelSixLoudnessMeter.Views.MainView"
             x:DataType="vm:MainViewModel">

Mekasu0124OP•17mo ago

what's the difference between Window and UserControl? and how do I update my axaml page to see if that fixes the issue?

Vi Ness•17mo ago

Atm in the tutorial it's fine that you're using the MainWindow, he'll switch over to an MVVM project template later where your MainView will be a UserControl like mine is

Mekasu0124OP•17mo ago

oh ok. well I done screwed up my Program.cs file so I'm just going to redo the project for a 5th time because I saved and reloaded the ide and now I can't undo what I've done I was trying to follow this solution https://github.com/wieslawsoltes/Svg.Skia/blob/d31efcb99eed70ed7d4671035007c046a5e1a9f3/samples/AvaloniaSvgSkiaSample/Program.cs#L15-L16 to see if it fixed my problem and I don't remember what the program.cs file had before I did that

Vi Ness•17mo ago

That happens sometimes petmercy

Mekasu0124OP•17mo ago

ok brand new project

Vi Ness•17mo ago

That's the fix for the previewer, which you'll want to do eventually. I'm about to spin up a new project too and see if there's anything I'm forgetting for using an svg image

Mekasu0124OP•17mo ago

this is too much. like I give up at this point. Trying to figure out why I can't use an svg and nothing working that I'm trying, creating a new project for the 5th time. deleted that project before I copied the main window file and now I have to completely redo the first 3 videos just so I can get my project back to what it was because I don't remember all of it. Like I'm just done. This is too much. it's too complicated and it's beyond aggravating. thanks for your help nevermind I'm dumb. I linked my file earlier in these messages brand new project. installed the svg nugut package before doing anything. restarted the project. pasted in the code to bring back the work I've done, and I'm still getting the same error

Vi Ness•17mo ago

Can you show me the NuGet packages you have installed? Like this

Mekasu0124OP•17mo ago

I have 6 top-level packages and 73 transitive packages

Mekasu0124OP•17mo ago

Mekasu0124OP•17mo ago

those are the top level. do you want the other 73?

Vi Ness•17mo ago

Tbh idk what Transitive packages are XD but those top level ones are what I expected I don't think there are any extra steps to getting the svg package to work. My new project just has

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:SvgImageTest.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="SvgImageTest.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Title="SvgImageTest">

    <Image Source="{SvgImage /Assets/musicstore.svg}"/>

</Window>

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:SvgImageTest.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="SvgImageTest.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Title="SvgImageTest">

    <Image Source="{SvgImage /Assets/musicstore.svg}"/>

</Window>

Mekasu0124OP•17mo ago

ok so now source is no longer throwing an issuea, but my output for avalonia diagnostics is telling me that the svg just cannot be found at all

Mekasu0124OP•17mo ago

fresh restart of the ide

Vi Ness•17mo ago

Well that looks like progress! I see some .xcf extensions in your assets folder but not any .svgs

Mekasu0124OP•17mo ago

I guess so, but the file is right there in the exact same path directory so now to figure out why it can't "find" it ok guess I have to redo the export in gimp

Vi Ness•17mo ago

I don't remember if Gimp does SVGs. I ended up downloading Inkscape for this tutorial

Vi Ness•17mo ago

If you want to try using this one real quick, we'll see if it actually works

monitor.svg

Mekasu0124OP•17mo ago

I downloaded it. Renamed to make Monitor capital. Restared the ide twice. still saying The resource /Assets/Images/Monitor.svg could not be found I even changed the property of the .svg to be an AvaloniaResource and nothing

Vi Ness•17mo ago

I was just typing that XD

Mekasu0124OP•17mo ago

I'm honestly about ready to give up

Vi Ness•17mo ago

Did you do another Build after setting it to AvaloniaResource?

Mekasu0124OP•17mo ago

wow. every time I clicked the play button to run it, it would error out. I never though to just build the solution without clicking the play button. It works now. Thank you would you happen to have the svg's for the other images they use in the tutorial? I downloaded inkscape but I have no idea how to use it

Vi Ness•17mo ago

Yee, let me bundle them up rq

Mekasu0124OP•17mo ago

you're a life saver lol this is now the 6th time since I started learning this 3 days ago that I've wanted to just say to hell with c# lol

Vi Ness•17mo ago

Actually, idk the file sharing policies for this discord so I'll just put them here like the last one since they're easily readable

Mekasu0124OP•17mo ago

that's totally fine

Vi Ness•17mo ago

padlock.svg

settings.svg

export.svg

doublearrow.svg

Vi Ness•17mo ago

Haha well I imagine you already know the pangs and joys of doing something brand new in programming. Jumping straight into a GUI like Avalonia definitely seems like jumping into the deep end. But this is a good tutorial imo

Mekasu0124OP•17mo ago

well I was using MAUI before hand, and I thought I had a grasp on using axaml files, but I can promise you this. When he switches to the MVVM layout, I'll be back. That crap so looks just beyond complicated for no reason and just a nightmare. Although I do know the pains of doing something brand new in programming, Python made it easy

Vi Ness•17mo ago

MVVM will definitely take some getting used to. You're only a few episodes away 😛

Mekasu0124OP•17mo ago

I still don't understand why I have to use it. What is so wrong with just having simple file structures?

Vi Ness•17mo ago

Also, when he gets to the mobile support and cross platform stuff, don't worry about anything but the desktop as that's all he focuses on in future episodes

Mekasu0124OP•17mo ago

you mean to tell me I could have just used pngs lol if I would have watched 15 more seconds of the video. jeeeez

Vi Ness•17mo ago

Yep! But now you know how to use svg files if you ever want to have truly scalable images. I use them cuz I just find them fun to make

Vi Ness•17mo ago

I skimmed a couple stackoverflow posts and I think this answer sums it up: MVVM, and design patterns in general, add complexity to simple applications but for complex ones it adds structure that make your life easier https://stackoverflow.com/a/20524980

Stack Overflow

Why use MVVM?

Okay, I have been looking into MVVM pattern, and each time I have previously tried looking into it, I gave up for a number of reasons: Unnecessary Extra Long Winded Coding No apparent advantages for

Mekasu0124OP•17mo ago

oh ok. it's just annoying lol

Vi Ness•17mo ago

This project will just use the basics of it. You'll only have one View and one ViewModel

Mekasu0124OP•17mo ago

oh lord lol so then after the series, I'll have to manually figure out how to have various views and viewmodels yay

Vi Ness•17mo ago

That'll just mean it's time for another tutorial!

Mekasu0124OP•17mo ago

oh lord lmao if you have one, I'll definitely bookmark it to follow after this series

Mekasu0124OP•17mo ago

ok so the next video, he starts working with Template Control. He right clicks his project, hovers over Add and selects Avalonia Template Control, but I don't have that so what am I doing wrong?

Mekasu0124OP•17mo ago

don't get me wrong, I can totally just create a new file and name it what he did and retype all the code that came boiler plate with those actions, but I'm curious as to why I don't have that action

Vi Ness•17mo ago

I normally do Add -> New Item.. then select Avalonia on the left to see those options. I think I have two sets from an old version of Avalonia

Vi Ness•17mo ago

I don't even have a Avalonia option for Add

Mekasu0124OP•17mo ago

oh ok. I'll give that a try

Mekasu0124OP•17mo ago

so I followed what you did, and now we're back to having to figure it out again

Vi Ness•17mo ago

Looks like you named it the same thing as the manual one you created earlier

Mekasu0124OP•17mo ago

wow I'm slow lol sorry to bother haha

Vi Ness•17mo ago

No worries

Mekasu0124OP•17mo ago

ok so another issue. In his video #5, his buttons here are set (red circle in screen shot) to 0,0,0,10 but I had to set mine to 30 to get them to line up like his does. Idk why but that's a weird issue

Vi Ness•17mo ago

I think mine ended up weird there too and I ended up using another grid. I'll look in a few

Mekasu0124OP•17mo ago

ok ty

Vi Ness•17mo ago

Here's how I ended up doing mine

            <!-- Statistics Panel -->
            <Grid Grid.Column="1" RowDefinitions="*,*,*,*,*,*,*,*,Auto"
                  Width="170" Margin="0,13">
                <controls:LargeLabelControl Grid.Row="0" LargeText="{Binding ShortTermLufsText}" SmallText="SHORT TERM"/>
                <controls:LargeLabelControl Grid.Row="1" LargeText="{Binding IntegratedLufsText}" SmallText="INTEGRATED" Background="{DynamicResource ResourceKey=LightBlueBrush}"/>
                <controls:LargeLabelControl Grid.Row="2" LargeText="{Binding LoudnessRangeText}" SmallText="LOUDNESS RANGE"/>
                <controls:LargeLabelControl Grid.Row="3" LargeText="{Binding RealtimeDynamicsText}" SmallText="REALTIME DYNAMICS"/>
                <controls:LargeLabelControl Grid.Row="4" LargeText="{Binding AverageDynamicsText}" SmallText="AVG. DYNAMICS (PLR)"/>
                
                <controls:LargeLabelControl Grid.Row="5" Classes="button" LargeText="{Binding MomentaryMaxLufsText}" SmallText="MOMENTARY MAX"/>
                <controls:LargeLabelControl Grid.Row="6" Classes="button" LargeText="{Binding ShortTermMaxLufsText}" SmallText="SHORT TERM MAX"/>
                <controls:LargeLabelControl Grid.Row="7" Classes="button" LargeText="{Binding TruePeakMaxText}" SmallText="TRUE PEAK MAX (LR)" Margin="0,0,0,5"/>
                <StackPanel Grid.Row="8" Orientation="Horizontal" Height="78"
                            HorizontalAlignment="Center">

                    <Button Classes="small" VerticalAlignment="Bottom" Margin="0,0,20,5" Padding="4">
                        AUTO
                    </Button>
                    <Button Classes="small" Width="30" Height="30"
                            FontSize="20" VerticalAlignment="Bottom"
                            Margin="0,0,0,3"
                            Background="{DynamicResource ResourceKey=FadedRedBrush}">
                        X
                    </Button>
                </StackPanel>
            </Grid>

            <!-- Statistics Panel -->
            <Grid Grid.Column="1" RowDefinitions="*,*,*,*,*,*,*,*,Auto"
                  Width="170" Margin="0,13">
                <controls:LargeLabelControl Grid.Row="0" LargeText="{Binding ShortTermLufsText}" SmallText="SHORT TERM"/>
                <controls:LargeLabelControl Grid.Row="1" LargeText="{Binding IntegratedLufsText}" SmallText="INTEGRATED" Background="{DynamicResource ResourceKey=LightBlueBrush}"/>
                <controls:LargeLabelControl Grid.Row="2" LargeText="{Binding LoudnessRangeText}" SmallText="LOUDNESS RANGE"/>
                <controls:LargeLabelControl Grid.Row="3" LargeText="{Binding RealtimeDynamicsText}" SmallText="REALTIME DYNAMICS"/>
                <controls:LargeLabelControl Grid.Row="4" LargeText="{Binding AverageDynamicsText}" SmallText="AVG. DYNAMICS (PLR)"/>
                
                <controls:LargeLabelControl Grid.Row="5" Classes="button" LargeText="{Binding MomentaryMaxLufsText}" SmallText="MOMENTARY MAX"/>
                <controls:LargeLabelControl Grid.Row="6" Classes="button" LargeText="{Binding ShortTermMaxLufsText}" SmallText="SHORT TERM MAX"/>
                <controls:LargeLabelControl Grid.Row="7" Classes="button" LargeText="{Binding TruePeakMaxText}" SmallText="TRUE PEAK MAX (LR)" Margin="0,0,0,5"/>
                <StackPanel Grid.Row="8" Orientation="Horizontal" Height="78"
                            HorizontalAlignment="Center">

                    <Button Classes="small" VerticalAlignment="Bottom" Margin="0,0,20,5" Padding="4">
                        AUTO
                    </Button>
                    <Button Classes="small" Width="30" Height="30"
                            FontSize="20" VerticalAlignment="Bottom"
                            Margin="0,0,0,3"
                            Background="{DynamicResource ResourceKey=FadedRedBrush}">
                        X
                    </Button>
                </StackPanel>
            </Grid>

Mekasu0124OP•17mo ago

oh ok so we're likely not the only two that came into that issue

Vi Ness•17mo ago

Yeah, and it's just a small aesthetics thing so nbd to tweak it

Mekasu0124OP•17mo ago

I'm trying to figure out how to record my screen because there's a visual issue as well when you grab the bottom corner of the window and go to playing with the screen resizing

Accord•17mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Mekasu0124OP•17mo ago

do you mind if I were to send you a DM? I have an idea that I want to keep super private and you feel trustworthy lol

Vi Ness•17mo ago

I don't mind

Gaming

Programming

✅ Margins not aligning with video