vscode开发avalonia

安装

安装.net 8

安装avalonia模板

bash 复制代码
dotnet new install Avalonia.Templates

创建项目

bash 复制代码
dotnet new avalonia.app -o GetStartedApp

安装c# dev kit插件和Avalonia for VSCode Community




dotnet run运行

修改代码

MainWindow.axaml

xml 复制代码
<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="200" d:DesignHeight="450"
        x:Class="GetStartedApp.MainWindow"
        Title="GetStartedApp">
    <TextBlock Text="My Text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Window>

继续修改代码

xml 复制代码
<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="200" d:DesignHeight="450"
        x:Class="GetStartedApp.MainWindow"
        Title="GetStartedApp">
     <Button HorizontalAlignment="Center">Calculate</Button>
</Window>

增加布局

xml 复制代码
<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="200" d:DesignHeight="450"
        x:Class="GetStartedApp.MainWindow"
        Title="GetStartedApp">
  <StackPanel>
    <Border Margin="5" 
        CornerRadius="10"
        Background="LightBlue">
        <TextBlock Margin="5"
          FontSize="24" 
          HorizontalAlignment="Center"
          Text="温度转换器">
        </TextBlock>
    </Border>
    <Grid ShowGridLines="True"  Margin="5" 
      ColumnDefinitions="120, 100" 
      RowDefinitions="Auto, Auto, Auto">
        <Label Grid.Row="0" Grid.Column="0" Margin="10">Celsius</Label>
        <TextBox Name="celsius" Grid.Row="0" Grid.Column="1" Margin="0 5" Text="0"/>
        <Label Grid.Row="1" Grid.Column="0" Margin="10">Fahrenheit</Label>
        <TextBox Name="fahrenheit" Grid.Row="1"  Grid.Column="1" Margin="0 5" Text="0"/>
        <Button Grid.Row="2" Grid.Column="1" Margin="0 5" Click="ButtonClicked">Calculate</Button>
    </Grid>  
  </StackPanel>
</Window>

绑定点击事件,修改MainWindow.axaml.cs

cs 复制代码
public void ButtonClicked(object source, RoutedEventArgs args)
{
   Debug.WriteLine("Click!");
   Debug.WriteLine($"Click! Celsius={celsius.Text}");
   if (double.TryParse(celsius.Text, out double C))
   {
       var F = C * (9d / 5d) + 32;
       fahrenheit.Text = F.ToString("0.0");
   }
   else
   {
       celsius.Text = "0";
       fahrenheit.Text = "0";
   }
}

参考

https://docs.avaloniaui.net/zh-Hans/docs/welcome

相关推荐
jinhuazhe20134 小时前
如何解决vscode powershell乱码
ide·vscode·编辑器
mahuifa4 小时前
混合开发环境---使用编程AI辅助开发Qt
人工智能·vscode·qt·qtcreator·编程ai
paintstar7 小时前
vscode 快速切换cangjie版本
ide·vscode·编辑器·仓颉·cangjie
科协软件20187 小时前
vscode+latex快捷键
ide·vscode·编辑器
半糖11228 小时前
【VSCode】常用插件汇总
vscode·编辑器
cnnews8 小时前
在vscode中的ESP-IDF插件中使用Arduino框架作为组件
ide·vscode·编辑器
乐闻x9 小时前
VSCode 插件开发实战(三):插件配置项自定义设置
ide·vscode·编辑器
羊小猪~~10 小时前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5
qq_3975623114 小时前
android studio更改应用图片,和应用名字。
android·ide·android studio
峥嵘life14 小时前
Android Studio版本升级那些事
android·ide·android studio