CarouselTransitionsPage.xaml 3.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <UserControl xmlns="https://github.com/avaloniaui"
  2. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3. x:Class="ControlCatalog.Pages.CarouselTransitionsPage">
  4. <DockPanel>
  5. <ScrollViewer DockPanel.Dock="Right" Width="260">
  6. <StackPanel Margin="12" Spacing="8">
  7. <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
  8. Foreground="{DynamicResource SystemControlHighlightAccentBrush}" />
  9. <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" />
  10. <Button x:Name="PreviousButton"
  11. Content="Previous"
  12. HorizontalAlignment="Stretch" />
  13. <Button x:Name="NextButton"
  14. Content="Next"
  15. HorizontalAlignment="Stretch" />
  16. <Separator />
  17. <TextBlock Text="Transition" FontWeight="SemiBold" FontSize="13" />
  18. <ComboBox x:Name="TransitionCombo"
  19. HorizontalAlignment="Stretch"
  20. SelectedIndex="1">
  21. <ComboBoxItem>None</ComboBoxItem>
  22. <ComboBoxItem>Page Slide</ComboBoxItem>
  23. <ComboBoxItem>Cross Fade</ComboBoxItem>
  24. <ComboBoxItem>Rotate 3D</ComboBoxItem>
  25. <ComboBoxItem>Card Stack</ComboBoxItem>
  26. <ComboBoxItem>Wave Reveal</ComboBoxItem>
  27. <ComboBoxItem>Composite (Slide + Fade)</ComboBoxItem>
  28. </ComboBox>
  29. <TextBlock Text="Orientation" FontWeight="SemiBold" FontSize="13" />
  30. <ComboBox x:Name="OrientationCombo"
  31. HorizontalAlignment="Stretch"
  32. SelectedIndex="0">
  33. <ComboBoxItem>Horizontal</ComboBoxItem>
  34. <ComboBoxItem>Vertical</ComboBoxItem>
  35. </ComboBox>
  36. <Separator />
  37. <TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
  38. <TextBlock x:Name="StatusText"
  39. Text="Transition: Page Slide"
  40. Opacity="0.7"
  41. TextWrapping="Wrap" />
  42. </StackPanel>
  43. </ScrollViewer>
  44. <Border DockPanel.Dock="Right" Width="1"
  45. Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" />
  46. <Border Margin="12"
  47. BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
  48. BorderThickness="1"
  49. CornerRadius="6"
  50. ClipToBounds="True">
  51. <Carousel x:Name="DemoCarousel" Height="300">
  52. <Carousel.PageTransition>
  53. <PageSlide Duration="0.25" Orientation="Horizontal" />
  54. </Carousel.PageTransition>
  55. <Border Margin="14,12" CornerRadius="12" ClipToBounds="True">
  56. <Grid>
  57. <Image Source="/Assets/delicate-arch-896885_640.jpg" Stretch="UniformToFill" />
  58. <Border Background="#80000000" VerticalAlignment="Bottom" Padding="12">
  59. <TextBlock Text="Item 1: Delicate Arch" Foreground="White"
  60. HorizontalAlignment="Center" FontWeight="SemiBold" />
  61. </Border>
  62. </Grid>
  63. </Border>
  64. <Border Margin="14,12" CornerRadius="12" ClipToBounds="True">
  65. <Grid>
  66. <Image Source="/Assets/hirsch-899118_640.jpg" Stretch="UniformToFill" />
  67. <Border Background="#80000000" VerticalAlignment="Bottom" Padding="12">
  68. <TextBlock Text="Item 2: Hirsch" Foreground="White"
  69. HorizontalAlignment="Center" FontWeight="SemiBold" />
  70. </Border>
  71. </Grid>
  72. </Border>
  73. <Border Margin="14,12" CornerRadius="12" ClipToBounds="True">
  74. <Grid>
  75. <Image Source="/Assets/maple-leaf-888807_640.jpg" Stretch="UniformToFill" />
  76. <Border Background="#80000000" VerticalAlignment="Bottom" Padding="12">
  77. <TextBlock Text="Item 3: Maple Leaf" Foreground="White"
  78. HorizontalAlignment="Center" FontWeight="SemiBold" />
  79. </Border>
  80. </Grid>
  81. </Border>
  82. </Carousel>
  83. </Border>
  84. </DockPanel>
  85. </UserControl>