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

feat: Columnar.

Browse Source
This commit is contained in:
Zhang Dian 2024-01-26 18:59:40 +08:00
parent d9c39cdd05
commit 0bf7168cba
3 changed files with 61 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,5 +52,22 @@
<TextBlock Text="Text 4" /> <TextBlock Text="Text 4" />
</Border> </Border>
</Carousel> </Carousel>
<Carousel Classes="Columnar Left" Theme="{DynamicResource FullCarousel}">
<Carousel.PageTransition>
<PageSlide Orientation="Horizontal" Duration="0.25" />
</Carousel.PageTransition>
<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> </StackPanel>
</UserControl> </UserControl>

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

@ -83,6 +83,39 @@
</Style> </Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem" TargetType="ListBoxItem">
<Setter Property="ListBoxItem.Cursor" Value="Hand" />
<Setter Property="ListBoxItem.Background" Value="{DynamicResource CarouselIndicatorForeground}" />
<Setter Property="ListBoxItem.Template">
<ControlTemplate TargetType="ListBoxItem">
<Panel Background="Transparent">
<Border Padding="2,0" Background="Transparent">
<Canvas Width="{DynamicResource CarouselIndicatorColumnarWidth}"
Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
<Rectangle
Name="Container"
Width="{DynamicResource CarouselIndicatorColumnarWidth}"
Height="{DynamicResource CarouselIndicatorColumnarHeight}"
Fill="{TemplateBinding Background}"
Canvas.Top="{DynamicResource CarouselIndicatorColumnarCanvasHeight}"/>
</Canvas>
</Border>
</Panel>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ Rectangle#Container">
<Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
</Style>
<Style Selector="^:pressed /template/ Rectangle#Container">
<Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
</Style>
<Style Selector="^:selected /template/ Rectangle#Container">
<Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
<Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}" />
<Setter Property="Canvas.Top" Value="{DynamicResource CarouselIndicatorColumnarSelectedCanvasHeight}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="CarouselButton" TargetType="Button"> <ControlTheme x:Key="CarouselButton" TargetType="Button">
<Setter Property="Button.Cursor" Value="Hand" /> <Setter Property="Button.Cursor" Value="Hand" />
<Setter Property="Button.Foreground" Value="{DynamicResource CarouselButtonForeground}" /> <Setter Property="Button.Foreground" Value="{DynamicResource CarouselButtonForeground}" />
@ -129,7 +162,7 @@
Name="PART_ItemsPresenter2" Name="PART_ItemsPresenter2"
Grid.Row="1" Grid.Row="1"
Grid.Column="1" Grid.Column="1"
MaxHeight="20" MaxHeight="30"
Margin="0,8" Margin="0,8"
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center" VerticalAlignment="Center"
@ -172,6 +205,10 @@
</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}" />
</Style>
<Style Selector="^.Columnar /template/ ListBox#PART_ItemsPresenter2">
<Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorColumnarListBoxItem}" />
</Style>
<Style Selector="^.Left /template/ ListBox#PART_ItemsPresenter2"> <Style Selector="^.Left /template/ ListBox#PART_ItemsPresenter2">
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Left" />
</Style> </Style>

6
src/Semi.Avalonia/Themes/Shared/Carousel.axaml
View File

@ -7,5 +7,11 @@
<x:Double x:Key="CarouselIndicatorLineWidth">78</x:Double> <x:Double x:Key="CarouselIndicatorLineWidth">78</x:Double>
<x:Double x:Key="CarouselIndicatorLineHeight">4</x:Double> <x:Double x:Key="CarouselIndicatorLineHeight">4</x:Double>
<x:Double x:Key="CarouselIndicatorColumnarWidth">4</x:Double>
<x:Double x:Key="CarouselIndicatorColumnarHeight">12</x:Double>
<x:Double x:Key="CarouselIndicatorColumnarSelectedHeight">20</x:Double>
<x:Double x:Key="CarouselIndicatorColumnarCanvasHeight">8</x:Double>
<x:Double x:Key="CarouselIndicatorColumnarSelectedCanvasHeight">0</x:Double>
<Thickness x:Key="CarouselButtonMargin">8</Thickness> <Thickness x:Key="CarouselButtonMargin">8</Thickness>
</ResourceDictionary> </ResourceDictionary>