chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #569 from irihitech/icon

Browse Source 
Demo update
This commit is contained in:
Zhang Dian
2025-02-13 21:55:05 +08:00
committed by GitHub
parent 543597a50e 346c89424f
commit 720d3a9cb6
5 changed files with 148 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
demo/Ursa.Demo/Pages/NavMenuDemo.axaml
View File

@@ -7,6 +7,7 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa"
xmlns:vm="using:Ursa.Demo.ViewModels"
xmlns:iri="https://irihi.tech/shared"
d:DesignHeight="450"
d:DesignWidth="800"
x:CompileBindings="True"
@@ -19,16 +20,10 @@
HorizontalAlignment="Left"
ColumnDefinitions="Auto, Auto"
RowDefinitions="Auto, Auto, *">
<ToggleButton
Name="collapse"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2">
Collapse
</ToggleButton>
<StackPanel Grid.Row="1" Grid.Column="0">
<StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
<ToggleSwitch Name="collapse" OnContent="Collapse" OffContent="Expand" />
<Button HorizontalAlignment="Left" Command="{Binding RandomCommand}" Content="Random a selection" />
<TextBlock Text="{Binding SelectedMenuItem.Header}" />
<Button Command="{Binding RandomCommand}">Random a selection</Button>
</StackPanel>
<Border
Grid.Row="2"
@@ -65,13 +60,14 @@
</u:NavMenu.IconTemplate>
<u:NavMenu.Header>
<Grid HorizontalAlignment="Center" ColumnDefinitions="Auto, Auto">
<Image
Width="48"
Height="48"
Margin="4,12"
<Panel
VerticalAlignment="Center"
u:NavMenu.CanToggle="True"
RenderOptions.BitmapInterpolationMode="HighQuality"
Source="../Assets/Ursa.ico" />
Margin="4 12"
Background="Transparent"
DockPanel.Dock="Left">
<iri:IrihiLogo Width="32" Fill="{DynamicResource SemiGrey7}" />
</Panel>
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
@@ -121,4 +117,4 @@
</u:NavMenuItem>
</u:NavMenu>
</Grid>
</UserControl>
</UserControl>

9
demo/Ursa.Demo/ViewModels/MainViewViewModel.cs
View File

@@ -107,6 +107,15 @@ public partial class MainViewViewModel : ViewModelBase
app.RequestedThemeVariant = newValue.Theme;
}
}
[ObservableProperty] private string? _footerText = "Settings";
[ObservableProperty] private bool _isCollapsed;
partial void OnIsCollapsedChanged(bool value)
{
FooterText = value ? null : "Settings";
}
}
public class ThemeItem(string name, ThemeVariant theme)

136
demo/Ursa.Demo/ViewModels/MenuViewModel.cs
View File

