maui-linux/samples/ControlGallery/Pages/ImagesPage.xaml

103 lines
4.7 KiB
XML

<?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="ControlGallery.Pages.ImagesPage"
Title="Images">
<ScrollView>
<VerticalStackLayout Spacing="20" Padding="20">
<Label Text="Image Controls" FontSize="24" FontAttributes="Bold" />
<!-- Basic Image -->
<Frame Padding="15" CornerRadius="8">
<VerticalStackLayout Spacing="10">
<Label Text="Basic Image" FontAttributes="Bold" />
<Image Source="dotnet_bot.png"
WidthRequest="150"
HeightRequest="150"
HorizontalOptions="Center" />
</VerticalStackLayout>
</Frame>
<!-- Image Aspect Ratios -->
<Frame Padding="15" CornerRadius="8">
<VerticalStackLayout Spacing="10">
<Label Text="Aspect Ratios" FontAttributes="Bold" />
<HorizontalStackLayout Spacing="10">
<VerticalStackLayout>
<Label Text="AspectFit" FontSize="12" HorizontalOptions="Center" />
<Image Source="dotnet_bot.png"
Aspect="AspectFit"
WidthRequest="80"
HeightRequest="80"
BackgroundColor="{StaticResource Gray100}" />
</VerticalStackLayout>
<VerticalStackLayout>
<Label Text="AspectFill" FontSize="12" HorizontalOptions="Center" />
<Image Source="dotnet_bot.png"
Aspect="AspectFill"
WidthRequest="80"
HeightRequest="80"
BackgroundColor="{StaticResource Gray100}" />
</VerticalStackLayout>
<VerticalStackLayout>
<Label Text="Fill" FontSize="12" HorizontalOptions="Center" />
<Image Source="dotnet_bot.png"
Aspect="Fill"
WidthRequest="80"
HeightRequest="80"
BackgroundColor="{StaticResource Gray100}" />
</VerticalStackLayout>
</HorizontalStackLayout>
</VerticalStackLayout>
</Frame>
<!-- Image in Border -->
<Frame Padding="15" CornerRadius="8">
<VerticalStackLayout Spacing="10">
<Label Text="Image with Border" FontAttributes="Bold" />
<Border StrokeThickness="3"
Stroke="{StaticResource Primary}"
StrokeShape="RoundRectangle 20"
HorizontalOptions="Center">
<Image Source="dotnet_bot.png"
WidthRequest="120"
HeightRequest="120"
Aspect="AspectFill" />
</Border>
</VerticalStackLayout>
</Frame>
<!-- Circular Image -->
<Frame Padding="15" CornerRadius="8">
<VerticalStackLayout Spacing="10">
<Label Text="Circular Image (Avatar Style)" FontAttributes="Bold" />
<Border StrokeThickness="0"
StrokeShape="RoundRectangle 60"
HorizontalOptions="Center"
WidthRequest="120"
HeightRequest="120">
<Image Source="dotnet_bot.png"
Aspect="AspectFill" />
</Border>
</VerticalStackLayout>
</Frame>
<!-- Image Loading States -->
<Frame Padding="15" CornerRadius="8">
<VerticalStackLayout Spacing="10">
<Label Text="Image Loading" FontAttributes="Bold" />
<Label Text="Images support loading indicators and error handling" TextColor="{StaticResource Gray500}" />
<Image Source="https://via.placeholder.com/150"
WidthRequest="150"
HeightRequest="150"
HorizontalOptions="Center" />
</VerticalStackLayout>
</Frame>
</VerticalStackLayout>
</ScrollView>
</ContentPage>