AsyncImageLoader.Avalonia/AsyncImageLoader.Avalonia.Demo/Pages/AdvancedImagePage.axaml at ce4e6f46df5ce1e226003f414abd0113365609d3 · AvaloniaUtils/AsyncImageLoader.Avalonia · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<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:asyncImageLoader="clr-namespace:AsyncImageLoader;assembly=AsyncImageLoader.Avalonia"
             xmlns:services="clr-namespace:AsyncImageLoader.Avalonia.Demo.Services"
             xmlns:converters="clr-namespace:AsyncImageLoader.Avalonia.Demo.Converters"
             mc:Ignorable="d" d:DesignWidth="800"
             x:Class="AsyncImageLoader.Avalonia.Demo.Pages.AdvancedImagePage">
  <Grid ColumnDefinitions="* 8 150 150" RowDefinitions="Auto Auto Auto Auto Auto Auto"
        HorizontalAlignment="Center">
    <TextBlock Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center" Text="AdvancedImage" />
    <TextBlock Grid.Column="3" Grid.Row="0" HorizontalAlignment="Center" Text="Image" />

    <StackPanel Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left">
      <TextBlock TextWrapping="Wrap">
        <TextBlock.Text>
          This control allows to specify a custom IAsyncImageLoader for particular control.
          Also this control has loading indicator support.

          I created and used loader, which will be delay image loading by one second.
        </TextBlock.Text>
      </TextBlock>
      <Button HorizontalAlignment="Center"
              Click="ReloadButton_OnClick">
        Reload
      </Button>
    </StackPanel>
    <asyncImageLoader:AdvancedImage
      Name="ReloadableAdvancedImage"
      AutoCleanupEnabled="True"
      Grid.Column="2" Grid.Row="1" Width="150" Height="150"
      Source="https://github.com/AvaloniaUtils/AsyncImageLoader.Avalonia/raw/master/AsyncImageLoader.Avalonia.Demo/Assets/cat0.jpg"
      Loader="{x:Static services:LongLoader.Instance}" />

    <TextBlock Grid.Row="2" Grid.Column="0" TextWrapping="Wrap">
      <TextBlock.Text>
        This control provides access to BaseUri.
        So you can not only upload pictures from a file or from the Internet, but also specify their relative path as in the usual Image.
        This control fully implements the functionality of Image, and adds all the functions of the loaders.
        Current images loaded from AvaloniaResource Source="../Assets/cat4.jpg".
      </TextBlock.Text>
    </TextBlock>
    <asyncImageLoader:AdvancedImage Grid.Row="2" Grid.Column="2" Width="150" Height="150" Source="../Assets/cat4.jpg"
                                    AutoCleanupEnabled="True"/>
    <Image Grid.Row="2" Grid.Column="3" Source="../Assets/cat4.jpg" Width="150" Height="150" />

    <TextBlock Grid.Row="3" Grid.Column="0" TextWrapping="Wrap">
      <TextBlock.Text>
        Also, you can use specify absolute path to AvaloniaResource.
        Current images loaded from AvaloniaResource Source="/Assets/cat5.jpg".
      </TextBlock.Text>
    </TextBlock>
    <asyncImageLoader:AdvancedImage Grid.Row="3" Grid.Column="2" Width="150" Height="150" Source="/Assets/cat5.jpg" />
    <Image Grid.Row="3" Grid.Column="3" Source="/Assets/cat5.jpg" Width="150" Height="150" />

    <TextBlock Grid.Row="4" Grid.Column="0" TextWrapping="Wrap">
      <TextBlock.Text>
        CornerRadius also works for AdvancedImage
        (While Avalonia's Image wrapped in Border with CornerRadius and ClipToBounds doesn't work now)
      </TextBlock.Text>
    </TextBlock>
    <asyncImageLoader:AdvancedImage Grid.Row="4" Grid.Column="2"
                                    Width="150" Height="150" CornerRadius="5 10 15 20"
                                    Source="/Assets/cat5.jpg"
                                    AutoCleanupEnabled="True"
                                     />
    <Border Grid.Row="4" Grid.Column="3" CornerRadius="5 10 15 20" ClipToBounds="True" Width="150" Height="150">
      <Image Source="/Assets/cat5.jpg" Width="150" Height="150" />
    </Border>

    <StackPanel Grid.Row="5" Grid.Column="0" HorizontalAlignment="Left">
      <TextBlock TextWrapping="Wrap">
        <TextBlock.Text>
          You can set CurrentImage property by youself. This sets Source back to null.
        </TextBlock.Text>
      </TextBlock>
      <TextBlock>
        <Run>Source: </Run>
        <Run Text="{Binding #CurrentImageExample.Source}"></Run>
      </TextBlock>
      <TextBlock>
        <Run>CurrentImage: </Run>
        <Run Text="{Binding #CurrentImageExample.CurrentImage, Converter={x:Static converters:GetClassNameConverter.Instance}, Mode=OneWay}" />
      </TextBlock>
      <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <Button Click="SetSourceButton_OnClick">Set Source</Button>
        <Button Click="SetCurrentImageButton_OnClick">Set CurrentImage</Button>
      </StackPanel>
    </StackPanel>
    <asyncImageLoader:AdvancedImage Grid.Row="5" Grid.Column="2"
                                    Name="CurrentImageExample"
                                    Width="150" Height="150"
                                    Source="/Assets/cat5.jpg"
                                    AutoCleanupEnabled="True"
                                     />
  </Grid>
</UserControl>