@@ -4,66 +4,96 @@ namespace Ursa.Demo.ViewModels;
public class MenuViewModel : ViewModelBase
{
public ObservableCollection<MenuItemViewModel> MenuItems { get; set; }
public MenuViewModel()
{
MenuItems = new ObservableCollection<MenuItemViewModel>()
MenuItems = new ObservableCollection<MenuItemViewModel>
{
new() { MenuHeader = "Introduction", Key = MenuKeys.MenuKeyIntroduction, IsSeparator = false },
new() { MenuHeader = "Controls", IsSeparator = true },
new() { MenuHeader = "AspectRatioLayout", Key = MenuKeys.AspectRatioLayout, Status = "New" },
new() { MenuHeader = "AutoCompleteBox", Key = MenuKeys.MenuKeyAutoCompleteBox, Status = "WIP" },
new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar, Status = "WIP" },
new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge },
new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner },
new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb },
new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup },
new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput },
new() { MenuHeader = "Clock", Key = MenuKeys.MenuKeyClock, Status = "Updated" },
new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker, Status = "New" },
new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker, Status = "New" },
new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog },
new() { MenuHeader = "Disable Container", Key = MenuKeys.MenuKeyDisableContainer },
new() { MenuHeader = "Divider", Key = MenuKeys.MenuKeyDivider },
new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer },
new() { MenuHeader = "DualBadge", Key = MenuKeys.MenuKeyDualBadge },
new() { MenuHeader = "ElasticWrapPanel", Key = MenuKeys.MenuKeyElasticWrapPanel },
new() { MenuHeader = "Enum Selector", Key = MenuKeys.MenuKeyEnumSelector },
new() { MenuHeader = "Form", Key = MenuKeys.MenuKeyForm },
new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton },
new() { MenuHeader = "ImageViewer", Key = MenuKeys.MenuKeyImageViewer, Status = "WIP" },
new() { MenuHeader = "IPv4Box", Key = MenuKeys.MenuKeyIpBox },
new() { MenuHeader = "KeyGestureInput", Key = MenuKeys.MenuKeyKeyGestureInput },
new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading },
new() { MenuHeader = "Marquee", Key = MenuKeys.MenuKeyMarquee },
new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox },
new() { MenuHeader = "MultiComboBox", Key = MenuKeys.MenuKeyMultiComboBox, Status = "Updated" },
new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu },
new() { MenuHeader = "Notification", Key = MenuKeys.MenuKeyNotification, Status = "New" },
new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer, Status = "New" },
new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown },
new() { MenuHeader = "NumPad", Key = MenuKeys.MenuKeyNumPad },
new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker, Status = "WIP" },
new() { MenuHeader = "PinCode", Key = MenuKeys.MenuKeyPinCode },
new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider },
new() { MenuHeader = "Rating", Key = MenuKeys.MenuKeyRating },
new() { MenuHeader = "Scroll To", Key = MenuKeys.MenuKeyScrollToButton },
new() { MenuHeader = "Selection List", Key = MenuKeys.MenuKeySelectionList },
new() { MenuHeader = "Skeleton", Key = MenuKeys.MenuKeySkeleton },
new() { MenuHeader = "TagInput", Key = MenuKeys.MenuKeyTagInput, Status = "Updated" },
new() { MenuHeader = "Theme Toggler", Key = MenuKeys.MenuKeyThemeToggler },
new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox },
new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline },
new() { MenuHeader = "TimePicker", Key = MenuKeys.MenuKeyTimePicker },
new() { MenuHeader = "Toast", Key = MenuKeys.MenuKeyToast, Status = "New" },
new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar },
new() { MenuHeader = "TreeComboBox", Key = MenuKeys.MenuKeyTreeComboBox },
new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon },
new()
{
MenuHeader = "Buttons & Inputs", Children = new ObservableCollection<MenuItemViewModel>
{
new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup },
new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton, Status = "Redesigned" },
new() { MenuHeader = "AutoCompleteBox", Key = MenuKeys.MenuKeyAutoCompleteBox },
new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput },
new() { MenuHeader = "Enum Selector", Key = MenuKeys.MenuKeyEnumSelector },
new() { MenuHeader = "Form", Key = MenuKeys.MenuKeyForm },
new() { MenuHeader = "KeyGestureInput", Key = MenuKeys.MenuKeyKeyGestureInput },
new() { MenuHeader = "IPv4Box", Key = MenuKeys.MenuKeyIpBox },
new() { MenuHeader = "MultiComboBox", Key = MenuKeys.MenuKeyMultiComboBox },
new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown },
new() { MenuHeader = "NumPad", Key = MenuKeys.MenuKeyNumPad },
new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker, Status = "New" },
new() { MenuHeader = "PinCode", Key = MenuKeys.MenuKeyPinCode },
new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider },
new() { MenuHeader = "Rating", Key = MenuKeys.MenuKeyRating },
new() { MenuHeader = "Selection List", Key = MenuKeys.MenuKeySelectionList },
new() { MenuHeader = "TagInput", Key = MenuKeys.MenuKeyTagInput },
new() { MenuHeader = "Theme Toggler", Key = MenuKeys.MenuKeyThemeToggler },
new() { MenuHeader = "TreeComboBox", Key = MenuKeys.MenuKeyTreeComboBox },
}
},
new()
{
MenuHeader = "Dialog & Feedbacks", Children = new ObservableCollection<MenuItemViewModel>()
{
new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog },
new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer, Status = "Updated" },
new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading, Status = "Updated" },
new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox },
new() { MenuHeader = "Notification", Key = MenuKeys.MenuKeyNotification },
new() { MenuHeader = "Toast", Key = MenuKeys.MenuKeyToast },
new() { MenuHeader = "Skeleton", Key = MenuKeys.MenuKeySkeleton },
}
},
new()
{
MenuHeader = "Date & Time", Children = new ObservableCollection<MenuItemViewModel>
{
new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker },
new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker },
new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox },
new() { MenuHeader = "TimePicker", Key = MenuKeys.MenuKeyTimePicker },
new() { MenuHeader = "Clock", Key = MenuKeys.MenuKeyClock }
}
},
new()
{
MenuHeader = "Navigation & Menus", Children = new ObservableCollection<MenuItemViewModel>
{
new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb, Status = "Updated" },
new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu, Status = "Updated" },
new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar },
}
},
new()
{
MenuHeader = "Layout & Display",
Children = new ObservableCollection<MenuItemViewModel>
{
new() { MenuHeader = "AspectRatioLayout", Key = MenuKeys.AspectRatioLayout },
new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar, Status = "WIP" },
new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge },
new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner, Status = "Updated" },
new() { MenuHeader = "Disable Container", Key = MenuKeys.MenuKeyDisableContainer },
new() { MenuHeader = "Divider", Key = MenuKeys.MenuKeyDivider },
new() { MenuHeader = "DualBadge", Key = MenuKeys.MenuKeyDualBadge },
new() { MenuHeader = "ImageViewer", Key = MenuKeys.MenuKeyImageViewer },
new() { MenuHeader = "ElasticWrapPanel", Key = MenuKeys.MenuKeyElasticWrapPanel },
new() { MenuHeader = "Marquee", Key = MenuKeys.MenuKeyMarquee, Status = "New" },
new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer },
new() { MenuHeader = "Scroll To", Key = MenuKeys.MenuKeyScrollToButton },
new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline },
new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon }
}
},
};
}
public ObservableCollection<MenuItemViewModel> MenuItems { get; set; }
}
public static class MenuKeys

