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:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
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"
|
d:DesignWidth="800"
|
||||||
mc:Ignorable="d">
|
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>
|
<Border>
|
||||||
<Grid ColumnDefinitions="*,400">
|
<Grid ColumnDefinitions="*,400">
|
||||||
<StackPanel
|
<Border Grid.Column="1" VerticalAlignment="Top" Margin="10 0 0 0">
|
||||||
Grid.Column="1"
|
<Grid RowDefinitions="*, *, *, *, *, *" ColumnDefinitions="Auto, *">
|
||||||
Orientation="Vertical"
|
<Label
|
||||||
Spacing="4">
|
Grid.Row="0" Grid.Column="0"
|
||||||
<ToggleButton
|
VerticalAlignment="Center"
|
||||||
HorizontalAlignment="Stretch"
|
Content="IsPaneOpen" />
|
||||||
Name="PaneOpenButton"
|
|
||||||
Content="IsPaneOpen"
|
|
||||||
IsChecked="{Binding IsPaneOpen, ElementName=SplitView}" />
|
|
||||||
|
|
||||||
<ToggleButton
|
|
||||||
HorizontalAlignment="Stretch"
|
|
||||||
Name="UseLightDismissOverlayModeButton"
|
|
||||||
Content="UseLightDismissOverlayMode"
|
|
||||||
IsChecked="{Binding UseLightDismissOverlayMode, ElementName=SplitView}" />
|
|
||||||
|
|
||||||
<ToggleSwitch
|
<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"
|
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
|
<ComboBox
|
||||||
|
Grid.Row="3" Grid.Column="1"
|
||||||
Name="DisplayModeSelector"
|
Name="DisplayModeSelector"
|
||||||
Width="170"
|
HorizontalAlignment="Stretch"
|
||||||
Margin="10"
|
ItemsSource="{Binding DisplayModes}"
|
||||||
SelectedIndex="{Binding DisplayMode}">
|
SelectedIndex="{Binding #SplitView.DisplayMode}" />
|
||||||
<ComboBoxItem>Inline</ComboBoxItem>
|
|
||||||
<ComboBoxItem>CompactInline</ComboBoxItem>
|
|
||||||
<ComboBoxItem>Overlay</ComboBoxItem>
|
|
||||||
<ComboBoxItem>CompactOverlay</ComboBoxItem>
|
|
||||||
</ComboBox>
|
|
||||||
|
|
||||||
<TextBlock Text="PaneBackground" />
|
<Label
|
||||||
<ComboBox
|
Grid.Row="4" Grid.Column="0"
|
||||||
Name="PaneBackgroundSelector"
|
VerticalAlignment="Center"
|
||||||
Width="170"
|
Content="{Binding #CompactPaneLengthSlider.Value, StringFormat='{}CompactPaneLength: {0}'}" />
|
||||||
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
|
<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"
|
Name="OpenPaneLengthSlider"
|
||||||
Width="150"
|
|
||||||
Maximum="500"
|
Maximum="500"
|
||||||
Minimum="128"
|
Minimum="128"
|
||||||
Value="256" />
|
TickFrequency="1"
|
||||||
|
IsSnapToTickEnabled="True"
|
||||||
<TextBlock Text="{Binding Value, ElementName=CompactPaneLengthSlider, StringFormat='{}CompactPaneLength: {0}'}" />
|
Value="{Binding #SplitView.OpenPaneLength}" />
|
||||||
<Slider
|
</Grid>
|
||||||
Name="CompactPaneLengthSlider"
|
</Border>
|
||||||
Width="150"
|
<Border
|
||||||
Maximum="128"
|
Grid.Column="0"
|
||||||
Minimum="24"
|
BorderBrush="{DynamicResource SemiGrey1}"
|
||||||
Value="48" />
|
BorderThickness="1">
|
||||||
</StackPanel>
|
|
||||||
<Border BorderBrush="{DynamicResource SystemControlHighlightBaseLowBrush}" BorderThickness="1">
|
|
||||||
<!-- {Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector} -->
|
|
||||||
<SplitView
|
<SplitView
|
||||||
Name="SplitView"
|
Name="SplitView"
|
||||||
CompactPaneLength="{Binding Value, ElementName=CompactPaneLengthSlider}"
|
|
||||||
DisplayMode="CompactOverlay"
|
DisplayMode="CompactOverlay"
|
||||||
OpenPaneLength="{Binding Value, ElementName=OpenPaneLengthSlider}"
|
CompactPaneLength="48"
|
||||||
PaneBackground="{Binding SelectedItem.Tag, ElementName=PaneBackgroundSelector}"
|
OpenPaneLength="256">
|
||||||
PanePlacement="{Binding PanePlacement}">
|
<SplitView.Background>
|
||||||
|
<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
|
||||||
|
<GradientStop Color="#6b4c1b" Offset="0" />
|
||||||
|
<GradientStop Color="#291e10" Offset="1" />
|
||||||
|
</LinearGradientBrush>
|
||||||
|
</SplitView.Background>
|
||||||
<SplitView.Pane>
|
<SplitView.Pane>
|
||||||
<Grid RowDefinitions="Auto,Auto,*,Auto">
|
<Grid RowDefinitions="Auto,*,Auto">
|
||||||
<TextBlock
|
<TextBlock
|
||||||
|
Grid.Row="0"
|
||||||
Name="PaneHeader"
|
Name="PaneHeader"
|
||||||
Margin="5,12,0,0"
|
Margin="8,12"
|
||||||
FontWeight="Bold"
|
FontWeight="Bold"
|
||||||
Text="PANE CONTENT" />
|
Text="Playlist" />
|
||||||
<ComboBox Grid.Row="1" Width="150">
|
<ListBox
|
||||||
<ComboBoxItem Content="Item1" />
|
Grid.Row="1"
|
||||||
<ComboBoxItem Content="Item2" />
|
ItemsSource="{Binding Songs}" />
|
||||||
<ComboBoxItem Content="Item3" />
|
<ToggleSwitch
|
||||||
</ComboBox>
|
|
||||||
<ListBoxItem
|
|
||||||
Grid.Row="2"
|
Grid.Row="2"
|
||||||
Margin="0,10"
|
Theme="{DynamicResource ButtonToggleSwitch}"
|
||||||
VerticalAlignment="Top">
|
IsChecked="{Binding #SplitView.IsPaneOpen}">
|
||||||
<StackPanel Orientation="Horizontal">
|
<ToggleSwitch.OnContent>
|
||||||
<!-- Path glyph from materialdesignicons.com -->
|
<PathIcon
|
||||||
<Border Width="48">
|
Width="16"
|
||||||
<Viewbox
|
Height="16"
|
||||||
Width="24"
|
Data="{StaticResource NavigationMenuExpandIconGlyph}" />
|
||||||
Height="24"
|
</ToggleSwitch.OnContent>
|
||||||
HorizontalAlignment="Left">
|
<ToggleSwitch.OffContent>
|
||||||
<Canvas Width="24" Height="24">
|
<PathIcon
|
||||||
<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}" />
|
Width="16"
|
||||||
</Canvas>
|
Height="16"
|
||||||
</Viewbox>
|
Data="{StaticResource NavigationMenuExpandIconGlyph}" />
|
||||||
</Border>
|
</ToggleSwitch.OffContent>
|
||||||
<TextBlock VerticalAlignment="Center" Text="People" />
|
</ToggleSwitch>
|
||||||
</StackPanel>
|
|
||||||
</ListBoxItem>
|
|
||||||
<TextBlock
|
|
||||||
Grid.Row="3"
|
|
||||||
Margin="60,12"
|
|
||||||
Text="Item at bottom" />
|
|
||||||
</Grid>
|
</Grid>
|
||||||
</SplitView.Pane>
|
</SplitView.Pane>
|
||||||
|
|
||||||
<Grid>
|
<Panel>
|
||||||
<Grid.Styles>
|
<Panel.Styles>
|
||||||
<Style Selector="TextBlock">
|
<Style Selector="Image#AlbumCover">
|
||||||
<Setter Property="FontSize" Value="14" />
|
<Style.Animations>
|
||||||
<Setter Property="FontWeight" Value="700" />
|
<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>
|
</Style>
|
||||||
</Grid.Styles>
|
</Panel.Styles>
|
||||||
<TextBlock
|
<Image
|
||||||
HorizontalAlignment="Center"
|
Source="/Assets/WORLD.png"
|
||||||
VerticalAlignment="Center"
|
Name="AlbumCover"
|
||||||
Text="SplitViewContent" />
|
Width="200"
|
||||||
<TextBlock Text="SplitViewContent" TextAlignment="Left" />
|
Height="200" />
|
||||||
<TextBlock
|
<Arc
|
||||||
HorizontalAlignment="Right"
|
Width="290"
|
||||||
Text="SplitViewContent"
|
Height="290"
|
||||||
TextAlignment="Left" />
|
StartAngle="0"
|
||||||
<TextBlock
|
SweepAngle="360"
|
||||||
VerticalAlignment="Bottom"
|
StrokeJoin="Round"
|
||||||
Text="SplitViewContent"
|
StrokeLineCap="Round"
|
||||||
TextAlignment="Left" />
|
StrokeThickness="45">
|
||||||
<TextBlock
|
<Arc.Stroke>
|
||||||
HorizontalAlignment="Right"
|
<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
|
||||||
VerticalAlignment="Bottom"
|
<GradientStop Color="#010101" Offset="0" />
|
||||||
Text="SplitViewContent"
|
<GradientStop Color="#363636" Offset="0.5" />
|
||||||
TextAlignment="Left" />
|
<GradientStop Color="#010101" Offset="1" />
|
||||||
</Grid>
|
</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>
|
</SplitView>
|
||||||
</Border>
|
</Border>
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
using Avalonia;
|
using System.Collections.ObjectModel;
|
||||||
using Avalonia.Controls;
|
using Avalonia.Controls;
|
||||||
using Avalonia.Markup.Xaml;
|
using Avalonia.Markup.Xaml;
|
||||||
|
using CommunityToolkit.Mvvm.ComponentModel;
|
||||||
|
|
||||||
namespace Semi.Avalonia.Demo.Pages;
|
namespace Semi.Avalonia.Demo.Pages;
|
||||||
|
|
||||||
@ -9,6 +10,7 @@ public partial class SplitViewDemo : UserControl
|
|||||||
public SplitViewDemo()
|
public SplitViewDemo()
|
||||||
{
|
{
|
||||||
InitializeComponent();
|
InitializeComponent();
|
||||||
|
this.DataContext = new SplitViewDemoViewModel();
|
||||||
}
|
}
|
||||||
|
|
||||||
private void InitializeComponent()
|
private void InitializeComponent()
|
||||||
@ -16,3 +18,27 @@ public partial class SplitViewDemo : UserControl
|
|||||||
AvaloniaXamlLoader.Load(this);
|
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("指鹿为马", "熊猫堂ProducePandas", 3, 12, "W.O.R.L.D.", 74, 2063175272),
|
||||||
new("热带季风Remix", "熊猫堂ProducePandas", 3, 22, "W.O.R.L.D.", 23, 2063173319),
|
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", 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),
|
new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user