Avalonia笔记1

学习笔记：

由于对Xaml并不熟悉，对于其预定义的元素、属性等各种设计并不清楚，因此在学习的同时，记录一下，有助于与我情况相同的同学参考一下。

一、公共属性

1. HorizontalAlignment 父元素内 水平方向定位，值：Left、Center、Right、Stretch（默认）

        stretch：子元素被拉伸以填充父元素分配的空间。

        区别于html的div，默认是width和height均为0，而stretch默认为最大。

2. VerticalAlignment 垂直方向定位，值：Top、Center、Bottom、Stretch。

3. Margin  同级元素的距离

        区别与Html的margin，

        Margin="0,10,5,25"， html：上右下左；此处：左上右下

4. Padding  注意点与Margin相同

5. CornerRadius  css中的border-radius

6. BorderThickness  边框宽度

7. BorderBrush  边框颜色  brush：画笔

8. Orientation 方向 Orientation="Vertical"  |  Orientation="Horizontal"

9. LastChildFill  值：true/false ，最后一个元素填充剩余空间，默认为true；

10. DockPanel.Dock 来设置子内容元素在容器边缘的位置

11. ClipToBounds值：true/false ，允许子元素绘制在父元素之外；

12. Width；

13. Height；

14. GridLinesVisibility：网格线是否可见，值为All,Horizontal,None,Vertical；

二、元素

文本系列

1. TextBlock 类似于Label

<TextBlock Margin="0 5" FontSize="18" FontWeight="Bold">Heading</TextBlock>

<TextBlock FontStyle="Italic" Text=“Heading”></TextBlock>

属性：Text、FontSize、FontWeight、FontStyle、TextDecorations、xml:space

Text：可以写在标签中间，也可以使用Text赋值，当text为绑定值的时候用Text

FontStyle：默认normal，还有italic和oblique

TextDecorations：Underline(下划线)、Strikethrough(删除线)、Baseline(基线)、Overline(覆盖线)

xml:space：保留换行和空白

2. TextBox   类似input

属性：Text、PasswordChar、Watermark、AcceptsReturn、TextWrapping

PassworChar：隐藏输入字符，且显示的字符可设置PassworChar=“*”

Watermark: 类似于placeholder

AcceptsReturn：允许多行输入；值为True/False

TextWrapping：处理水平行溢出，“NoWrap”、“Wrap”和“WrapWithOverflow

3. MaskedTextBox 特殊格式的输入框

属性：Mask、AsciiOnly、Text

表格系列

4. DataGrid

必须引用nuget包

<PackageReference Include="Avalonia.Controls.DataGrid" Version="11.0.0" />
<PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.6"/>

 属性：

AutoGenerateColumns：自动生成列表头(默认为false)

ItemsSource：数据源集合，必须是ObservableCollection类型

IsReadOnly：true时只读，(默认为false)

CanUserReorderColumns： 拖动表头更改列的显示顺序(默认为false)

CanUserResizeColumns：是否可以更改列的宽度(默认为false)

CanUserSortColumns：是否可以点击表头来对列进行排序(默认为true)

当AutoGenerateColumns设置为false时，可以如下设置表头

<DataGrid.Columns>
    <DataGridTextColumn Header="First Name"  Binding="{Binding FirstName}"/>
    <DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" />
</DataGrid.Columns>

 数据列：

DataGridTextColumn：用于显示和编辑列数据的文本框

DataGridCheckBoxColumn：复选框

DataGridTemplateColumn：自定义列

列属性：

Header

HeaderTemplate

IsReadOnly

IsThreeState：仅适用于复选框列。当可空布尔值为null时，启用第三个（填充）状态。

Width

三、注册事件的两种方式

1. Command

<Button Content="按钮command" Command="{Binding BtnCommand}" CommandParameter="1222" Grid.Row="3"></Button>

public ICommand BtnCommand { get; set; }

public MainWindowViewModel()
{  
    BtnCommand = ReactiveCommand.Create<string>(DoBtnCommand);
}
private void DoBtnCommand(string args)
{
    Greeting =args;
    this.RaisePropertyChanged(nameof(Greeting));
}

 2.Method

<Button Content="按钮Method" Command="{Binding BtnMethod}" CommandParameter="899" Grid.Row="4"></Button>

public void BtnMethod(string args)
{
    Greeting = args;
    this.RaisePropertyChanged("Greeting");
}