feat: Add Splitview.

This commit is contained in:
rabbitism 2023-01-30 01:52:05 +08:00
parent c973adb2df
commit 1b1caa1a35
8 changed files with 438 additions and 2 deletions

View File

@ -0,0 +1,152 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.SplitViewDemo"
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">
<Border>
<Grid ColumnDefinitions="*,400">
<StackPanel
Grid.Column="1"
Margin="5"
Orientation="Vertical"
Spacing="4">
<ToggleButton
Name="PaneOpenButton"
Content="IsPaneOpen"
IsChecked="{Binding IsPaneOpen, ElementName=SplitView}" />
<ToggleButton
Name="UseLightDismissOverlayModeButton"
Content="UseLightDismissOverlayMode"
IsChecked="{Binding UseLightDismissOverlayMode, ElementName=SplitView}" />
<ToggleSwitch
Content="Placement"
IsChecked="{Binding !IsLeft}"
OffContent="Left"
OnContent="Right" />
<TextBlock Text="DisplayMode" />
<ComboBox
Name="DisplayModeSelector"
Width="170"
Margin="10"
SelectedIndex="{Binding DisplayMode}">
<ComboBoxItem>Inline</ComboBoxItem>
<ComboBoxItem>CompactInline</ComboBoxItem>
<ComboBoxItem>Overlay</ComboBoxItem>
<ComboBoxItem>CompactOverlay</ComboBoxItem>
</ComboBox>
<TextBlock Text="PaneBackground" />
<ComboBox
Name="PaneBackgroundSelector"
Width="170"
Margin="10"
SelectedIndex="0">
<ComboBoxItem Tag="White">White</ComboBoxItem>
<ComboBoxItem Tag="Red">Red</ComboBoxItem>
<ComboBoxItem Tag="Blue">Blue</ComboBoxItem>
<ComboBoxItem Tag="Green">Green</ComboBoxItem>
</ComboBox>
<TextBlock Text="{Binding Value, ElementName=OpenPaneLengthSlider, StringFormat='{}OpenPaneLength: {0}'}" />
<Slider
Name="OpenPaneLengthSlider"
Width="150"
Maximum="500"
Minimum="128"
Value="256" />
<TextBlock Text="{Binding Value, ElementName=CompactPaneLengthSlider, StringFormat='{}CompactPaneLength: {0}'}" />
<Slider
Name="CompactPaneLengthSlider"
Width="150"
Maximum="128"
Minimum="24"
Value="48" />
</StackPanel>
<Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}" BorderThickness="1">
<!-- {Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector} -->
<SplitView
Name="SplitView"
CompactPaneLength="{Binding Value, ElementName=CompactPaneLengthSlider}"
DisplayMode="CompactOverlay"
OpenPaneLength="{Binding Value, ElementName=OpenPaneLengthSlider}"
PaneBackground="{Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}"
PanePlacement="{Binding PanePlacement}">
<SplitView.Pane>
<Grid RowDefinitions="Auto,Auto,*,Auto">
<TextBlock
Name="PaneHeader"
Margin="5,12,0,0"
FontWeight="Bold"
Text="PANE CONTENT" />
<ComboBox Grid.Row="1" Width="150">
<ComboBoxItem Content="Item1" />
<ComboBoxItem Content="Item2" />
<ComboBoxItem Content="Item3" />
</ComboBox>
<ListBoxItem
Grid.Row="2"
Margin="0,10"
VerticalAlignment="Top">
<StackPanel Orientation="Horizontal">
<!-- Path glyph from materialdesignicons.com -->
<Border Width="48">
<Viewbox
Width="24"
Height="24"
HorizontalAlignment="Left">
<Canvas Width="24" Height="24">
<Path Data="M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z" Fill="{DynamicResource SystemControlForegroundBaseHighBrush}" />
</Canvas>
</Viewbox>
</Border>
<TextBlock VerticalAlignment="Center" Text="People" />
</StackPanel>
</ListBoxItem>
<TextBlock
Grid.Row="3"
Margin="60,12"
Text="Item at bottom" />
</Grid>
</SplitView.Pane>
<Grid>
<Grid.Styles>
<Style Selector="TextBlock">
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="700" />
</Style>
</Grid.Styles>
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="SplitViewContent" />
<TextBlock Text="SplitViewContent" TextAlignment="Left" />
<TextBlock
HorizontalAlignment="Right"
Text="SplitViewContent"
TextAlignment="Left" />
<TextBlock
VerticalAlignment="Bottom"
Text="SplitViewContent"
TextAlignment="Left" />
<TextBlock
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Text="SplitViewContent"
TextAlignment="Left" />
</Grid>
</SplitView>
</Border>
</Grid>
</Border>
</UserControl>

