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-20 08:08:42 +08:00
parent fa8b2d1f21
commit 31e082f46e
6 changed files with 41 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,8 @@
<ResourceDictionary <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Semi.Avalonia.Converters" xmlns:converter="clr-namespace:Semi.Avalonia.Converters"
x:CompileBindings="True"> x:CompileBindings="True">
<converters:ItemToObjectConverter x:Key="ItemsConverter" />
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel Spacing="20" Width="800" Height="800"> <StackPanel Spacing="20" Width="800" Height="800">
<StackPanel.Styles> <StackPanel.Styles>
@ -90,26 +89,26 @@
<ControlTemplate TargetType="ListBoxItem"> <ControlTemplate TargetType="ListBoxItem">
<Ellipse <Ellipse
Name="Container" Name="Container"
Width="{DynamicResource CarouselIndicatorWidth}" Width="{DynamicResource CarouselIndicatorDotWidth}"
Height="{DynamicResource CarouselIndicatorHeight}" Height="{DynamicResource CarouselIndicatorDotHeight}"
Fill="{TemplateBinding Foreground}" /> Fill="{TemplateBinding Foreground}" />
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:pointerover /template/ Ellipse#Container"> <Style Selector="^:pointerover">
<Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" /> <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
</Style> </Style>
<Style Selector="^:pressed /template/ Ellipse#Container"> <Style Selector="^:pressed">
<Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" /> <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
</Style> </Style>
<Style Selector="^:selected /template/ Ellipse#Container"> <Style Selector="^:selected">
<Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" /> <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
</Style> </Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="CarouselIndicatorLineListBoxItem" TargetType="ListBoxItem"> <ControlTheme x:Key="CarouselIndicatorLineListBoxItem"
<Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" /> BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
TargetType="ListBoxItem">
<Setter Property="Margin" Value="2 0"/> <Setter Property="Margin" Value="2 0"/>
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="ListBoxItem"> <ControlTemplate TargetType="ListBoxItem">
<Rectangle <Rectangle
@ -118,23 +117,14 @@
Fill="{TemplateBinding Foreground}" /> Fill="{TemplateBinding Foreground}" />
</ControlTemplate> </ControlTemplate>
</Setter> </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}" />
</Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem" TargetType="ListBoxItem"> <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem"
<Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" /> BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
TargetType="ListBoxItem">
<Setter Property="Width" Value="{DynamicResource CarouselIndicatorColumnarWidth}"/> <Setter Property="Width" Value="{DynamicResource CarouselIndicatorColumnarWidth}"/>
<Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}"/> <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}"/>
<Setter Property="Margin" Value="2 0"/> <Setter Property="Margin" Value="2 0"/>
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="ListBoxItem"> <ControlTemplate TargetType="ListBoxItem">
<Rectangle <Rectangle
@ -151,14 +141,7 @@
</Rectangle> </Rectangle>
</ControlTemplate> </ControlTemplate>
</Setter> </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"> <Style Selector="^:selected /template/ Rectangle#Container">
<Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
<Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}" /> <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}" />
</Style> </Style>
</ControlTheme> </ControlTheme>
@ -215,8 +198,9 @@
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center" VerticalAlignment="Center"
ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}" ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}"
ItemsSource="{TemplateBinding ItemCount, Mode=OneWay, Converter={StaticResource ItemsConverter}}" ItemsSource="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemToObjectConverter}}"
SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}"> IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
SelectedIndex="{TemplateBinding SelectedIndex}">
<ListBox.ItemsPanel> <ListBox.ItemsPanel>
<ItemsPanelTemplate> <ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" /> <StackPanel Orientation="Horizontal" />
@ -230,6 +214,7 @@
Theme="{DynamicResource CarouselButton}" Theme="{DynamicResource CarouselButton}"
Margin="{DynamicResource CarouselButtonMargin}" Margin="{DynamicResource CarouselButtonMargin}"
Foreground="{DynamicResource CarouselButtonForeground}" Foreground="{DynamicResource CarouselButtonForeground}"
IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
Command="{Binding $parent[Carousel].Previous}" /> Command="{Binding $parent[Carousel].Previous}" />
<Button <Button
Grid.Row="0" Grid.Row="0"
@ -238,6 +223,7 @@
Theme="{DynamicResource CarouselButton}" Theme="{DynamicResource CarouselButton}"
Margin="{DynamicResource CarouselButtonMargin}" Margin="{DynamicResource CarouselButtonMargin}"
Foreground="{DynamicResource CarouselButtonForeground}" Foreground="{DynamicResource CarouselButtonForeground}"
IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
Command="{Binding $parent[Carousel].Next}" Command="{Binding $parent[Carousel].Next}"
RenderTransform="rotate(180deg)" /> RenderTransform="rotate(180deg)" />
</Grid> </Grid>

