197 lines
9.2 KiB
XML
197 lines
9.2 KiB
XML
<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"
|
|
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">
|
|
<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
|
|
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"
|
|
IsChecked="{Binding #SplitView.PanePlacement}" />
|
|
|
|
<Label
|
|
Grid.Row="3" Grid.Column="0"
|
|
VerticalAlignment="Center"
|
|
Content="DisplayMode" />
|
|
<ComboBox
|
|
Grid.Row="3" Grid.Column="1"
|
|
Name="DisplayModeSelector"
|
|
HorizontalAlignment="Stretch"
|
|
ItemsSource="{Binding DisplayModes}"
|
|
SelectedIndex="{Binding #SplitView.DisplayMode}" />
|
|
|
|
<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"
|
|
Maximum="500"
|
|
Minimum="128"
|
|
TickFrequency="1"
|
|
IsSnapToTickEnabled="True"
|
|
Value="{Binding #SplitView.OpenPaneLength}" />
|
|
</Grid>
|
|
</Border>
|
|
<Border
|
|
Grid.Column="0"
|
|
BorderBrush="{DynamicResource SemiGrey1}"
|
|
BorderThickness="1">
|
|
<SplitView
|
|
Name="SplitView"
|
|
DisplayMode="CompactOverlay"
|
|
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">
|
|
<TextBlock
|
|
Grid.Row="0"
|
|
Name="PaneHeader"
|
|
Margin="8,12"
|
|
FontWeight="Bold"
|
|
Text="Playlist" />
|
|
<ListBox
|
|
Grid.Row="1"
|
|
ItemsSource="{Binding Songs}" />
|
|
<ToggleSwitch
|
|
Grid.Row="2"
|
|
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>
|
|
|
|
<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>
|
|
</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>
|
|
|
|
</Grid>
|
|
</Border>
|
|
</UserControl> |