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

feat: add carousel, popup host, selectable textblock flyout, tabstrip, transitioning content control.

Browse Source
This commit is contained in:
rabbitism 2023-01-25 23:52:50 +08:00
parent c94dfb2948
commit 9934ea791e
11 changed files with 284 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml Normal file
View File

@ -0,0 +1,37 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.CarouselDemo"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<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>
<TextBlock Text="Text 1" />
<TextBlock Text="Text 2" />
<TextBlock Text="Text 3" />
<TextBlock Text="Text 4" />
</Carousel>
<RepeatButton
Name="Next"
Grid.Column="2"
Content="Next" />
</Grid>
<TextBlock Text="{Binding #carousel.SelectedIndex}" />
</StackPanel>
</UserControl>

26
demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml.cs Normal file
View File

@ -0,0 +1,26 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Markup.Xaml;
namespace Semi.Avalonia.Demo.Pages;
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();
}
}

30
demo/Semi.Avalonia.Demo/Pages/TabControlDemo.axaml
View File

@ -1,8 +1,12 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.TabControlDemo" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
d:DesignWidth="800" mc:Ignorable="d">
x:Class="Semi.Avalonia.Demo.Pages.TabControlDemo"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel>
<Border Theme="{StaticResource CardBorder}">
<TabControl TabStripPlacement="Top">
@ -11,7 +15,8 @@
<TabItem Content="Hello 3" Header="Tab 3" />
<TabItem Content="中文内容" Header="中文中文" />
<TabItem
Content="Hello 4" Header="Tab 4"
Content="Hello 4"
Header="Tab 4"
IsEnabled="False" />
</TabControl>
</Border>
@ -22,7 +27,8 @@
<TabItem Content="Hello 3" Header="Tab 3" />
<TabItem Content="中文内容" Header="中文中文" />
<TabItem
Content="Hello 4" Header="Tab 4"
Content="Hello 4"
Header="Tab 4"
IsEnabled="False" />
</TabControl>
</Border>
@ -33,7 +39,8 @@
<TabItem Content="Hello 3" Header="Tab 3" />
<TabItem Content="中文内容" Header="中文中文" />
<TabItem
Content="Hello 4" Header="Tab 4"
Content="Hello 4"
Header="Tab 4"
IsEnabled="False" />
</TabControl>
</Border>
@ -44,9 +51,16 @@
<TabItem Content="Hello 3" Header="Tab 3" />
<TabItem Content="中文内容" Header="中文中文" />
<TabItem
Content="Hello 4" Header="Tab 4"
Content="Hello 4"
Header="Tab 4"
IsEnabled="False" />
</TabControl>
</Border>
<Border Theme="{StaticResource CardBorder}">
<TabStrip>
<TabStripItem>Tab 1</TabStripItem>
<TabStripItem>Tab 2</TabStripItem>
</TabStrip>
</Border>
</StackPanel>
</UserControl>

3
demo/Semi.Avalonia.Demo/Views/MainView.axaml
View File

@ -27,6 +27,9 @@
<TabItem Header="ButtonSpinner">
<pages:ButtonSpinnerDemo />
</TabItem>
<TabItem Header="Carousel">
<pages:CarouselDemo />
</TabItem>
<TabItem Header="CheckBox">
<pages:CheckBoxDemo />
</TabItem>

22
src/Semi.Avalonia/Controls/Carousel.axaml Normal file
View File

@ -0,0 +1,22 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type Carousel}" TargetType="Carousel">
<Setter Property="Template">
<ControlTemplate>
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<CarouselPresenter
Margin="{TemplateBinding Padding}"
IsVirtualized="{TemplateBinding IsVirtualized}"
Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}"
PageTransition="{TemplateBinding PageTransition}"
SelectedIndex="{TemplateBinding SelectedIndex}" />
</Border>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

3
src/Semi.Avalonia/Controls/Controls.axaml
View File

