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

feat: Add FullCarousel theme.

Browse Source
This commit is contained in:
rabbitism 2023-02-05 22:30:01 +08:00
parent 2b0c26660e
commit 08f8ccd215
8 changed files with 260 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,31 +7,49 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<UserControl.Styles>
<Style Selector="Border">
<Setter Property="Height" Value="200" />
</Style>
<Style Selector="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</UserControl.Styles>
<StackPanel Spacing="20">
<TextBlock Classes="Strong" Text="This is still WIP" />
<Grid
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
ColumnDefinitions="Auto, *, Auto">
<RepeatButton
Name="Previous"
Grid.Column="0"
Content="Previous" />
<Carousel Name="carousel" Grid.Column="1">
<Carousel.PageTransition>
<PageSlide Orientation="Horizontal" Duration="0.25" />
</Carousel.PageTransition>
<Carousel 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" />
</Carousel>
<RepeatButton
Name="Next"
Grid.Column="2"
Content="Next" />
</Grid>
<TextBlock Text="{Binding #carousel.SelectedIndex}" />
</Border>
</Carousel>
<Carousel Classes="Line" 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>

12
demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml.cs
View File

@ -10,17 +10,5 @@ public partial class CarouselDemo : UserControl
public CarouselDemo()
{
InitializeComponent();
Previous.Click += OnPreviousClick;
Next.Click += OnNextClick;
}
private void OnPreviousClick(object sender, RoutedEventArgs args)
{
carousel.Previous();
}
private void OnNextClick(object sender, RoutedEventArgs args)
{
carousel.Next();
}
}

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

@ -1,5 +1,9 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Semi.Avalonia.Converters">
<!-- Add Resources Here -->
<converters:ItemToObjectConverter x:Key="ItemsConverter" />
<ControlTheme x:Key="{x:Type Carousel}" TargetType="Carousel">
<Setter Property="Template">
<ControlTemplate>
@ -18,4 +22,161 @@
</ControlTemplate>
</Setter>
</ControlTheme>
<ControlTheme x:Key="CarouselIndicatorDotListBoxItem" TargetType="ListBoxItem">
<!-- Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected -->
<Setter Property="ListBoxItem.Cursor" Value="Hand" />
<Setter Property="ListBoxItem.Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
<Setter Property="ListBoxItem.Template">
<ControlTemplate TargetType="ListBoxItem">
<Panel>
<Border Padding="4" Background="Transparent">
<Ellipse
Name="Container"
Width="{DynamicResource CarouselIndicatorSelectedHeight}"
Height="{DynamicResource CarouselIndicatorSelectedHeight}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{TemplateBinding Foreground}" />
</Border>
</Panel>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ Ellipse#Container">
<Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
</Style>
<Style Selector="^:pressed /template/ Ellipse#Container">
<Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
</Style>
<Style Selector="^:selected /template/ Ellipse#Container">
<Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="CarouselIndicatorLineListBoxItem" TargetType="ListBoxItem">
<!-- Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected -->
<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="4,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>
</Border>
</Border>
</Panel>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ Border#Container">
<Setter Property="Background" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
</Style>
<Style Selector="^:pressed /template/ Border#Container">
<Setter Property="Background" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
</Style>
<Style Selector="^:selected /template/ Border#Container">
<Setter Property="Background" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
<Setter Property="Width" Value="{DynamicResource CarouselIndicatorLineSelectedWidth}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="CarouselButton" TargetType="Button">
<Setter Property="Button.Cursor" Value="Hand" />
<Setter Property="Button.Foreground" Value="{DynamicResource CarouselButtonForeground}" />
<Setter Property="Button.Template">
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<PathIcon
Width="24"
Height="24"
Data="{DynamicResource CarouselButtonGlyph}"
Foreground="{TemplateBinding Foreground}" />
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ PathIcon">
<Setter Property="Foreground" Value="{DynamicResource CarouselButtonPointeroverForeground}" />
</Style>
<Style Selector="^:pointerover /template/ PathIcon">
<Setter Property="Foreground" Value="{DynamicResource CarouselButtonPressedForeground}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="FullCarousel" TargetType="Carousel">
<Setter Property="Template">
<ControlTemplate TargetType="Carousel">
<Grid ColumnDefinitions="Auto, *, Auto" RowDefinitions="*, Auto">
<ScrollViewer
Name="PART_ScrollViewer"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Grid.ColumnSpan="3"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
<ItemsPresenter
Name="PART_ItemsPresenter"
Margin="{TemplateBinding Padding}"
ItemsPanel="{TemplateBinding ItemsPanel}" />
</ScrollViewer>
<ListBox
Name="PART_ItemsPresenter2"
Grid.Row="1"
Grid.Column="1"
MaxHeight="20"
Margin="0,8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}"
Items="{TemplateBinding Items,
Converter={StaticResource ItemsConverter}}"
SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<Button
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Margin="{DynamicResource CarouselButtonMargin}"
VerticalAlignment="Center"
Background="{DynamicResource CarouselButtonPointeroverForeground}"
BorderBrush="{DynamicResource CarouselButtonPressedForeground}"
Command="{Binding $parent[Carousel].Previous}"
Foreground="{DynamicResource CarouselButtonForeground}"
Theme="{DynamicResource CarouselButton}" />
<Button
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="2"
Margin="{DynamicResource CarouselButtonMargin}"
VerticalAlignment="Center"
Background="{DynamicResource CarouselButtonPointeroverForeground}"
BorderBrush="{DynamicResource CarouselButtonPressedForeground}"
Command="{Binding $parent[Carousel].Next}"
Foreground="{DynamicResource CarouselButtonForeground}"
RenderTransform="rotate(180deg)"
Theme="{DynamicResource CarouselButton}" />
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^.Line /template/ ListBox#PART_ItemsPresenter2">
<Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource CarouselIndicatorLineListBoxItem}" />
</Style>
</ControlTheme>
</ResourceDictionary>