85
demo/Ursa.Demo/Views/MainView.axaml
View File

@@ -4,6 +4,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Ursa.Demo.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:iri="https://irihi.tech/shared"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa"
xmlns:vm="using:Ursa.Demo.ViewModels"
@@ -22,24 +23,26 @@
<Panel>
<Panel.Styles>
<Style Selector="Grid.Blur">
<Setter Property="Effect" Value="blur(10)"></Setter>
<Setter Property="Effect" Value="blur(10)" />
</Style>
</Panel.Styles>
<Grid
Classes.Blur="{Binding $parent[u:UrsaWindow].(u:OverlayDialogHost.IsInModalStatus)}"
ColumnDefinitions="Auto, *">
<Grid Classes.Blur="{Binding $parent[u:UrsaWindow].(u:OverlayDialogHost.IsInModalStatus)}" ColumnDefinitions="Auto, *">
<Border
Padding="8 4"
Padding="8,4"
VerticalAlignment="Stretch"
Theme="{DynamicResource CardBorder}">
<u:NavMenu Name="menu" ItemsSource="{Binding Menus.MenuItems}"
ExpandWidth="300"
CommandBinding="{Binding ActivateCommand}"
HeaderBinding="{Binding}"
IconBinding="{Binding MenuHeader}">
<u:NavMenu
Name="menu"
CommandBinding="{Binding ActivateCommand}"
ExpandWidth="300"
SubMenuBinding="{Binding Children}"
HeaderBinding="{Binding}"
IconBinding="{Binding MenuHeader}"
IsHorizontalCollapsed="{Binding IsCollapsed, Mode=TwoWay}"
ItemsSource="{Binding Menus.MenuItems}">
<u:NavMenu.Styles>
<Style Selector="u|NavMenuItem" x:DataType="vm:MenuItemViewModel">
<Setter Property="IsSeparator" Value="{Binding IsSeparator}"></Setter>
<Style x:DataType="vm:MenuItemViewModel" Selector="u|NavMenuItem">
<Setter Property="IsSeparator" Value="{Binding IsSeparator}" />
</Style>
</u:NavMenu.Styles>
<u:NavMenu.IconTemplate>
@@ -57,54 +60,50 @@
</u:NavMenu.IconTemplate>
<u:NavMenu.HeaderTemplate>
<DataTemplate x:DataType="vm:MenuItemViewModel">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Horizontal" Spacing="{StaticResource SemiSpacingExtraTight}">
<TextBlock HorizontalAlignment="Left" Text="{Binding MenuHeader}" />
<u:Badge
Margin="8,0,0,0"
HorizontalAlignment="Left"
IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}"
Header="{Binding Status}" />
<Label
Theme="{StaticResource TagLabel}"
Classes="Purple"
Content="{Binding Status}"
IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}" />
</StackPanel>
</DataTemplate>
</u:NavMenu.HeaderTemplate>
<u:NavMenu.Header>
<DockPanel HorizontalAlignment="Center" Margin="8">
<Image
Width="48"
Height="48"
<DockPanel Margin="8 32 8 8" HorizontalAlignment="Center" >
<Panel
VerticalAlignment="Center"
u:NavMenu.CanToggle="True"
VerticalAlignment="Center"
DockPanel.Dock="Left"
RenderOptions.BitmapInterpolationMode="HighQuality"
Source="../Assets/Ursa.ico" />
Background="Transparent"
DockPanel.Dock="Left">
<iri:IrihiLogo Width="32" Fill="{DynamicResource SemiGrey7}" />
</Panel>
<TextBlock
Classes="H4"
Text="Ursa"
IsVisible="{Binding !#menu.IsHorizontalCollapsed}"
VerticalAlignment="Center"
Classes="H4"
Margin="16 0 0 0"
IsVisible="{Binding !#menu.IsHorizontalCollapsed}"
Text="Ursa"
Theme="{DynamicResource TitleTextBlock}" />
</DockPanel>
</u:NavMenu.Header>
<u:NavMenu.Footer>
<u:IconButton
Theme="{DynamicResource BorderlessIconButton}"
HorizontalAlignment="Stretch"
Classes="Tertiary"
HorizontalAlignment="Stretch">
<TextBlock
Text="Settings"
IsVisible="{Binding !#menu.IsHorizontalCollapsed}" />
<u:IconButton.Icon>
<PathIcon
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource SemiIconSetting}" />
</u:IconButton.Icon>
Icon="{StaticResource SemiIconSetting}"
Content="{Binding FooterText}"
RenderTransform="{x:Null}"
ToolTip.Tip="Settings"
FontWeight="Normal"
Theme="{DynamicResource BorderlessIconButton}">
<Button.Flyout>
<Flyout Placement="RightEdgeAlignedBottom">
<u:Form LabelPosition="Left">
<ComboBox
u:FormItem.Label="ThemeVariant"
MinWidth="100"
PlaceholderText="Select a theme"
Width="110"
u:FormItem.Label="Theme"
DisplayMemberBinding="{Binding Name}"
ItemsSource="{Binding Themes}"
SelectedItem="{Binding SelectedTheme}" />
@@ -117,7 +116,7 @@
</Border>
<ContentControl
Grid.Column="1"
Margin="12 36 12 12"
Margin="12,36,12,12"
Content="{Binding Content}">
<ContentControl.ContentTemplate>
<converters:ViewLocator />

4
src/Ursa/Ursa.csproj
View File

@@ -15,8 +15,8 @@
<ItemGroup>
<PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
<PackageReference Include="Irihi.Avalonia.Shared" Version="0.2.1" />
<PackageReference Include="Irihi.Avalonia.Shared.Contracts" Version="0.2.1" />
<PackageReference Include="Irihi.Avalonia.Shared" Version="0.2.3" />
<PackageReference Include="Irihi.Avalonia.Shared.Contracts" Version="0.2.3" />
</ItemGroup>
<ItemGroup>