Avalonia 常用控件六 Repeating Data Controls

1、DataGrid

    public class Demo1ViewModel : ViewModelBase
    {
        public ObservableCollection<Person1> People { get; }

        public Demo1ViewModel()
        {
            var people = new List<Person1>
            {
                new Person1("Neil", "Armstrong", false),
                new Person1("Buzz", "Lightyear", true),
                new Person1("James", "Kirk", true)
            };
            People = new ObservableCollection<Person1>(people);
        }
    }

public partial class Demo1View : UserControl
{
    public Demo1View()
    {
        InitializeComponent();
        this.DataContext = new Demo1ViewModel();
    }
}

    public class Person1
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public bool IsFictitious { get; set; }

        public Person1(string firstName, string lastName, bool isFictitious)
        {
            FirstName = firstName;
            LastName = lastName;
            IsFictitious = isFictitious;
        }
    }

以下代码需要注意

 x:DataType="viewModels:Demo1ViewModel"

<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:viewModels="clr-namespace:AvaloniaStepByStepLearning.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:DataType="viewModels:Demo1ViewModel"
             x:Class="AvaloniaStepByStepLearning.Views.Demo1View">
	<Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
         to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <viewModels:Demo1ViewModel />
    </Design.DataContext>
    
    <StackPanel>
        <DataGrid Margin="20" ItemsSource="{Binding People}"
                  GridLinesVisibility="All"
                  BorderThickness="1" BorderBrush="Gray">
            <DataGrid.Columns>
                <DataGridTextColumn Header="First Name"  Binding="{Binding FirstName}"/>
                <DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" />
                <DataGridCheckBoxColumn Header="Fictitious?" Binding="{Binding IsFictitious}" />
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>
</UserControl>

2、Items Control

        <StackPanel Margin="20">
            <TextBlock Margin="0 5">List of Peple:</TextBlock>
            <ItemsControl ItemsSource="{Binding People}" >
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border Margin="0,10,0,0"
                                CornerRadius="5"
                                BorderBrush="Gray" BorderThickness="1"
                                Padding="5">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding FirstName}"/>
                                <TextBlock Margin="5 0" FontWeight="Bold"
                                           Text="{Binding LastName}"/>
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>

3、 Items Repeater

NuGet中引入Avalonia.Controls.ItemsRepeater

效果如下

        <StackPanel Margin="20">
            <TextBlock Margin="0 5">List of crockery:</TextBlock>
            <ScrollViewer HorizontalScrollBarVisibility="Auto">
                
                <ItemsRepeater ItemsSource="{Binding People}" Margin="0 20">
                    <ItemsRepeater.Layout>
                        <StackLayout Spacing="40"
                                     Orientation="Horizontal" />
                    </ItemsRepeater.Layout>
                    <ItemsRepeater.ItemTemplate>
                        <DataTemplate>
                            <Border Margin="0,10,0,0"
                                    CornerRadius="5"
                                    BorderBrush="Blue" BorderThickness="1"
                                    Padding="5">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding FirstName}"/>
                                    <TextBlock Margin="5 0" FontWeight="Bold"
                                               Text="{Binding LastName}"/>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </ItemsRepeater.ItemTemplate>
                </ItemsRepeater>
            </ScrollViewer>
        </StackPanel>

4、List Box

        <DockPanel Margin="20">
            <TextBlock Margin="0 5" DockPanel.Dock="Top">Choose an People:</TextBlock>
            <ListBox x:Name="People" ItemsSource="{Binding People}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Border BorderBrush="Blue" BorderThickness="1"
                                CornerRadius="4" Padding="4">
                            <TextBlock Text="{Binding FirstName}"/>
                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </DockPanel>

 5、Combo Box

        <StackPanel Margin="20">
            <ComboBox SelectedIndex="0">
                <ComboBoxItem>
                    <Panel>
                        <Ellipse Width="50" Height="50" Fill="Red"/>
                        <TextBlock VerticalAlignment="Center"
                                   HorizontalAlignment="Center">Red</TextBlock>
                    </Panel>
                </ComboBoxItem>
                <ComboBoxItem>
                    <Panel>
                        <Ellipse Width="50" Height="50" Fill="Orange"/>
                        <TextBlock VerticalAlignment="Center"
                                   HorizontalAlignment="Center">Amber</TextBlock>
                    </Panel>
                </ComboBoxItem>
                <ComboBoxItem>
                    <Panel>
                        <Ellipse Width="50" Height="50" Fill="Green"/>
                        <TextBlock VerticalAlignment="Center"
                                   HorizontalAlignment="Center">Green</TextBlock>
                    </Panel>
                </ComboBoxItem>
            </ComboBox>
        </StackPanel>