@ -5,6 +5,7 @@
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Border.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/ButtonSpinner.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Carousel.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/ComboBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/ContentControl.axaml" />
@ -29,11 +30,13 @@
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Slider.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TabControl.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TabStrip.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleButton.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleSwitch.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Tooltip.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TransitioningContentControl.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TreeView.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" />

17
src/Semi.Avalonia/Controls/Popup.axaml
View File

@ -20,4 +20,21 @@
</ControlTemplate>
</Setter>
</ControlTheme>
<ControlTheme x:Key="{x:Type OverlayPopupHost}" TargetType="OverlayPopupHost">
<Setter Property="Template">
<ControlTemplate>
<LayoutTransformControl LayoutTransform="{TemplateBinding Transform}">
<VisualLayerManager IsPopup="True">
<ContentPresenter
Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</VisualLayerManager>
</LayoutTransformControl>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

14
src/Semi.Avalonia/Controls/SelectableTextBlock.axaml
View File

@ -1,4 +1,14 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MenuFlyout x:Key="SelectableTextBlockContextFlyout" Placement="Bottom">
<MenuItem
x:Name="SelectableTextBlockContextFlyoutCopyItem"
Command="{Binding $parent[SelectableTextBlock].Copy}"
Header="Copy"
InputGesture="{x:Static TextBox.CopyGesture}"
IsEnabled="{Binding $parent[SelectableTextBlock].CanCopy}" />
</MenuFlyout>
<ControlTheme x:Key="{x:Type SelectableTextBlock}" TargetType="SelectableTextBlock">
<Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
<Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockFontSize}" />
@ -34,6 +44,10 @@
<Style Selector="^.Delete">
<Setter Property="SelectableTextBlock.TextDecorations" Value="StrikeThrough" />
</Style>
<Style Selector="^[IsEnabled=True]">
<Setter Property="Cursor" Value="IBeam" />
<Setter Property="ContextFlyout" Value="{StaticResource SelectableTextBlockContextFlyout}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="TitleSelectableTextBlock"

21
src/Semi.Avalonia/Controls/TabItem.axaml
View File

@ -24,7 +24,7 @@
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<Label
<ContentPresenter
Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
@ -37,24 +37,23 @@
<Border
Name="PART_SelectedPipe"
Background="{DynamicResource TabItemLinePipeBackground}"
CornerRadius="{DynamicResource ControlCornerRadius}"
IsVisible="True" UseLayoutRounding="False" />
IsVisible="True"
UseLayoutRounding="False" />
</Panel>
</Border>
</ControlTemplate>
</Setter>
<!-- Selected state -->
<!-- We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background -->
<Style Selector="^:selected /template/ Label#PART_ContentPresenter">
<Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
<Setter Property="Label.FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
<Setter Property="ContentPresenter.FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
</Style>
<Style Selector="^:not(:selected)">
<Setter Property="Cursor" Value="Hand" />
<Style Selector="^:pointerover /template/ Label#PART_ContentPresenter">
<Setter Property="Label.Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="ContentPresenter.Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
</Style>
<Style Selector="^:pointerover /template/ Border#PART_SelectedPipe">
<Setter Property="Border.Background" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
@ -88,7 +87,7 @@
<Setter Property="Border.HorizontalAlignment" Value="Stretch" />
<Setter Property="Border.VerticalAlignment" Value="Bottom" />
</Style>
<Style Selector="^ /template/ Label#PART_ContentPresenter">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Margin" Value="0,0,0,4" />
</Style>
</Style>
@ -99,7 +98,7 @@
<Setter Property="Border.HorizontalAlignment" Value="Stretch" />
<Setter Property="Border.VerticalAlignment" Value="Top" />
</Style>
<Style Selector="^ /template/ Label#PART_ContentPresenter">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Margin" Value="0,4,0,0" />
</Style>
</Style>
@ -122,7 +121,7 @@
<Setter Property="Border.HorizontalAlignment" Value="Right" />
<Setter Property="Border.VerticalAlignment" Value="Stretch" />
</Style>
<Style Selector="^ /template/ Label#PART_ContentPresenter">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Margin" Value="0,0,8,0" />
</Style>
</Style>

