Skip to content

Commit

Permalink
Merge pull request #334 from irihitech/20240329-backport
Browse files Browse the repository at this point in the history 
20240329 backport
  • Loading branch information
@zdpcdt
zdpcdt authored Mar 29, 2024
2 parents efc7870 + 047c9f9 commit afacdf2
Show file tree
Hide file tree
Showing 14 changed files with 240 additions and 135 deletions.
281 changes: 164 additions & 117 deletions demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,147 +4,194 @@
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
Name="PaneOpenButton"
Content="IsPaneOpen"
IsChecked="{Binding IsPaneOpen, 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
Grid.Row="0" Grid.Column="1"
Name="PaneOpenButton"
IsChecked="{Binding #SplitView.IsPaneOpen}" />

<ToggleButton
Name="UseLightDismissOverlayModeButton"
Content="UseLightDismissOverlayMode"
IsChecked="{Binding UseLightDismissOverlayMode, ElementName=SplitView}" />
<Label
Grid.Row="1" Grid.Column="0"
VerticalAlignment="Center"
Content="UseLightDismissOverlayMode" />
<ToggleSwitch
Grid.Row="1" Grid.Column="1"
Name="UseLightDismissOverlayModeButton"
IsChecked="{Binding #SplitView.UseLightDismissOverlayMode}" />

<ToggleSwitch
Content="Placement"
OffContent="Left"
OnContent="Right" />
<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, Mode=OneWayToSource}" />

<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>
<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}" />

<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>
<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}" />

<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} -->
<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"
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>

</Grid>
</Border>
</UserControl>
</UserControl>
28 changes: 27 additions & 1 deletion demo/Semi.Avalonia.Demo/Pages/SplitViewDemo.axaml.cs
View file
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -9,10 +10,35 @@ public partial class SplitViewDemo : UserControl
public SplitViewDemo()
{
InitializeComponent();
this.DataContext = new SplitViewDemoViewModel();
}

private void InitializeComponent()
{
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,
];
}
2 changes: 1 addition & 1 deletion demo/Semi.Avalonia.Demo/ViewModels/DataGridDemoViewModel.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ public Song(string title, string artist, int m, int s, string album, int countOf
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),
};
}
Expand Down
11 changes: 8 additions & 3 deletions src/Package.props
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,18 @@
<PropertyGroup>
<TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
<Nullable>enable</Nullable>
<LangVersion>11</LangVersion>
<LangVersion>latest</LangVersion>
<Version>11.0.7.1</Version>
<Authors>IRIHI Technology</Authors>
<Authors>IRIHI Technology Co., Ltd.</Authors>
<Description>Avalonia Theme inspired by Semi Design.</Description>
<RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
<PackageLicenseExpression>MIT</PackageLicenseExpression>
<PackageIcon>irihi.png</PackageIcon>
<PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
<AvaloniaVersion>11.0.7</AvaloniaVersion>
<PackageLicenseExpression>MIT</PackageLicenseExpression>
</PropertyGroup>

<ItemGroup>
<None Include="irihi.png" Pack="true" PackagePath=""/>
</ItemGroup>
</Project>
Binary file added src/Semi.Avalonia.ColorPicker/irihi.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Semi.Avalonia.DataGrid/irihi.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit afacdf2

Please sign in to comment.