Avalonia 常用控件一

1、Border

            Background：背景颜色
            BorderBrush：边框线颜色
            BorderThickness：边框线宽度
            CornerRadius：边框圆角
            Padding：内边距
            Margin：外边距
            BoxShadow：
                第一个参数：offset-x，x轴方向移动阴影。
                第二个参数：offset-y，y轴方向移动阴影。
                第三个参数：blur-radius，该值越大，模糊效果就越大，因此阴影会变得更大、更轻。不允许使用负值。如果未指定，则使用默认值（零），并且阴影边是尖锐的。
                第四个参数：spread-radius，正值会导致阴影扩大和变大，负值会导致阴影缩小。如果未指定，它将为0（阴影将与元素大小相同）。
                第五个参数：color，使用颜色名称（如红色）、#前缀和十六进制颜色值的阴影的颜色。例如：#dadada

	<StackPanel>
		<Border Background="Gainsboro"
				BorderBrush="Black"
				BorderThickness="2"
				CornerRadius="3"
				Padding="10"
				Margin="10"
				BoxShadow="5 10 20 0 #dadada">
			<TextBlock>Box 1</TextBlock>
			<!--
			Background：背景颜色
			BorderBrush：边框线颜色
			BorderThickness：边框线宽度
			CornerRadius：边框圆角
			Padding：内边距
			Margin：外边距
			BoxShadow：
				第一个参数：offset-x，x轴方向移动阴影。
				第二个参数：offset-y，y轴方向移动阴影。
				第三个参数：blur-radius，该值越大，模糊效果就越大，因此阴影会变得更大、更轻。不允许使用负值。如果未指定，则使用默认值（零），并且阴影边是尖锐的。
				第四个参数：spread-radius，正值会导致阴影扩大和变大，负值会导致阴影缩小。如果未指定，它将为0（阴影将与元素大小相同）。
				第五个参数：color，使用颜色名称（如红色）、#前缀和十六进制颜色值的阴影的颜色。例如：#dadada
			-->
		</Border>
		<Border Background="Gainsboro"
				BorderBrush="Black"
				BorderThickness="2"
				CornerRadius="3"
				Padding="10" Margin="10">
			<TextBlock>Box 2</TextBlock>
		</Border>
		
	</StackPanel>

2、DataGrid

NuGet中添加Avalonia.Controls.DataGrid如下图

App.axaml 文件中添加

<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>

代码如下图：

    <Application.Styles>
        <FluentTheme />
		<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
    </Application.Styles>

创建文件夹Models，添加类Person.cs，代码如下

    public  class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int AgeInYears { get; set; }

        public Person(string firstName,string lastName,int ageInYears)
        {
            FirstName= firstName;
            LastName= lastName; 
            AgeInYears= ageInYears;
        }
    }

 修改ViewModels文件夹中的MainViewModel.cs类代码如下

public class MainViewModel : ViewModelBase
{
    public ObservableCollection<Person> People { get; }

    public MainViewModel()
    {
        var people = new List<Person>
            {
                new Person("Neil", "Armstrong",  55),
                new Person("Buzz", "Lightyear", 38),
                new Person("James", "Kirk", 44)
            };
        People = new ObservableCollection<Person>(people);
    }
}

修改Views文件夹下MainView.axaml代码如下

	 <DataGrid Margin="20"					  
		  ItemsSource="{Binding People}"
		  GridLinesVisibility="All"
		  BorderThickness="1"
					  BorderBrush="Black">
				<DataGrid.Columns>
					<DataGridTextColumn Header="First Name" Width="2*"
					   Binding="{Binding FirstName}" />
					<DataGridTextColumn Header="Last Name" Width="2*"
					   Binding="{Binding LastName}" />

					<DataGridTemplateColumn Header="Age">
						<DataGridTemplateColumn.CellTemplate>
							<DataTemplate DataType="model:Person">
								<TextBlock Text="{Binding AgeInYears, StringFormat='{}{0} years'}"
								  VerticalAlignment="Center" HorizontalAlignment="Center" />
							</DataTemplate>
						</DataGridTemplateColumn.CellTemplate>
						<DataGridTemplateColumn.CellEditingTemplate>
							<DataTemplate DataType="model:Person">
								<NumericUpDown Value="{Binding AgeInYears}"
								   FormatString="N0" Minimum="0" Maximum="120"
								   HorizontalAlignment="Stretch"/>
							</DataTemplate>
						</DataGridTemplateColumn.CellEditingTemplate>
					</DataGridTemplateColumn>
				</DataGrid.Columns>
			</DataGrid>

运行效果如下