14
src/Semi.Avalonia/Converters/ItemConverter.cs Normal file
View File

@ -0,0 +1,14 @@
using System.Collections;
using System.Linq;
using Avalonia.Data.Converters;
namespace Semi.Avalonia.Converters;
public static class ItemConverter
{
public static readonly IValueConverter ItemVisibleConverter =
new FuncValueConverter<int?, bool>(count => count is > 1);
public static readonly IValueConverter ItemToObjectConverter =
new FuncValueConverter<int?, IEnumerable>(count => Enumerable.Repeat(new object(), count ?? 0));
}

26
src/Semi.Avalonia/Converters/ItemToObjectConverter.cs
View File

@ -1,26 +0,0 @@
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using Avalonia.Collections;
using Avalonia.Controls;
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 int i)
{
return Enumerable.Repeat(new object(), i).ToList();
}
return new List<object>();
}
public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}

5
src/Semi.Avalonia/Themes/Dark/Carousel.axaml
View File

@ -1,9 +1,8 @@
<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">
<SolidColorBrush x:Key="CarouselButtonForeground" Opacity="0.5" Color="Black" /> <SolidColorBrush x:Key="CarouselButtonForeground" Opacity="0.5" Color="Black" />
<SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Opacity="0.7" Color="Black" /> <SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Color="Black" />
<SolidColorBrush x:Key="CarouselButtonPressedForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorForeground" Opacity="0.5" Color="Black" /> <SolidColorBrush x:Key="CarouselIndicatorForeground" Opacity="0.5" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorPointeroverForeground" Opacity="0.7" Color="Black" /> <SolidColorBrush x:Key="CarouselIndicatorPointeroverForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Opacity="0.7" Color="Black" /> <SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorSelectedForeground" Color="Black" /> <SolidColorBrush x:Key="CarouselIndicatorSelectedForeground" Color="Black" />
</ResourceDictionary> </ResourceDictionary>

5
src/Semi.Avalonia/Themes/Light/Carousel.axaml
View File

@ -1,9 +1,8 @@
<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">
<SolidColorBrush x:Key="CarouselButtonForeground" Opacity="0.5" Color="Black" /> <SolidColorBrush x:Key="CarouselButtonForeground" Opacity="0.5" Color="Black" />
<SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Opacity="0.7" Color="Black" /> <SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Color="Black" />
<SolidColorBrush x:Key="CarouselButtonPressedForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorForeground" Opacity="0.5" Color="Black" /> <SolidColorBrush x:Key="CarouselIndicatorForeground" Opacity="0.5" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorPointeroverForeground" Opacity="0.7" Color="Black" /> <SolidColorBrush x:Key="CarouselIndicatorPointeroverForeground" Opacity="0.7" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Opacity="0.7" Color="Black" /> <SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Color="Black" />
<SolidColorBrush x:Key="CarouselIndicatorSelectedForeground" Color="Black" /> <SolidColorBrush x:Key="CarouselIndicatorSelectedForeground" Color="Black" />
</ResourceDictionary> </ResourceDictionary>

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

@ -1,15 +1,14 @@
<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">
<StreamGeometry 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</StreamGeometry> <StreamGeometry 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</StreamGeometry>
<x:Double x:Key="CarouselIndicatorWidth">8</x:Double> <x:Double x:Key="CarouselIndicatorDotWidth">8</x:Double>
<x:Double x:Key="CarouselIndicatorHeight">8</x:Double> <x:Double x:Key="CarouselIndicatorDotHeight">8</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="CarouselIndicatorColumnarWidth">4</x:Double>
<x:Double x:Key="CarouselIndicatorColumnarHeight">12</x:Double> <x:Double x:Key="CarouselIndicatorColumnarHeight">12</x:Double>
<x:Double x:Key="CarouselIndicatorColumnarSelectedHeight">20</x:Double> <x:Double x:Key="CarouselIndicatorColumnarSelectedHeight">20</x:Double>
<Thickness x:Key="CarouselButtonMargin">8</Thickness> <Thickness x:Key="CarouselButtonMargin">20</Thickness>
</ResourceDictionary> </ResourceDictionary>