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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa" xmlns:u="https://irihi.tech/ursa"
xmlns:vm="using:Ursa.Demo.ViewModels" xmlns:vm="using:Ursa.Demo.ViewModels"
xmlns:iri="https://irihi.tech/shared"
d:DesignHeight="450" d:DesignHeight="450"
d:DesignWidth="800" d:DesignWidth="800"
x:CompileBindings="True" x:CompileBindings="True"
@@ -19,16 +20,10 @@
HorizontalAlignment="Left" HorizontalAlignment="Left"
ColumnDefinitions="Auto, Auto" ColumnDefinitions="Auto, Auto"
RowDefinitions="Auto, Auto, *"> RowDefinitions="Auto, Auto, *">
<ToggleButton <StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
Name="collapse" <ToggleSwitch Name="collapse" OnContent="Collapse" OffContent="Expand" />
Grid.Row="0" <Button HorizontalAlignment="Left" Command="{Binding RandomCommand}" Content="Random a selection" />
Grid.Column="0"
Grid.ColumnSpan="2">
Collapse
</ToggleButton>
<StackPanel Grid.Row="1" Grid.Column="0">
<TextBlock Text="{Binding SelectedMenuItem.Header}" /> <TextBlock Text="{Binding SelectedMenuItem.Header}" />
<Button Command="{Binding RandomCommand}">Random a selection</Button>
</StackPanel> </StackPanel>
<Border <Border
Grid.Row="2" Grid.Row="2"
@@ -65,13 +60,14 @@
</u:NavMenu.IconTemplate> </u:NavMenu.IconTemplate>
<u:NavMenu.Header> <u:NavMenu.Header>
<Grid HorizontalAlignment="Center" ColumnDefinitions="Auto, Auto"> <Grid HorizontalAlignment="Center" ColumnDefinitions="Auto, Auto">
<Image <Panel
Width="48" VerticalAlignment="Center"
Height="48"
Margin="4,12"
u:NavMenu.CanToggle="True" u:NavMenu.CanToggle="True"
RenderOptions.BitmapInterpolationMode="HighQuality" Margin="4 12"
Source="../Assets/Ursa.ico" /> Background="Transparent"
DockPanel.Dock="Left">
<iri:IrihiLogo Width="32" Fill="{DynamicResource SemiGrey7}" />
</Panel>
<TextBlock <TextBlock
Grid.Column="1" Grid.Column="1"
VerticalAlignment="Center" VerticalAlignment="Center"
@@ -121,4 +117,4 @@
</u:NavMenuItem> </u:NavMenuItem>
</u:NavMenu> </u:NavMenu>
</Grid> </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; 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) 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 class MenuViewModel : ViewModelBase
{ {
public ObservableCollection<MenuItemViewModel> MenuItems { get; set; }
public MenuViewModel() public MenuViewModel()
{ {
MenuItems = new ObservableCollection<MenuItemViewModel>() MenuItems = new ObservableCollection<MenuItemViewModel>
{ {
new() { MenuHeader = "Introduction", Key = MenuKeys.MenuKeyIntroduction, IsSeparator = false }, new() { MenuHeader = "Introduction", Key = MenuKeys.MenuKeyIntroduction, IsSeparator = false },
new() { MenuHeader = "Controls", IsSeparator = true }, new() { MenuHeader = "Controls", IsSeparator = true },
new() { MenuHeader = "AspectRatioLayout", Key = MenuKeys.AspectRatioLayout, Status = "New" }, new()
new() { MenuHeader = "AutoCompleteBox", Key = MenuKeys.MenuKeyAutoCompleteBox, Status = "WIP" }, {
new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar, Status = "WIP" }, MenuHeader = "Buttons & Inputs", Children = new ObservableCollection<MenuItemViewModel>
new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge }, {
new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner }, new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup },
new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb }, new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton, Status = "Redesigned" },
new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup }, new() { MenuHeader = "AutoCompleteBox", Key = MenuKeys.MenuKeyAutoCompleteBox },
new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput }, new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput },
new() { MenuHeader = "Clock", Key = MenuKeys.MenuKeyClock, Status = "Updated" }, new() { MenuHeader = "Enum Selector", Key = MenuKeys.MenuKeyEnumSelector },
new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker, Status = "New" }, new() { MenuHeader = "Form", Key = MenuKeys.MenuKeyForm },
new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker, Status = "New" }, new() { MenuHeader = "KeyGestureInput", Key = MenuKeys.MenuKeyKeyGestureInput },
new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog }, new() { MenuHeader = "IPv4Box", Key = MenuKeys.MenuKeyIpBox },
new() { MenuHeader = "Disable Container", Key = MenuKeys.MenuKeyDisableContainer }, new() { MenuHeader = "MultiComboBox", Key = MenuKeys.MenuKeyMultiComboBox },
new() { MenuHeader = "Divider", Key = MenuKeys.MenuKeyDivider }, new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown },
new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer }, new() { MenuHeader = "NumPad", Key = MenuKeys.MenuKeyNumPad },
new() { MenuHeader = "DualBadge", Key = MenuKeys.MenuKeyDualBadge }, new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker, Status = "New" },
new() { MenuHeader = "ElasticWrapPanel", Key = MenuKeys.MenuKeyElasticWrapPanel }, new() { MenuHeader = "PinCode", Key = MenuKeys.MenuKeyPinCode },
new() { MenuHeader = "Enum Selector", Key = MenuKeys.MenuKeyEnumSelector }, new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider },
new() { MenuHeader = "Form", Key = MenuKeys.MenuKeyForm }, new() { MenuHeader = "Rating", Key = MenuKeys.MenuKeyRating },
new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton }, new() { MenuHeader = "Selection List", Key = MenuKeys.MenuKeySelectionList },
new() { MenuHeader = "ImageViewer", Key = MenuKeys.MenuKeyImageViewer, Status = "WIP" }, new() { MenuHeader = "TagInput", Key = MenuKeys.MenuKeyTagInput },
new() { MenuHeader = "IPv4Box", Key = MenuKeys.MenuKeyIpBox }, new() { MenuHeader = "Theme Toggler", Key = MenuKeys.MenuKeyThemeToggler },
new() { MenuHeader = "KeyGestureInput", Key = MenuKeys.MenuKeyKeyGestureInput }, new() { MenuHeader = "TreeComboBox", Key = MenuKeys.MenuKeyTreeComboBox },
new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading }, }
new() { MenuHeader = "Marquee", Key = MenuKeys.MenuKeyMarquee }, },
new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox }, new()
new() { MenuHeader = "MultiComboBox", Key = MenuKeys.MenuKeyMultiComboBox, Status = "Updated" }, {
new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu }, MenuHeader = "Dialog & Feedbacks", Children = new ObservableCollection<MenuItemViewModel>()
new() { MenuHeader = "Notification", Key = MenuKeys.MenuKeyNotification, Status = "New" }, {
new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer, Status = "New" }, new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog },
new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown }, new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer, Status = "Updated" },
new() { MenuHeader = "NumPad", Key = MenuKeys.MenuKeyNumPad }, new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading, Status = "Updated" },
new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination }, new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox },
new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker, Status = "WIP" }, new() { MenuHeader = "Notification", Key = MenuKeys.MenuKeyNotification },
new() { MenuHeader = "PinCode", Key = MenuKeys.MenuKeyPinCode }, new() { MenuHeader = "Toast", Key = MenuKeys.MenuKeyToast },
new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider }, new() { MenuHeader = "Skeleton", Key = MenuKeys.MenuKeySkeleton },
new() { MenuHeader = "Rating", Key = MenuKeys.MenuKeyRating }, }
new() { MenuHeader = "Scroll To", Key = MenuKeys.MenuKeyScrollToButton }, },
new() { MenuHeader = "Selection List", Key = MenuKeys.MenuKeySelectionList }, new()
new() { MenuHeader = "Skeleton", Key = MenuKeys.MenuKeySkeleton }, {
new() { MenuHeader = "TagInput", Key = MenuKeys.MenuKeyTagInput, Status = "Updated" }, MenuHeader = "Date & Time", Children = new ObservableCollection<MenuItemViewModel>
new() { MenuHeader = "Theme Toggler", Key = MenuKeys.MenuKeyThemeToggler }, {
new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox }, new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker },
new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline }, new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker },
new() { MenuHeader = "TimePicker", Key = MenuKeys.MenuKeyTimePicker }, new() { MenuHeader = "Time Box", Key = MenuKeys.MenuKeyTimeBox },
new() { MenuHeader = "Toast", Key = MenuKeys.MenuKeyToast, Status = "New" }, new() { MenuHeader = "TimePicker", Key = MenuKeys.MenuKeyTimePicker },
new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar }, new() { MenuHeader = "Clock", Key = MenuKeys.MenuKeyClock }
new() { MenuHeader = "TreeComboBox", Key = MenuKeys.MenuKeyTreeComboBox }, }
new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon }, },
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 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:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Ursa.Demo.Converters" xmlns:converters="clr-namespace:Ursa.Demo.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa" xmlns:u="https://irihi.tech/ursa"
xmlns:vm="using:Ursa.Demo.ViewModels" xmlns:vm="using:Ursa.Demo.ViewModels"
@@ -22,24 +23,26 @@
<Panel> <Panel>
<Panel.Styles> <Panel.Styles>
<Style Selector="Grid.Blur"> <Style Selector="Grid.Blur">
<Setter Property="Effect" Value="blur(10)"></Setter> <Setter Property="Effect" Value="blur(10)" />
</Style> </Style>
</Panel.Styles> </Panel.Styles>
<Grid <Grid Classes.Blur="{Binding $parent[u:UrsaWindow].(u:OverlayDialogHost.IsInModalStatus)}" ColumnDefinitions="Auto, *">
Classes.Blur="{Binding $parent[u:UrsaWindow].(u:OverlayDialogHost.IsInModalStatus)}"
ColumnDefinitions="Auto, *">
<Border <Border
Padding="8 4" Padding="8,4"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Theme="{DynamicResource CardBorder}"> Theme="{DynamicResource CardBorder}">
<u:NavMenu Name="menu" ItemsSource="{Binding Menus.MenuItems}" <u:NavMenu
ExpandWidth="300" Name="menu"
CommandBinding="{Binding ActivateCommand}" CommandBinding="{Binding ActivateCommand}"
HeaderBinding="{Binding}" ExpandWidth="300"
IconBinding="{Binding MenuHeader}"> SubMenuBinding="{Binding Children}"
HeaderBinding="{Binding}"
IconBinding="{Binding MenuHeader}"
IsHorizontalCollapsed="{Binding IsCollapsed, Mode=TwoWay}"
ItemsSource="{Binding Menus.MenuItems}">
<u:NavMenu.Styles> <u:NavMenu.Styles>
<Style Selector="u|NavMenuItem" x:DataType="vm:MenuItemViewModel"> <Style x:DataType="vm:MenuItemViewModel" Selector="u|NavMenuItem">
<Setter Property="IsSeparator" Value="{Binding IsSeparator}"></Setter> <Setter Property="IsSeparator" Value="{Binding IsSeparator}" />
</Style> </Style>
</u:NavMenu.Styles> </u:NavMenu.Styles>
<u:NavMenu.IconTemplate> <u:NavMenu.IconTemplate>
@@ -57,54 +60,50 @@
</u:NavMenu.IconTemplate> </u:NavMenu.IconTemplate>
<u:NavMenu.HeaderTemplate> <u:NavMenu.HeaderTemplate>
<DataTemplate x:DataType="vm:MenuItemViewModel"> <DataTemplate x:DataType="vm:MenuItemViewModel">
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal" Spacing="{StaticResource SemiSpacingExtraTight}">
<TextBlock HorizontalAlignment="Left" Text="{Binding MenuHeader}" /> <TextBlock HorizontalAlignment="Left" Text="{Binding MenuHeader}" />
<u:Badge <Label
Margin="8,0,0,0" Theme="{StaticResource TagLabel}"
HorizontalAlignment="Left" Classes="Purple"
IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}" Content="{Binding Status}"
Header="{Binding Status}" /> IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}" />
</StackPanel> </StackPanel>
</DataTemplate> </DataTemplate>
</u:NavMenu.HeaderTemplate> </u:NavMenu.HeaderTemplate>
<u:NavMenu.Header> <u:NavMenu.Header>
<DockPanel HorizontalAlignment="Center" Margin="8"> <DockPanel Margin="8 32 8 8" HorizontalAlignment="Center" >
<Image <Panel
Width="48" VerticalAlignment="Center"
Height="48"
u:NavMenu.CanToggle="True" u:NavMenu.CanToggle="True"
VerticalAlignment="Center" Background="Transparent"
DockPanel.Dock="Left" DockPanel.Dock="Left">
RenderOptions.BitmapInterpolationMode="HighQuality" <iri:IrihiLogo Width="32" Fill="{DynamicResource SemiGrey7}" />
Source="../Assets/Ursa.ico" /> </Panel>
<TextBlock <TextBlock
Classes="H4"
Text="Ursa"
IsVisible="{Binding !#menu.IsHorizontalCollapsed}"
VerticalAlignment="Center" VerticalAlignment="Center"
Classes="H4"
Margin="16 0 0 0"
IsVisible="{Binding !#menu.IsHorizontalCollapsed}"
Text="Ursa"
Theme="{DynamicResource TitleTextBlock}" /> Theme="{DynamicResource TitleTextBlock}" />
</DockPanel> </DockPanel>
</u:NavMenu.Header> </u:NavMenu.Header>
<u:NavMenu.Footer> <u:NavMenu.Footer>
<u:IconButton <u:IconButton
Theme="{DynamicResource BorderlessIconButton}" HorizontalAlignment="Stretch"
Classes="Tertiary" Classes="Tertiary"
HorizontalAlignment="Stretch"> Icon="{StaticResource SemiIconSetting}"
<TextBlock Content="{Binding FooterText}"
Text="Settings" RenderTransform="{x:Null}"
IsVisible="{Binding !#menu.IsHorizontalCollapsed}" /> ToolTip.Tip="Settings"
<u:IconButton.Icon> FontWeight="Normal"
<PathIcon Theme="{DynamicResource BorderlessIconButton}">
Theme="{StaticResource InnerPathIcon}"
Data="{StaticResource SemiIconSetting}" />
</u:IconButton.Icon>
<Button.Flyout> <Button.Flyout>
<Flyout Placement="RightEdgeAlignedBottom"> <Flyout Placement="RightEdgeAlignedBottom">
<u:Form LabelPosition="Left"> <u:Form LabelPosition="Left">
<ComboBox <ComboBox
u:FormItem.Label="ThemeVariant" Width="110"
MinWidth="100" u:FormItem.Label="Theme"
PlaceholderText="Select a theme"
DisplayMemberBinding="{Binding Name}" DisplayMemberBinding="{Binding Name}"
ItemsSource="{Binding Themes}" ItemsSource="{Binding Themes}"
SelectedItem="{Binding SelectedTheme}" /> SelectedItem="{Binding SelectedTheme}" />
@@ -117,7 +116,7 @@
</Border> </Border>
<ContentControl <ContentControl
Grid.Column="1" Grid.Column="1"
Margin="12 36 12 12" Margin="12,36,12,12"
Content="{Binding Content}"> Content="{Binding Content}">
<ContentControl.ContentTemplate> <ContentControl.ContentTemplate>
<converters:ViewLocator /> <converters:ViewLocator />

4
src/Ursa/Ursa.csproj
View File

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