feat: redesign SplitViewDemo.
This commit is contained in:
Zhang Dian
parent
9bb50a7190
commit
38958c1326
@ -4,145 +4,190 @@
|
||||
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"
|
||||
xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
|
||||
d:DesignHeight="1000"
|
||||
d:DesignWidth="800"
|
||||
mc:Ignorable="d">
|
||||
<Design.DataContext>
|
||||
<pages:SplitViewDemoViewModel />
|
||||
</Design.DataContext>
|
||||
<UserControl.Resources>
|
||||
<ResourceDictionary>
|
||||
<StreamGeometry x:Key="NavigationMenuExpandIconGlyph">M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z</StreamGeometry>
|
||||
</ResourceDictionary>
|
||||
</UserControl.Resources>
|
||||
<Border>
|
||||
<Grid ColumnDefinitions="*,400">
|
||||
<StackPanel
|
||||
Grid.Column="1"
|
||||
Orientation="Vertical"
|
||||
Spacing="4">
|
||||
<ToggleButton
|
||||
HorizontalAlignment="Stretch"
|
||||
Name="PaneOpenButton"
|
||||
Content="IsPaneOpen"
|
||||
IsChecked="{Binding IsPaneOpen, ElementName=SplitView}" />
|
||||
|
||||
<ToggleButton
|
||||
HorizontalAlignment="Stretch"
|
||||
Name="UseLightDismissOverlayModeButton"
|
||||
Content="UseLightDismissOverlayMode"
|
||||
IsChecked="{Binding UseLightDismissOverlayMode, ElementName=SplitView}" />
|
||||
|
||||
<Border Grid.Column="1" VerticalAlignment="Top" Margin="10 0 0 0">
|
||||
<Grid RowDefinitions="*, *, *, *, *, *" ColumnDefinitions="Auto, *">
|
||||
<Label
|
||||
Grid.Row="0" Grid.Column="0"
|
||||
VerticalAlignment="Center"
|
||||
Content="IsPaneOpen" />
|
||||
<ToggleSwitch
|
||||
Content="Placement"
|
||||
Grid.Row="0" Grid.Column="1"
|
||||
Name="PaneOpenButton"
|
||||
IsChecked="{Binding #SplitView.IsPaneOpen}" />
|
||||
|
||||
<Label
|
||||
Grid.Row="1" Grid.Column="0"
|
||||
VerticalAlignment="Center"
|
||||
Content="UseLightDismissOverlayMode" />
|
||||
<ToggleSwitch
|
||||
Grid.Row="1" Grid.Column="1"
|
||||
Name="UseLightDismissOverlayModeButton"
|
||||
IsChecked="{Binding #SplitView.UseLightDismissOverlayMode}" />
|
||||
|
||||
<Label
|
||||
Grid.Row="2" Grid.Column="0"
|
||||
VerticalAlignment="Center"
|
||||
Content="Placement" />
|
||||
<ToggleSwitch
|
||||
Grid.Row="2" Grid.Column="1"
|
||||
OffContent="Left"
|
||||
OnContent="Right" />
|
||||
OnContent="Right"
|
||||
IsChecked="{Binding #SplitView.PanePlacement}" />
|
||||
|
||||
<TextBlock Text="DisplayMode" />
|
||||
<Label
|
||||
Grid.Row="3" Grid.Column="0"
|
||||
VerticalAlignment="Center"
|
||||
Content="DisplayMode" />
|
||||
<ComboBox
|
||||
Grid.Row="3" Grid.Column="1"
|
||||
Name="DisplayModeSelector"
|
||||
Width="170"
|
||||
Margin="10"
|
||||
SelectedIndex="{Binding DisplayMode}">
|
||||
<ComboBoxItem>Inline</ComboBoxItem>
|
||||
<ComboBoxItem>CompactInline</ComboBoxItem>
|
||||
<ComboBoxItem>Overlay</ComboBoxItem>
|
||||
<ComboBoxItem>CompactOverlay</ComboBoxItem>
|
||||
</ComboBox>
|
||||
HorizontalAlignment="Stretch"
|
||||
ItemsSource="{Binding DisplayModes}"
|
||||
SelectedIndex="{Binding #SplitView.DisplayMode}" />
|
||||
|
||||
<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}'}" />
|
||||
<Label
|
||||
Grid.Row="4" Grid.Column="0"
|
||||
VerticalAlignment="Center"
|
||||
Content="{Binding #CompactPaneLengthSlider.Value, StringFormat='{}CompactPaneLength: {0}'}" />
|
||||
<Slider
|
||||
Grid.Row="4" Grid.Column="1"
|
||||
Name="CompactPaneLengthSlider"
|
||||
Maximum="128"
|
||||
Minimum="0"
|
||||
TickFrequency="1"
|
||||
IsSnapToTickEnabled="True"
|
||||
Value="{Binding #SplitView.CompactPaneLength}" />
|
||||
|
||||
<Label
|
||||
Grid.Row="5" Grid.Column="0"
|
||||
VerticalAlignment="Center"
|
||||
Content="{Binding #OpenPaneLengthSlider.Value,StringFormat='{}OpenPaneLength: {0}'}" />
|
||||
<Slider
|
||||
Grid.Row="5" Grid.Column="1"
|
||||
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} -->
|
||||
TickFrequency="1"
|
||||
IsSnapToTickEnabled="True"
|
||||
Value="{Binding #SplitView.OpenPaneLength}" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<Border
|
||||
Grid.Column="0"
|
||||
BorderBrush="{DynamicResource SemiGrey1}"
|
||||
BorderThickness="1">
|
||||
<SplitView
|
||||
Name="SplitView"
|
||||
CompactPaneLength="{Binding Value, ElementName=CompactPaneLengthSlider}"
|
||||
DisplayMode="CompactOverlay"
|
||||
OpenPaneLength="{Binding Value, ElementName=OpenPaneLengthSlider}"
|
||||
PaneBackground="{Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}"
|
||||
PanePlacement="{Binding PanePlacement}">
|
||||
CompactPaneLength="48"
|
||||
OpenPaneLength="256">
|
||||
<SplitView.Background>
|
||||
<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
|
||||
<GradientStop Color="#6b4c1b" Offset="0" />
|
||||
<GradientStop Color="#291e10" Offset="1" />
|
||||
</LinearGradientBrush>
|
||||
</SplitView.Background>
|
||||
<SplitView.Pane>
|
||||
<Grid RowDefinitions="Auto,Auto,*,Auto">
|
||||
<Grid RowDefinitions="Auto,*,Auto">
|
||||
<TextBlock
|
||||
Grid.Row="0"
|
||||
Name="PaneHeader"
|
||||
Margin="5,12,0,0"
|
||||
Margin="8,12"
|
||||
FontWeight="Bold"
|
||||
Text="PANE CONTENT" />
|
||||
<ComboBox Grid.Row="1" Width="150">
|
||||
<ComboBoxItem Content="Item1" />
|
||||
<ComboBoxItem Content="Item2" />
|
||||
<ComboBoxItem Content="Item3" />
|
||||
</ComboBox>
|
||||
<ListBoxItem
|
||||
Text="Playlist" />
|
||||
<ListBox
|
||||
Grid.Row="1"
|
||||
ItemsSource="{Binding Songs}" />
|
||||
<ToggleSwitch
|
||||
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" />
|
||||
Theme="{DynamicResource ButtonToggleSwitch}"
|
||||
IsChecked="{Binding #SplitView.IsPaneOpen}">
|
||||
<ToggleSwitch.OnContent>
|
||||
<PathIcon
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{StaticResource NavigationMenuExpandIconGlyph}" />
|
||||
</ToggleSwitch.OnContent>
|
||||
<ToggleSwitch.OffContent>
|
||||
<PathIcon
|
||||
Width="16"
|
||||
Height="16"
|
||||
Data="{StaticResource NavigationMenuExpandIconGlyph}" />
|
||||
</ToggleSwitch.OffContent>
|
||||
</ToggleSwitch>
|
||||
</Grid>
|
||||
</SplitView.Pane>
|
||||
|
||||
<Grid>
|
||||
<Grid.Styles>
|
||||
<Style Selector="TextBlock">
|
||||
<Setter Property="FontSize" Value="14" />
|
||||
<Setter Property="FontWeight" Value="700" />
|
||||
<Panel>
|
||||
<Panel.Styles>
|
||||
<Style Selector="Image#AlbumCover">
|
||||
<Style.Animations>
|
||||
<Animation IterationCount="Infinite" Duration="0:0:40">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="RotateTransform.Angle" Value="0" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="RotateTransform.Angle" Value="360" />
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</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>
|
||||
</Panel.Styles>
|
||||
<Image
|
||||
Source="/Assets/WORLD.png"
|
||||
Name="AlbumCover"
|
||||
Width="200"
|
||||
Height="200" />
|
||||
<Arc
|
||||
Width="290"
|
||||
Height="290"
|
||||
StartAngle="0"
|
||||
SweepAngle="360"
|
||||
StrokeJoin="Round"
|
||||
StrokeLineCap="Round"
|
||||
StrokeThickness="45">
|
||||
<Arc.Stroke>
|
||||
<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
|
||||
<GradientStop Color="#010101" Offset="0" />
|
||||
<GradientStop Color="#363636" Offset="0.5" />
|
||||
<GradientStop Color="#010101" Offset="1" />
|
||||
</LinearGradientBrush>
|
||||
</Arc.Stroke>
|
||||
</Arc>
|
||||
<Arc
|
||||
Width="294"
|
||||
Height="294"
|
||||
StartAngle="0"
|
||||
SweepAngle="360"
|
||||
StrokeJoin="Round"
|
||||
StrokeLineCap="Round"
|
||||
StrokeThickness="4"
|
||||
Stroke="Black" />
|
||||
<Arc
|
||||
Width="310"
|
||||
Height="310"
|
||||
StartAngle="0"
|
||||
SweepAngle="360"
|
||||
StrokeJoin="Round"
|
||||
StrokeLineCap="Round"
|
||||
StrokeThickness="10"
|
||||
Stroke="#C6CACD"
|
||||
Opacity="0.1" />
|
||||
</Panel>
|
||||
|
||||
</SplitView>
|
||||
</Border>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
using Avalonia;
|
||||
using System.Collections.ObjectModel;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using CommunityToolkit.Mvvm.ComponentModel;
|
||||
|
||||
namespace Semi.Avalonia.Demo.Pages;
|
||||
|
||||
@ -9,6 +10,7 @@ public partial class SplitViewDemo : UserControl
|
||||
public SplitViewDemo()
|
||||
{
|
||||
InitializeComponent();
|
||||
this.DataContext = new SplitViewDemoViewModel();
|
||||
}
|
||||
|
||||
private void InitializeComponent()
|
||||
@ -16,3 +18,27 @@ public partial class SplitViewDemo : UserControl
|
||||
AvaloniaXamlLoader.Load(this);
|
||||
}
|
||||
}
|
||||
|
||||
public class SplitViewDemoViewModel : ObservableObject
|
||||
{
|
||||
public ObservableCollection<string> Songs { get; set; } =
|
||||
[
|
||||
"320万年前",
|
||||
"隐德来希",
|
||||
"孔明",
|
||||
"锦鲤卟噜噜",
|
||||
"指鹿为马",
|
||||
"热带季风Remix",
|
||||
"加州梦境",
|
||||
"渐近自由",
|
||||
"世界所有的烂漫",
|
||||
];
|
||||
|
||||
public ObservableCollection<SplitViewDisplayMode> DisplayModes { get; set; } =
|
||||
[
|
||||
SplitViewDisplayMode.Inline,
|
||||
SplitViewDisplayMode.CompactInline,
|
||||
SplitViewDisplayMode.Overlay,
|
||||
SplitViewDisplayMode.CompactOverlay,
|
||||
];
|
||||
}
|
||||
@ -121,7 +121,7 @@ public class Song
|
||||
new("指鹿为马", "熊猫堂ProducePandas", 3, 12, "W.O.R.L.D.", 74, 2063175272),
|
||||
new("热带季风Remix", "熊猫堂ProducePandas", 3, 22, "W.O.R.L.D.", 23, 2063173319),
|
||||
new("加州梦境", "熊猫堂ProducePandas", 2, 56, "W.O.R.L.D.", 1662, 2063173324),
|
||||
new("渐进自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
|
||||
new("渐近自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
|
||||
new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775),
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user