Merge pull request #283 from irihitech/carousel
Implemented some Carousel features
This commit is contained in:
Dong Bin
GitHub
commit
3531376eb2
@ -52,5 +52,22 @@
|
||||
<TextBlock Text="Text 4" />
|
||||
</Border>
|
||||
</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>
|
||||
</UserControl>
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
<Border Padding="4" Background="Transparent">
|
||||
<Ellipse
|
||||
Name="Container"
|
||||
Width="{DynamicResource CarouselIndicatorSelectedHeight}"
|
||||
Height="{DynamicResource CarouselIndicatorSelectedHeight}"
|
||||
Width="{DynamicResource CarouselIndicatorWidth}"
|
||||
Height="{DynamicResource CarouselIndicatorHeight}"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
Fill="{TemplateBinding Foreground}" />
|
||||
@ -61,18 +61,12 @@
|
||||
<Setter Property="ListBoxItem.Template">
|
||||
<ControlTemplate TargetType="ListBoxItem">
|
||||
<Panel Background="Transparent">
|
||||
<Border Padding="4,0" Background="Transparent">
|
||||
<Border Padding="2,0" Background="Transparent">
|
||||
<Border
|
||||
Name="Container"
|
||||
Width="{DynamicResource CarouselIndicatorSelectedHeight}"
|
||||
Height="{DynamicResource CarouselIndicatorSelectedHeight}"
|
||||
Background="{TemplateBinding Background}"
|
||||
CornerRadius="99">
|
||||
<Border.Transitions>
|
||||
<Transitions>
|
||||
<DoubleTransition Property="Width" Duration="0:0:0.2" />
|
||||
</Transitions>
|
||||
</Border.Transitions>
|
||||
Width="{DynamicResource CarouselIndicatorLineWidth}"
|
||||
Height="{DynamicResource CarouselIndicatorLineHeight}"
|
||||
Background="{TemplateBinding Background}">
|
||||
</Border>
|
||||
</Border>
|
||||
</Panel>
|
||||
@ -86,7 +80,44 @@
|
||||
</Style>
|
||||
<Style Selector="^:selected /template/ Border#Container">
|
||||
<Setter Property="Background" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
|
||||
<Setter Property="Width" Value="{DynamicResource CarouselIndicatorLineSelectedWidth}" />
|
||||
</Style>
|
||||
</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">
|
||||
<Border Width="{DynamicResource CarouselIndicatorColumnarWidth}"
|
||||
Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
|
||||
<Rectangle
|
||||
Name="Container"
|
||||
Width="{DynamicResource CarouselIndicatorColumnarWidth}"
|
||||
Height="{DynamicResource CarouselIndicatorColumnarHeight}"
|
||||
VerticalAlignment="Bottom"
|
||||
Fill="{TemplateBinding Background}">
|
||||
<Rectangle.Transitions>
|
||||
<Transitions>
|
||||
<DoubleTransition Property="Height" Duration="0:0:0.2"></DoubleTransition>
|
||||
</Transitions>
|
||||
</Rectangle.Transitions>
|
||||
</Rectangle>
|
||||
</Border>
|
||||
</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}" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
@ -136,7 +167,7 @@
|
||||
Name="PART_ItemsPresenter2"
|
||||
Grid.Row="1"
|
||||
Grid.Column="1"
|
||||
MaxHeight="20"
|
||||
MaxHeight="30"
|
||||
Margin="0,8"
|
||||
HorizontalAlignment="Center"
|
||||
VerticalAlignment="Center"
|
||||
@ -180,5 +211,17 @@
|
||||
<Style Selector="^.Line /template/ ListBox#PART_ItemsPresenter2">
|
||||
<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">
|
||||
<Setter Property="HorizontalAlignment" Value="Left" />
|
||||
</Style>
|
||||
<Style Selector="^.Center /template/ ListBox#PART_ItemsPresenter2">
|
||||
<Setter Property="HorizontalAlignment" Value="Center" />
|
||||
</Style>
|
||||
<Style Selector="^.Right /template/ ListBox#PART_ItemsPresenter2">
|
||||
<Setter Property="HorizontalAlignment" Value="Right" />
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
|
||||
@ -1,7 +1,15 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<PathGeometry x:Key="CarouselButtonGlyph">M16.2782 4.23933C16.864 4.82511 16.864 5.77486 16.2782 6.36065L10.6213 12.0175L16.2782 17.6744C16.864 18.2601 16.864 19.2099 16.2782 19.7957C15.6924 20.3815 14.7426 20.3815 14.1569 19.7957L7.43934 13.0782C6.85355 12.4924 6.85355 11.5426 7.43934 10.9568L14.1569 4.23933C14.7426 3.65354 15.6924 3.65354 16.2782 4.23933Z</PathGeometry>
|
||||
|
||||
<x:Double x:Key="CarouselIndicatorLineSelectedWidth">48</x:Double>
|
||||
<x:Double x:Key="CarouselIndicatorSelectedHeight">8</x:Double>
|
||||
<x:Double x:Key="CarouselIndicatorWidth">8</x:Double>
|
||||
<x:Double x:Key="CarouselIndicatorHeight">8</x:Double>
|
||||
|
||||
<x:Double x:Key="CarouselIndicatorLineWidth">78</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>
|
||||
|
||||
<Thickness x:Key="CarouselButtonMargin">8</Thickness>
|
||||
</ResourceDictionary>
|
||||
Loading…
x
Reference in New Issue
Block a user