25
src/Semi.Avalonia/Converters/ItemToObjectConverter.cs Normal file
View File

@ -0,0 +1,25 @@
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using Avalonia.Collections;
using Avalonia.Data.Converters;
namespace Semi.Avalonia.Converters;
public class ItemToObjectConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is AvaloniaList<object> list)
{
return list.Select(a => new object());
}
return new List<object>();
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}

16
src/Semi.Avalonia/Themes/Dark/Carousel.axaml Normal file
View File

@ -0,0 +1,16 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<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>
<SolidColorBrush x:Key="CarouselButtonForeground" Opacity="0.5" Color="Black" />
<SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselButtonPressedForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorForeground" Opacity="0.5" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorPointeroverForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorSelectedForeground" Color="Black" />
<x:Double x:Key="CarouselIndicatorLineSelectedWidth">48</x:Double>
<x:Double x:Key="CarouselIndicatorSelectedHeight">8</x:Double>
<Thickness x:Key="CarouselButtonMargin">8</Thickness>
</ResourceDictionary>

1
src/Semi.Avalonia/Themes/Dark/Dark.axaml
View File

@ -10,6 +10,7 @@
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Calendar.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/CalendarDatePicker.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/CaptionButtons.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Carousel.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/CheckBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/ComboBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DatePicker.axaml" />

16
src/Semi.Avalonia/Themes/Light/Carousel.axaml Normal file
View File

@ -0,0 +1,16 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<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>
<SolidColorBrush x:Key="CarouselButtonForeground" Opacity="0.5" Color="Black" />
<SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselButtonPressedForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorForeground" Opacity="0.5" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorPointeroverForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorSelectedForeground" Color="Black" />
<x:Double x:Key="CarouselIndicatorLineSelectedWidth">48</x:Double>
<x:Double x:Key="CarouselIndicatorSelectedHeight">8</x:Double>
<Thickness x:Key="CarouselButtonMargin">8</Thickness>
</ResourceDictionary>

1
src/Semi.Avalonia/Themes/Light/Light.axaml
View File

@ -9,6 +9,7 @@
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Calendar.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CalendarDatePicker.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CaptionButtons.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Carousel.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ComboBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/DatePicker.axaml" />