SunlightAggregationTerminal/InfoPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SunlightAggregationTerminal.InfoPage"                        
             xmlns:converters="clr-namespace:SunlightAggregationTerminal.Converters"
             Title="设备信息">
    <ContentPage.Resources>
        <ResourceDictionary>
            <converters:StringToImageConverter x:Key="StringToImageConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <ScrollView>
        <VerticalStackLayout Padding="20" Spacing="20">
            <CollectionView x:Name="CardCollectionView"              
                 ItemsSource="{Binding InfoItems}"
                 RemainingItemsThreshold="5">
                <!-- 保持滚动条 -->
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <!-- 这里定义单个卡片的 UI 结构 -->
                        <Border BackgroundColor="White" Stroke="#CCCCCC"                 
                                StrokeThickness="2" Margin="10,0,10,10"                
                                StrokeShape="RoundRectangle 10">
                            <Grid>
                                <!-- 定义一行 -->
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid Grid.Row="0" BackgroundColor="#CCCCCC">
                                    <Label Text="{Binding Name}" FontAttributes="Bold" 
                                           FontSize="24" TextColor="Black"
                                           Padding="5"/>
                                </Grid>
                                <Grid Grid.Row="1">
                                    <VerticalStackLayout>
                                        <Grid>
                                            <HorizontalStackLayout>
                                                <!-- 图片 -->
                                                <Image WidthRequest="100" HeightRequest="100"
                                                       Source="{Binding Path=Model, Converter={StaticResource StringToImageConverter}}"/>
                                                <!-- 设备状态 -->
                                                <VerticalStackLayout>
                                                    <HorizontalStackLayout>
                                                        <Label Text="状态: " FontAttributes="Bold"                                         
                                                               FontSize="22" TextColor="Black"/>
                                                        <Label Text="{Binding State}" FontAttributes="Bold"                                       
                                                               FontSize="22" TextColor="Black"/>
                                                    </HorizontalStackLayout>
                                                    <HorizontalStackLayout>
                                                        <Label Text="机台: " FontAttributes="Bold"                                         
                                                               FontSize="22" TextColor="Black"/>
                                                        <Label Text="{Binding Machine}" FontAttributes="Bold"                                        
                                                               FontSize="22" TextColor="Black"/>
                                                    </HorizontalStackLayout>
                                                </VerticalStackLayout>
                                            </HorizontalStackLayout>
                                        </Grid>
                                        <BoxView HeightRequest="3" Color="#CCCCCC" />
                                        <HorizontalStackLayout>
                                            <!-- 设备信息 -->
                                            <Label Text="{Binding Information}" FontAttributes="Bold"                                        
                                                   FontSize="22" TextColor="Black"/>
                                        </HorizontalStackLayout>
                                    </VerticalStackLayout>
                                </Grid>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>