Rearrange AdvancedImage demo

AvaloniaUtils · Jul 19, 2022 · 3cb9401 · 3cb9401
1 parent 4406636
commit 3cb9401
Showing 1 changed file with 26 additions and 28 deletions.
diff --git a/AsyncImageLoader.Avalonia.Demo/Pages/AdvancedImagePage.axaml b/AsyncImageLoader.Avalonia.Demo/Pages/AdvancedImagePage.axaml
@@ -6,43 +6,41 @@
              xmlns:services="clr-namespace:AsyncImageLoader.Avalonia.Demo.Services"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="AsyncImageLoader.Avalonia.Demo.Pages.AdvancedImagePage">
-  <StackPanel>
-    <Grid ColumnDefinitions="* 8 Auto">
-      <StackPanel Grid.Column="0" HorizontalAlignment="Left">
-        <TextBlock TextWrapping="Wrap">
+  <Grid ColumnDefinitions="* 8 150 150" RowDefinitions="Auto Auto Auto Auto"
+        HorizontalAlignment="Center">
+    <TextBlock Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center">AdvancedImage</TextBlock>
+    <TextBlock Grid.Column="3" Grid.Row="0" HorizontalAlignment="Center">Image</TextBlock>
+
+    <StackPanel Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left">
+      <TextBlock TextWrapping="Wrap">
 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>
-        <Button HorizontalAlignment="Center"
-                Click="ReloadButton_OnClick">Reload</Button>
-      </StackPanel>
-      <asyncImageLoader:AdvancedImage
-        Name="ReloadableAdvancedImage" 
-        Grid.Column="2" 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}"/>
-    </Grid>
-
-    <Grid ColumnDefinitions="* 8 Auto Auto">
-      <TextBlock Grid.Column="0" TextWrapping="Wrap">
+      </TextBlock>
+      <Button HorizontalAlignment="Center"
+              Click="ReloadButton_OnClick">Reload</Button>
+    </StackPanel>
+    <asyncImageLoader:AdvancedImage
+      Name="ReloadableAdvancedImage" 
+      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">
 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>
-      <asyncImageLoader:AdvancedImage Grid.Column="2" Width="150" Height="150" Source="../Assets/cat4.jpg" />
-      <Image Grid.Column="3" Source="../Assets/cat4.jpg" Width="150" Height="150"  />
-    </Grid>
+    </TextBlock>
+    <asyncImageLoader:AdvancedImage Grid.Row="2" Grid.Column="2" Width="150" Height="150" Source="../Assets/cat4.jpg" />
+    <Image Grid.Row="2" Grid.Column="3" Source="../Assets/cat4.jpg" Width="150" Height="150"  />
 
-    <Grid ColumnDefinitions="* 8 Auto Auto">
-      <TextBlock Grid.Column="0" TextWrapping="Wrap">
+    <TextBlock Grid.Row="3" Grid.Column="0" TextWrapping="Wrap">
 Also, you can use specify absolute path to AvaloniaResource.
 Current images loaded from AvaloniaResource Source="/Assets/cat5.jpg".
-      </TextBlock>
-      <asyncImageLoader:AdvancedImage Grid.Column="2" Width="150" Height="150" Source="/Assets/cat5.jpg" />
-      <Image Grid.Column="3" Source="/Assets/cat5.jpg" Width="150" Height="150"  />
-    </Grid>
-  </StackPanel>
+    </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"  />
+  </Grid>
 </UserControl>