Image

带圆角与五种填充方式的 Avalonia Image。

示例可交互

Image — Avalonia UIKit

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <Image Classes="rounded-lg" Width="192" Height="96"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <Image Classes="rounded-lg" Width="96" Height="96" Stretch="UniformToFill"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <Image Classes="rounded-lg" Width="96" Height="96" Stretch="Uniform"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
</StackPanel>

用法

Image 默认不套用主题：图片保留自身颜色，默认填充方式为 Avalonia 的 Stretch="Uniform"。三个样式类会把绘制的图片裁成圆角：rounded（主题圆角半径 6）、rounded-lg（8）和 rounded-full（胶囊形；圆角半径会被限制为较短边的一半）。五种填充方式通过 Stretch 设置：

`Image`	绘制效果
`Stretch="Fill"`	图片拉伸至整个框，忽略宽高比
`Stretch="Uniform"`（默认）	完整图片，缩放至框内
`Stretch="UniformToFill"`	图片缩放至覆盖整个框，并被裁剪到框内
`Stretch="Uniform" StretchDirection="DownOnly"`	与 `Uniform` 相同，但较小的图片保持原尺寸
`Stretch="None"` 搭配 `HorizontalAlignment="Left" VerticalAlignment="Top"`	图片保持原尺寸，位于左上角

若要在 UI 线程之外从 URI 加载图片，并使用加载中内容与回退内容，请使用 uikit:AsyncImage。

示例

96px 框中的五种填充方式：前三种使用宽图，DownOnly 与 None 使用小图。

填充方式可交互

Live demo unavailable

<WrapPanel ItemSpacing="16" LineSpacing="16">
  <StackPanel Spacing="4">
    <Border Width="96" Height="96" BorderThickness="1" BorderBrush="{DynamicResource UIKit.Border}">
      <Image Stretch="Fill" Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
    </Border>
    <TextBlock Text="Fill" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
  <StackPanel Spacing="4">
    <Border Width="96" Height="96" BorderThickness="1" BorderBrush="{DynamicResource UIKit.Border}">
      <Image Stretch="Uniform" Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
    </Border>
    <TextBlock Text="Uniform" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
  <StackPanel Spacing="4">
    <Border Width="96" Height="96" BorderThickness="1" BorderBrush="{DynamicResource UIKit.Border}">
      <Image Stretch="UniformToFill" Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
    </Border>
    <TextBlock Text="UniformToFill" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
  <StackPanel Spacing="4">
    <Border Width="96" Height="96" BorderThickness="1" BorderBrush="{DynamicResource UIKit.Border}">
      <Image Stretch="Uniform" StretchDirection="DownOnly" Source="avares://AvaloniaUIKit.Demos/Assets/small-48x48.png" />
    </Border>
    <TextBlock Text="DownOnly" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
  <StackPanel Spacing="4">
    <Border Width="96" Height="96" BorderThickness="1" BorderBrush="{DynamicResource UIKit.Border}">
      <Image Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"
             Source="avares://AvaloniaUIKit.Demos/Assets/small-48x48.png" />
    </Border>
    <TextBlock Text="None" FontSize="12" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
</WrapPanel>

方形图片上的 rounded、rounded-lg 与 rounded-full，以及宽图上的 rounded-full。

圆角可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <Image Classes="rounded" Width="96" Height="96" Stretch="UniformToFill"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <Image Classes="rounded-lg" Width="96" Height="96" Stretch="UniformToFill"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <Image Classes="rounded-full" Width="96" Height="96" Stretch="UniformToFill"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
  <Image Classes="rounded-full" Width="192" Height="96"
         Source="avares://AvaloniaUIKit.Demos/Assets/wide-192x96.png" />
</StackPanel>

Image

#用法

#示例

用法

示例