Avalonia.Markup.Declarative 11.0.11

Avalonia.Markup.Declarative

用C#编写Avalonia UI

Avalonia.Markup.Declarative 是一组基类和扩展方法，用于在Avalonia控件上定义以C#代码而不是XAML表示的视图/标记。

安装

将Avalonia.Markup.Declarative NuGet软件包添加到您的项目

使用

public class MainView : ViewBase<MainViewModel>
{
    public static IValueConverter InverseBooleanConverter { get; } 
        = new FuncValueConverter<bool, bool>(b => !b);

    // This method is executed before View building
    protected override void OnCreated()
    {
        ViewModel = new MainViewModel();
    }

    // Define markup in Build method
    protected override object Build(MainViewModel vm) =>
        new Grid()
            
            .Styles(
                new Style<Button>(s => s.Class(":pointerover"))		//make button red when pointer is over using avalonia styles
                    .Background(Brushes.Red)
            )

            .Cols("Auto, 100, *")					// equivalent of Grid.ColumnDefintions property
            .Background(Brushes.Green) 					// the same as grid.Background = Brushes.Green
            .Children(
                
                new TextBlock()
                    .Text( @vm.TextVal ), 				// use @ character prefix to Bind control's property to ViewModel's property

                new TextBlock()
                    .Col(1) //equivalent of Grid.SetColumn(textBlock, 1)
                    .IsVisible( @vm.HideGreeting, 			// Bind TextBlock.IsVisible to MainViewModel.HideGreeting property
                                bindingMode: BindingMode.OneWay, 	// We can set Binding mode if necessary.
                                converter: InverseBooleanConverter ),	// Set value converter to invert values.
                    .Text( "Hello Avalonia" ), 

                new Button()
                    .Col(2) //equivalent of Grid.SetColumn(textBlock, 1)
                    // we don't actually need binding here, 
                    // so just direct set to Command on view model
                    .Command(vm.ClickButtonCommand) 
                    .Content("Click me") // Content = "Click me"
                    .Padding(left: 8) //Set left padding to 8
                    .With(ButtonStyle) //Execute LabelStyle method over TextBlock control 
            );

    private void ButtonStyle(Button b) => b
        .VerticalAlignment(VerticalAlignment.Center)
        .FontSize(12);
}

热重载支持

• ViewBase类自动支持.NET 6.0+'s 热重载功能。

• 请确保您的视图类位于不包含任何XAML文件的程序集中，否则热重载将始终抛出“需要重新构建”消息。

• 2023注意 - 根据最新报告，与.NET 7.0及最新版本 Grades 相比，AXAML文件和热重载功能之间不再存在冲突。因此，您可以在同一个项目中混合AXAML和C#标记。

在自定义控件上支持属性

有两个源生成器可以将标记扩展添加到您自己的控件中。如果您已下载源代码或克隆了此仓库，请通过在您的 csproj 文件中引用Avalonia.Markup.Declarative.SourceGenerator项目来添加它们，如下所示

	<ItemGroup>
		<ProjectReference Include="..\..\AvaloniaMarkup.Declarative.SourceGenerator\Avalonia.Markup.Declarative.SourceGenerator.csproj" OutputItemType="Analyzer" ReferenceOutputAssembly="false" />
	</ItemGroup>

• 请确保源生成项目相对于您的项目路径正确。

MVU模式实现

受Blazor组件布局的启发。一个基本的组件应如下所示

public class Component : ComponentBase
{

//styles
	protected override StyleGroup? BuildStyles() =>
	[
		new Style<Button>()
			.Margin(6)
			.Background(Brushes.DarkSalmon),
	];

//markup part
    protected override object Build() =>
        new StackPanel()
            .Children(
                new TextBlock()
                    .Ref(out _textBlock1)
                    .Text("Hello world"),
                new TextBlock()
                    .Text(() => $"Counter: {(Counter == 0 ? "zero" : Counter)}"),
                new Button()
                    .Content("Click me")
                    .OnClick(OnButtonClick)
            );
            
//code part
    [Inject] SampleDataService DataService { get; set; } = null!; //service injection

    public int Counter { get; set; } //no need to implement AvaloniaProperty or OnPropertyChanged behaviors, since component has registry of all properties and emits ProperyChanged event after changing state of component.

    private void OnButtonClick(RoutedEventArgs e)
    {
        Counter++;
        _textBlock1.Text = DataService.GetData();
        StateHasChanged(); //for now we have to call this method manually. In future there will be some additional triggers like user input, that will rise this method automatically
    }
}