zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance Carousel.

Browse Source
This commit is contained in:
Zhang Dian 2024-11-19 14:49:56 +08:00
parent e4ecbfd1e8
commit fa8b2d1f21
2 changed files with 126 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
View File

@ -8,7 +8,7 @@
d:DesignWidth="800" d:DesignWidth="800"
mc:Ignorable="d"> mc:Ignorable="d">
<UserControl.Styles> <UserControl.Styles>
<Style Selector="Border"> <Style Selector="Carousel">
<Setter Property="Height" Value="200" /> <Setter Property="Height" Value="200" />
</Style> </Style>
<Style Selector="TextBlock"> <Style Selector="TextBlock">
@ -19,9 +19,6 @@
</UserControl.Styles> </UserControl.Styles>
<StackPanel Spacing="20"> <StackPanel Spacing="20">
<Carousel Theme="{DynamicResource FullCarousel}"> <Carousel Theme="{DynamicResource FullCarousel}">
<Carousel.PageTransition>
<PageSlide Orientation="Horizontal" Duration="0.25" />
</Carousel.PageTransition>
<Border Background="#EAF5FF"> <Border Background="#EAF5FF">
<TextBlock Text="Text 1" /> <TextBlock Text="Text 1" />
</Border> </Border>
@ -35,10 +32,8 @@
<TextBlock Text="Text 4" /> <TextBlock Text="Text 4" />
</Border> </Border>
</Carousel> </Carousel>
<Carousel Classes="Line" Theme="{DynamicResource FullCarousel}"> <Carousel Theme="{DynamicResource FullCarousel}"
<Carousel.PageTransition> Classes="Line">
<PageSlide Orientation="Horizontal" Duration="0.25" />
</Carousel.PageTransition>
<Border Background="#EAF5FF"> <Border Background="#EAF5FF">
<TextBlock Text="Text 1" /> <TextBlock Text="Text 1" />
</Border> </Border>
@ -52,10 +47,8 @@
<TextBlock Text="Text 4" /> <TextBlock Text="Text 4" />
</Border> </Border>
</Carousel> </Carousel>
<Carousel Classes="Columnar Left" Theme="{DynamicResource FullCarousel}"> <Carousel Theme="{DynamicResource FullCarousel}"
<Carousel.PageTransition> Classes="Columnar Left">
<PageSlide Orientation="Horizontal" Duration="0.25" />
</Carousel.PageTransition>
<Border Background="#EAF5FF"> <Border Background="#EAF5FF">
<TextBlock Text="Text 1" /> <TextBlock Text="Text 1" />
</Border> </Border>
@ -70,4 +63,4 @@
</Border> </Border>
</Carousel> </Carousel>
</StackPanel> </StackPanel>
</UserControl> </UserControl>

199
src/Semi.Avalonia/Controls/Carousel.axaml
View File