View File

@ -0,0 +1,18 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
namespace Semi.Avalonia.Demo.Pages;
public partial class SplitViewDemo : UserControl
{
public SplitViewDemo()
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}

View File

@ -81,6 +81,9 @@
<TabItem Header="Slider">
<pages:SliderDemo />
</TabItem>
<TabItem Header="SplitView">
<pages:SplitViewDemo />
</TabItem>
<TabItem Header="TabControl">
<pages:TabControlDemo />
</TabItem>

View File

@ -8,8 +8,6 @@
Title="Semi.Avalonia.Demo"
d:DesignHeight="450"
d:DesignWidth="800"
ExtendClientAreaChromeHints="Default"
ExtendClientAreaToDecorationsHint="True"
Icon="/Assets/avalonia-logo.ico"
mc:Ignorable="d">
<views:MainView />

View File

@ -35,6 +35,7 @@
<ResourceInclude Source="avares://Semi.Avalonia/Controls/ScrollViewer.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Slider.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/SplitButton.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/SplitView.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" />

View File

@ -0,0 +1,251 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="using:System">
<!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type SplitView}" TargetType="SplitView">
<Setter Property="OpenPaneLength" Value="{DynamicResource SplitViewOpenPaneThemeLength}" />
<Setter Property="CompactPaneLength" Value="{DynamicResource SplitViewCompactPaneThemeLength}" />
<Setter Property="PaneBackground" Value="White" />
<Style Selector="^:left">
<Setter Property="Template">
<ControlTemplate TargetType="SplitView">
<Grid Name="Container" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<!-- why is this throwing a binding error? -->
<ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Panel
Name="PART_PaneRoot"
HorizontalAlignment="Left"
Background="{TemplateBinding PaneBackground}"
ClipToBounds="True"
ZIndex="100">
<ContentPresenter
x:Name="PART_PanePresenter"
Content="{TemplateBinding Pane}"
ContentTemplate="{TemplateBinding PaneTemplate}" />
<Rectangle
Name="HCPaneBorder"
Width="1"
HorizontalAlignment="Right"
Fill="{DynamicResource SplitViewSeparatorBackground}" />
</Panel>
<Panel Name="ContentRoot">
<ContentPresenter
x:Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle
Name="LightDismissLayer"
Fill="Transparent"
IsVisible="False" />
</Panel>
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^:overlay">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
<Setter Property="Grid.ColumnSpan" Value="1" />
<Setter Property="Grid.Column" Value="0" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Column" Value="1" />
<Setter Property="Grid.ColumnSpan" Value="2" />
</Style>
</Style>
<Style Selector="^:compactinline">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.ColumnSpan" Value="1" />
<Setter Property="Grid.Column" Value="0" />
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Column" Value="1" />
<Setter Property="Grid.ColumnSpan" Value="1" />
</Style>
</Style>
<Style Selector="^:compactoverlay">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<!-- ColumnSpan should be 2 -->
<Setter Property="Grid.ColumnSpan" Value="1" />
<Setter Property="Grid.Column" Value="0" />
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Column" Value="1" />
<Setter Property="Grid.ColumnSpan" Value="1" />
</Style>
</Style>
<Style Selector="^:inline">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.ColumnSpan" Value="1" />
<Setter Property="Grid.Column" Value="0" />
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Column" Value="1" />
<Setter Property="Grid.ColumnSpan" Value="1" />
</Style>
</Style>
</Style>
<Style Selector="^:right">
<Setter Property="Template">
<ControlTemplate>
<Grid Name="Container" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.PaneColumnGridLength}" />
</Grid.ColumnDefinitions>
<Panel
Name="PART_PaneRoot"
HorizontalAlignment="Right"
Background="{TemplateBinding PaneBackground}"
ClipToBounds="True"
ZIndex="100">
<ContentPresenter
x:Name="PART_PanePresenter"
Content="{TemplateBinding Pane}"
ContentTemplate="{TemplateBinding PaneTemplate}" />
<Rectangle
Name="HCPaneBorder"
Width="1"
HorizontalAlignment="Left"
Fill="{DynamicResource SplitViewSeparatorBackground}" />
</Panel>
<Panel Name="ContentRoot">
<ContentPresenter
x:Name="PART_ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle Name="LightDismissLayer" />
</Panel>
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^:overlay">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
<Setter Property="Grid.ColumnSpan" Value="2" />
<Setter Property="Grid.Column" Value="1" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Column" Value="0" />
<Setter Property="Grid.ColumnSpan" Value="2" />
</Style>
</Style>
<Style Selector="^:compactinline">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.ColumnSpan" Value="1" />
<Setter Property="Grid.Column" Value="1" />
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Column" Value="0" />
<Setter Property="Grid.ColumnSpan" Value="1" />
</Style>
</Style>
<Style Selector="^:compactoverlay">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.ColumnSpan" Value="2" />
<Setter Property="Grid.Column" Value="1" />
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Column" Value="0" />
<Setter Property="Grid.ColumnSpan" Value="1" />
</Style>
</Style>
<Style Selector="^:inline">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Grid.ColumnSpan" Value="1" />
<Setter Property="Grid.Column" Value="1" />
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
</Style>
<Style Selector="^ /template/ Panel#ContentRoot">
<Setter Property="Grid.Column" Value="0" />
<Setter Property="Grid.ColumnSpan" Value="1" />
</Style>
</Style>
</Style>
<Style Selector="^:open">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition
Easing="{StaticResource SplitViewPaneAnimationEasing}"
Property="Width"
Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
</Transitions>
</Setter>
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=OpenPaneLength}" />
</Style>
<Style Selector="^ /template/ Rectangle#LightDismissLayer">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition
Easing="{StaticResource SplitViewPaneAnimationEasing}"
Property="Opacity"
Duration="{StaticResource SplitViewPaneAnimationOpenDuration}" />
</Transitions>
</Setter>
<Setter Property="Opacity" Value="1.0" />
</Style>
</Style>
<Style Selector="^:closed">
<Style Selector="^ /template/ Panel#PART_PaneRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition
Easing="{StaticResource SplitViewPaneAnimationEasing}"
Property="Width"
Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
</Transitions>
</Setter>
<Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.ClosedPaneWidth}" />
</Style>
<Style Selector="^ /template/ Rectangle#LightDismissLayer">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition
Easing="{StaticResource SplitViewPaneAnimationEasing}"
Property="Opacity"
Duration="{StaticResource SplitViewPaneAnimationCloseDuration}" />
</Transitions>
</Setter>
<Setter Property="Opacity" Value="0.0" />
</Style>
</Style>
<Style Selector="^:lightdismiss /template/ Rectangle#LightDismissLayer">
<Setter Property="Fill" Value="#99000000" />
</Style>
<Style Selector="^:overlay:open /template/ Rectangle#LightDismissLayer">
<Setter Property="IsVisible" Value="True" />
</Style>
<Style Selector="^:compactoverlay:open /template/ Rectangle#LightDismissLayer">
<Setter Property="IsVisible" Value="True" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@ -26,6 +26,7 @@
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ScrollViewer.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Slider.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/SplitButton.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/SplitView.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabControl.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />

View File

@ -0,0 +1,12 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="using:System">
<!-- Add Resources Here -->
<x:Double x:Key="SplitViewOpenPaneThemeLength">320</x:Double>
<x:Double x:Key="SplitViewCompactPaneThemeLength">48</x:Double>
<sys:TimeSpan x:Key="SplitViewPaneAnimationOpenDuration">00:00:00.2</sys:TimeSpan>
<sys:TimeSpan x:Key="SplitViewPaneAnimationCloseDuration">00:00:00.1</sys:TimeSpan>
<Easing x:Key="SplitViewPaneAnimationEasing">0.1,0.9,0.2,1.0</Easing>
<SolidColorBrush x:Key="SplitViewSeparatorBackground" Opacity="0.08" Color="#1C1F23" />
</ResourceDictionary>