111
src/Semi.Avalonia/Controls/TabStrip.axaml Normal file
View File

@ -0,0 +1,111 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type TabStrip}" TargetType="TabStrip">
<Setter Property="Template">
<ControlTemplate>
<Border
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<ItemsPresenter
Name="PART_ItemsPresenter"
ItemTemplate="{TemplateBinding ItemTemplate}"
Items="{TemplateBinding Items}"
ItemsPanel="{TemplateBinding ItemsPanel}" />
<Border
Name="PART_BorderSeparator"
Height="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
</Panel>
</Border>
</ControlTemplate>
</Setter>
<Setter Property="ItemsPanel">
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</Setter>
</ControlTheme>
<ControlTheme x:Key="{x:Type TabStripItem}" TargetType="TabStripItem">
<Setter Property="TabStripItem.Background" Value="{DynamicResource TabItemLinePipeBackground}" />
<Setter Property="TabStripItem.Foreground" Value="{DynamicResource TabItemLineHeaderForeground}" />
<Setter Property="TabStripItem.Margin" Value="0" />
<Setter Property="TabStripItem.Padding" Value="8 4" />
<Setter Property="TabStripItem.MinHeight" Value="5" />
<Setter Property="TabStripItem.VerticalContentAlignment" Value="Center" />
<Setter Property="TabStripItem.Template">
<ControlTemplate TargetType="TabStripItem">
<Border
Name="PART_LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<ContentPresenter
Name="PART_ContentPresenter"
Margin="0,0,0,4"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}" />
<Border
Name="PART_SelectedPipe"
Height="2"
Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Background="{DynamicResource TabItemLinePipeBackground}"
IsVisible="True"
UseLayoutRounding="False" />
</Panel>
</Border>
</ControlTemplate>
</Setter>
<!-- Selected state -->
<Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource TabItemLineHeaderSelectedForeground}" />
<Setter Property="ContentPresenter.FontWeight" Value="{DynamicResource TabItemSelectedFontWeight}" />
</Style>
<Style Selector="^:not(:selected)">
<Setter Property="Cursor" Value="Hand" />
<Style Selector="^:pointerover /template/ Label#PART_ContentPresenter">
<Setter Property="Label.Foreground" Value="{DynamicResource TabItemLineHeaderPointeroverForeground}" />
</Style>
<Style Selector="^:pointerover /template/ Border#PART_SelectedPipe">
<Setter Property="Border.Background" Value="{DynamicResource TabItemLinePipePointeroverBorderBrush}" />
</Style>
<Style Selector="^:pressed /template/ Border#PART_SelectedPipe">
<Setter Property="Border.Background" Value="{DynamicResource TabItemLinePipePressedBorderBrush}" />
</Style>
</Style>
<Style Selector="^:selected /template/ Border#PART_SelectedPipe">
<Setter Property="Border.Background" Value="{DynamicResource TabItemLinePipeSelectedBackground}" />
</Style>
<!-- Selected Pressed state -->
<Style Selector="^:selected:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundSelectedPressed}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundSelectedPressed}" />
</Style>
<!-- Disabled state -->
<Style Selector="^:disabled /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="{DynamicResource TabItemHeaderBackgroundDisabled}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
</Style>
</ControlTheme>
</ResourceDictionary>

19
src/Semi.Avalonia/Controls/TransitioningContentControl.axaml Normal file
View File

@ -0,0 +1,19 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTheme x:Key="{x:Type TransitioningContentControl}" TargetType="TransitioningContentControl">
<Setter Property="Template">
<ControlTemplate>
<ContentPresenter
Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding CurrentContent}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}" />
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>