@ -4,6 +4,64 @@
xmlns:converters="clr-namespace:Semi.Avalonia.Converters" xmlns:converters="clr-namespace:Semi.Avalonia.Converters"
x:CompileBindings="True"> x:CompileBindings="True">
<converters:ItemToObjectConverter x:Key="ItemsConverter" /> <converters:ItemToObjectConverter x:Key="ItemsConverter" />
<Design.PreviewWith>
<StackPanel Spacing="20" Width="800" Height="800">
<StackPanel.Styles>
<Style Selector="Carousel">
<Setter Property="Height" Value="200" />
</Style>
<Style Selector="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Foreground" Value="#1C1F23" />
</Style>
</StackPanel.Styles>
<Carousel Theme="{DynamicResource FullCarousel}">
<Border Background="#EAF5FF">
<TextBlock Text="Text 1" />
</Border>
<Border Background="#F9F9F9">
<TextBlock Text="Text 2" />
</Border>
<Border Background="#FFF8EA">
<TextBlock Text="Text 3" />
</Border>
<Border Background="#FEF2ED">
<TextBlock Text="Text 4" />
</Border>
</Carousel>
<Carousel Theme="{DynamicResource FullCarousel}"
Classes="Line">
<Border Background="#EAF5FF">
<TextBlock Text="Text 1" />
</Border>
<Border Background="#F9F9F9">
<TextBlock Text="Text 2" />
</Border>
<Border Background="#FFF8EA">
<TextBlock Text="Text 3" />
</Border>
<Border Background="#FEF2ED">
<TextBlock Text="Text 4" />
</Border>
</Carousel>
<Carousel Theme="{DynamicResource FullCarousel}"
Classes="Columnar Left">
<Border Background="#EAF5FF">
<TextBlock Text="Text 1" />
</Border>
<Border Background="#F9F9F9">
<TextBlock Text="Text 2" />
</Border>
<Border Background="#FFF8EA">
<TextBlock Text="Text 3" />
</Border>
<Border Background="#FEF2ED">
<TextBlock Text="Text 4" />
</Border>
</Carousel>
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type Carousel}" TargetType="Carousel"> <ControlTheme x:Key="{x:Type Carousel}" TargetType="Carousel">
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
@ -25,22 +83,16 @@
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="CarouselIndicatorDotListBoxItem" TargetType="ListBoxItem"> <ControlTheme x:Key="CarouselIndicatorDotListBoxItem" TargetType="ListBoxItem">
<!-- Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected -->
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" /> <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
<Setter Property="Margin" Value="4 0"/>
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="ListBoxItem"> <ControlTemplate TargetType="ListBoxItem">
<Panel> <Ellipse
<Border Padding="4" Background="Transparent"> Name="Container"
<Ellipse Width="{DynamicResource CarouselIndicatorWidth}"
Name="Container" Height="{DynamicResource CarouselIndicatorHeight}"
Width="{DynamicResource CarouselIndicatorWidth}" Fill="{TemplateBinding Foreground}" />
Height="{DynamicResource CarouselIndicatorHeight}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{TemplateBinding Foreground}" />
</Border>
</Panel>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:pointerover /template/ Ellipse#Container"> <Style Selector="^:pointerover /template/ Ellipse#Container">
@ -55,56 +107,48 @@
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="CarouselIndicatorLineListBoxItem" TargetType="ListBoxItem"> <ControlTheme x:Key="CarouselIndicatorLineListBoxItem" TargetType="ListBoxItem">
<!-- Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected --> <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
<Setter Property="Margin" Value="2 0"/>
<Setter Property="Cursor" Value="Hand" /> <Setter Property="Cursor" Value="Hand" />
<Setter Property="Background" Value="{DynamicResource CarouselIndicatorForeground}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="ListBoxItem"> <ControlTemplate TargetType="ListBoxItem">
<Panel Background="Transparent"> <Rectangle
<Border Padding="2,0" Background="Transparent"> Name="Container"
<Border Height="{DynamicResource CarouselIndicatorLineHeight}"
Name="Container" Fill="{TemplateBinding Foreground}" />
Width="{DynamicResource CarouselIndicatorLineWidth}"
Height="{DynamicResource CarouselIndicatorLineHeight}"
Background="{TemplateBinding Background}" />
</Border>
</Panel>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:pointerover /template/ Border#Container"> <Style Selector="^:pointerover /template/ Rectangle#Container">
<Setter Property="Background" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" /> <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
</Style> </Style>
<Style Selector="^:pressed /template/ Border#Container"> <Style Selector="^:pressed /template/ Rectangle#Container">
<Setter Property="Background" Value="{DynamicResource CarouselIndicatorPressedForeground}" /> <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
</Style> </Style>
<Style Selector="^:selected /template/ Border#Container"> <Style Selector="^:selected /template/ Rectangle#Container">
<Setter Property="Background" Value="{DynamicResource CarouselIndicatorSelectedForeground}" /> <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
</Style> </Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem" TargetType="ListBoxItem"> <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem" TargetType="ListBoxItem">
<Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
<Setter Property="Width" Value="{DynamicResource CarouselIndicatorColumnarWidth}"/>
<Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}"/>
<Setter Property="Margin" Value="2 0"/>
<Setter Property="Cursor" Value="Hand" /> <Setter Property="Cursor" Value="Hand" />
<Setter Property="Background" Value="{DynamicResource CarouselIndicatorForeground}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="ListBoxItem"> <ControlTemplate TargetType="ListBoxItem">
<Panel Background="Transparent"> <Rectangle
<Border Padding="2,0" Background="Transparent"> Name="Container"
<Border Width="{DynamicResource CarouselIndicatorColumnarWidth}" Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}"> Width="{DynamicResource CarouselIndicatorColumnarWidth}"
<Rectangle Height="{DynamicResource CarouselIndicatorColumnarHeight}"
Name="Container" VerticalAlignment="Bottom"
Width="{DynamicResource CarouselIndicatorColumnarWidth}" Fill="{TemplateBinding Foreground}">
Height="{DynamicResource CarouselIndicatorColumnarHeight}" <Rectangle.Transitions>
VerticalAlignment="Bottom" <Transitions>
Fill="{TemplateBinding Background}"> <DoubleTransition Property="Height" Duration="0:0:0.2" />
<Rectangle.Transitions> </Transitions>
<Transitions> </Rectangle.Transitions>
<DoubleTransition Property="Height" Duration="0:0:0.2" /> </Rectangle>
</Transitions>
</Rectangle.Transitions>
</Rectangle>
</Border>
</Border>
</Panel>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:pointerover /template/ Rectangle#Container"> <Style Selector="^:pointerover /template/ Rectangle#Container">
@ -120,29 +164,29 @@
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="CarouselButton" TargetType="Button"> <ControlTheme x:Key="CarouselButton" TargetType="Button">
<Setter Property="Cursor" Value="Hand" /> <Setter Property="Width" Value="32" />
<Setter Property="Height" Value="32" />
<Setter Property="Foreground" Value="{DynamicResource CarouselButtonForeground}" /> <Setter Property="Foreground" Value="{DynamicResource CarouselButtonForeground}" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="Button"> <ControlTemplate TargetType="Button">
<Grid Background="Transparent"> <PathIcon
<PathIcon Theme="{DynamicResource InnerPathIcon}"
Theme="{DynamicResource InnerPathIcon}" Width="{TemplateBinding Width}"
Width="32" Height="{TemplateBinding Height}"
Height="32" Data="{DynamicResource CarouselButtonGlyph}"
Data="{DynamicResource CarouselButtonGlyph}" Foreground="{TemplateBinding Foreground}" />
Foreground="{TemplateBinding Foreground}" />
</Grid>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:pointerover /template/ PathIcon"> <Style Selector="^:pointerover /template/ PathIcon">
<Setter Property="Foreground" Value="{DynamicResource CarouselButtonPointeroverForeground}" /> <Setter Property="Foreground" Value="{DynamicResource CarouselButtonPointeroverForeground}" />
</Style> </Style>
<Style Selector="^:pointerover /template/ PathIcon">
<Setter Property="Foreground" Value="{DynamicResource CarouselButtonPressedForeground}" />
</Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="FullCarousel" TargetType="Carousel"> <ControlTheme x:Key="FullCarousel" TargetType="Carousel">
<Setter Property="PageTransition">
<PageSlide Orientation="Horizontal" Duration="0.3" />
</Setter>
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="Carousel"> <ControlTemplate TargetType="Carousel">
<Grid ColumnDefinitions="Auto, *, Auto" RowDefinitions="*, Auto"> <Grid ColumnDefinitions="Auto, *, Auto" RowDefinitions="*, Auto">
@ -165,16 +209,14 @@
<ListBox <ListBox
Name="PART_ItemsPresenter2" Name="PART_ItemsPresenter2"
Grid.Row="1" Grid.Row="1"
Grid.Column="1" Grid.Column="0"
MaxHeight="30" Grid.ColumnSpan="3"
Margin="0,8" Margin="32"
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center" VerticalAlignment="Center"
ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}" ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}"
ItemsSource="{TemplateBinding ItemCount, ItemsSource="{TemplateBinding ItemCount, Mode=OneWay, Converter={StaticResource ItemsConverter}}"
Mode=OneWay, SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
Converter={StaticResource ItemsConverter}}"
SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
<ListBox.ItemsPanel> <ListBox.ItemsPanel>
<ItemsPanelTemplate> <ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" /> <StackPanel Orientation="Horizontal" />
@ -185,30 +227,29 @@
Grid.Row="0" Grid.Row="0"
Grid.RowSpan="2" Grid.RowSpan="2"
Grid.Column="0" Grid.Column="0"
Theme="{DynamicResource CarouselButton}"
Margin="{DynamicResource CarouselButtonMargin}" Margin="{DynamicResource CarouselButtonMargin}"
VerticalAlignment="Center"
Background="{DynamicResource CarouselButtonPointeroverForeground}"
BorderBrush="{DynamicResource CarouselButtonPressedForeground}"
Command="{Binding $parent[Carousel].Previous}"
Foreground="{DynamicResource CarouselButtonForeground}" Foreground="{DynamicResource CarouselButtonForeground}"
Theme="{DynamicResource CarouselButton}" /> Command="{Binding $parent[Carousel].Previous}" />
<Button <Button
Grid.Row="0" Grid.Row="0"
Grid.RowSpan="2" Grid.RowSpan="2"
Grid.Column="2" Grid.Column="2"
Theme="{DynamicResource CarouselButton}"
Margin="{DynamicResource CarouselButtonMargin}" Margin="{DynamicResource CarouselButtonMargin}"
VerticalAlignment="Center"
Background="{DynamicResource CarouselButtonPointeroverForeground}"
BorderBrush="{DynamicResource CarouselButtonPressedForeground}"
Command="{Binding $parent[Carousel].Next}"
Foreground="{DynamicResource CarouselButtonForeground}" Foreground="{DynamicResource CarouselButtonForeground}"
RenderTransform="rotate(180deg)" Command="{Binding $parent[Carousel].Next}"
Theme="{DynamicResource CarouselButton}" /> RenderTransform="rotate(180deg)" />
</Grid> </Grid>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^.Line /template/ ListBox#PART_ItemsPresenter2"> <Style Selector="^.Line /template/ ListBox#PART_ItemsPresenter2">
<Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorLineListBoxItem}" /> <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorLineListBoxItem}" />
<Setter Property="ItemsPanel">
<ItemsPanelTemplate>
<UniformGrid Columns="{TemplateBinding ItemCount}" Rows="1" Width="240" />
</ItemsPanelTemplate>
</Setter>
</Style> </Style>
<Style Selector="^.Columnar /template/ ListBox#PART_ItemsPresenter2"> <Style Selector="^.Columnar /template/ ListBox#PART_ItemsPresenter2">
<Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorColumnarListBoxItem}" /> <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorColumnarListBoxItem}" />