feat: use popup instead of flyout. improve demo.
This commit is contained in:
36
demo/Ursa.Demo/Converters/IconNameToPathConverter.cs
Normal file
36
demo/Ursa.Demo/Converters/IconNameToPathConverter.cs
Normal file
@@ -0,0 +1,36 @@
|
||||
using System;
|
||||
using System.Globalization;
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Data.Converters;
|
||||
using Avalonia.Media;
|
||||
|
||||
namespace Ursa.Demo.Converters;
|
||||
|
||||
public class IconNameToPathConverter: IValueConverter
|
||||
{
|
||||
private string[] paths = new[]
|
||||
{
|
||||
"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z",
|
||||
"M16 12L9 2L2 12H3.86L0 18H7V22H11V18H18L14.14 12H16M20.14 12H22L15 2L12.61 5.41L17.92 13H15.97L19.19 18H24L20.14 12M13 19H17V22H13V19Z",
|
||||
"M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z",
|
||||
"M5 21C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5M15.3 16L13.2 13.9L17 10L14.2 7.2L10.4 11.1L8.2 8.9V16H15.3Z",
|
||||
"M16,9V7H12V12.5C11.58,12.19 11.07,12 10.5,12A2.5,2.5 0 0,0 8,14.5A2.5,2.5 0 0,0 10.5,17A2.5,2.5 0 0,0 13,14.5V9H16M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z",
|
||||
"M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22 7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4 16.67,4Z",
|
||||
"M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12S17.5 2 12 2M12.5 13H11V7H12.5V11.3L16.2 9.2L17 10.5L12.5 13Z"
|
||||
};
|
||||
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
|
||||
{
|
||||
if (value is int i)
|
||||
{
|
||||
string s = paths[i % paths.Length];
|
||||
return StreamGeometry.Parse(s);
|
||||
}
|
||||
return AvaloniaProperty.UnsetValue;
|
||||
}
|
||||
|
||||
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
|
||||
{
|
||||
return AvaloniaProperty.UnsetValue;
|
||||
}
|
||||
}
|
||||
@@ -6,14 +6,17 @@
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:u="https://irihi.tech/ursa"
|
||||
xmlns:vm="using:Ursa.Demo.ViewModels"
|
||||
xmlns:converters="clr-namespace:Ursa.Demo.Converters"
|
||||
d:DesignHeight="450"
|
||||
d:DesignWidth="800"
|
||||
x:CompileBindings="True"
|
||||
x:DataType="vm:NavMenuDemoViewModel"
|
||||
mc:Ignorable="d">
|
||||
<UserControl.Resources>
|
||||
<converters:IconNameToPathConverter x:Key="IconConverter"/>
|
||||
</UserControl.Resources>
|
||||
<ScrollViewer>
|
||||
<StackPanel HorizontalAlignment="Left">
|
||||
<!--
|
||||
<TextBlock Text="{ReflectionBinding #menu2.SelectedItem.Header}"></TextBlock>
|
||||
<u:NavMenu Name="menu2" Width="300" IsHorizontalCollapsed="{Binding #collapse.IsChecked}">
|
||||
<u:NavMenuItem Header="Menu 1">
|
||||
@@ -45,36 +48,36 @@
|
||||
</u:NavMenuItem>
|
||||
</u:NavMenu>
|
||||
<u:Divider Content="Divider" />
|
||||
-->
|
||||
|
||||
<TextBlock Text="{ReflectionBinding #menu.SelectedItem.Header}" />
|
||||
<ToggleButton Name="collapse">Collapse</ToggleButton>
|
||||
|
||||
<Border Theme="{DynamicResource CardBorder}" HorizontalAlignment="Left" Padding="0">
|
||||
<u:NavMenu
|
||||
Name="menu"
|
||||
HeaderBinding="{Binding Header}"
|
||||
IconBinding="{Binding IconIndex}"
|
||||
IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
|
||||
ItemsSource="{Binding MenuItems}"
|
||||
SubMenuBinding="{Binding Children}">
|
||||
<u:NavMenu.IconTemplate>
|
||||
<DataTemplate DataType="{x:Type x:Int32}">
|
||||
<u:TwoTonePathIcon
|
||||
Width="18"
|
||||
Height="18"
|
||||
Data="{Binding Converter={StaticResource IconConverter}}"
|
||||
StrokeBrush="{DynamicResource SemiBlue2}"
|
||||
Foreground="{DynamicResource SemiBlue2}"
|
||||
ActiveStrokeBrush="{DynamicResource SemiBlue6}"
|
||||
ActiveForeground="{DynamicResource SemiBlue6}"
|
||||
IsActive="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}">
|
||||
</u:TwoTonePathIcon>
|
||||
</DataTemplate>
|
||||
</u:NavMenu.IconTemplate>
|
||||
</u:NavMenu>
|
||||
</Border>
|
||||
|
||||
<u:NavMenu
|
||||
Name="menu"
|
||||
Width="300"
|
||||
HeaderBinding="{Binding Header}"
|
||||
IconBinding="{Binding}"
|
||||
IsHorizontalCollapsed="{Binding #collapse.IsChecked, Mode=OneWay}"
|
||||
ItemsSource="{Binding MenuItems}"
|
||||
SubMenuBinding="{Binding Children}">
|
||||
<u:NavMenu.Styles>
|
||||
<Style Selector="Rectangle">
|
||||
<Setter Property="Fill" Value="Blue" />
|
||||
</Style>
|
||||
<Style Selector="Rectangle.Active">
|
||||
<Setter Property="Fill" Value="Red" />
|
||||
</Style>
|
||||
</u:NavMenu.Styles>
|
||||
<u:NavMenu.IconTemplate>
|
||||
<DataTemplate>
|
||||
<Rectangle
|
||||
Width="10"
|
||||
Height="10"
|
||||
Classes.Active="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}">
|
||||
</Rectangle>
|
||||
</DataTemplate>
|
||||
</u:NavMenu.IconTemplate>
|
||||
</u:NavMenu>
|
||||
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</UserControl>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
using System.Collections.ObjectModel;
|
||||
using System;
|
||||
using System.Collections.ObjectModel;
|
||||
using System.Threading.Tasks;
|
||||
using System.Windows.Input;
|
||||
using CommunityToolkit.Mvvm.ComponentModel;
|
||||
@@ -58,11 +59,13 @@ public class MenuItem
|
||||
{
|
||||
public string? Header { get; set; }
|
||||
public string? Icon { get; set; }
|
||||
public int IconIndex { get; set; }
|
||||
public ICommand NavigationCommand { get; set; }
|
||||
|
||||
static Random r = new Random();
|
||||
public MenuItem()
|
||||
{
|
||||
NavigationCommand = new AsyncRelayCommand(OnNavigate);
|
||||
IconIndex = r.Next(100);
|
||||
}
|
||||
|
||||
private async Task OnNavigate()
|
||||
|
||||
Reference in New Issue
Block a user