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

feat: add Nav tag, enhance footer.

Browse Source
This commit is contained in:
Zhang Dian
2025-02-13 21:31:42 +08:00
parent 717509d1d4
commit 346c89424f
4 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,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"

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)

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

@@ -12,10 +12,10 @@ public class MenuViewModel : ViewModelBase
new() { MenuHeader = "Controls", IsSeparator = true }, new() { MenuHeader = "Controls", IsSeparator = true },
new() new()
{ {
MenuHeader = "Buttons and Inputs", Children = new ObservableCollection<MenuItemViewModel> MenuHeader = "Buttons & Inputs", Children = new ObservableCollection<MenuItemViewModel>
{ {
new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup }, new() { MenuHeader = "Button Group", Key = MenuKeys.MenuKeyButtonGroup },
new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton }, new() { MenuHeader = "Icon Button", Key = MenuKeys.MenuKeyIconButton, Status = "Redesigned" },
new() { MenuHeader = "AutoCompleteBox", Key = MenuKeys.MenuKeyAutoCompleteBox }, new() { MenuHeader = "AutoCompleteBox", Key = MenuKeys.MenuKeyAutoCompleteBox },
new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput }, new() { MenuHeader = "Class Input", Key = MenuKeys.MenuKeyClassInput },
new() { MenuHeader = "Enum Selector", Key = MenuKeys.MenuKeyEnumSelector }, new() { MenuHeader = "Enum Selector", Key = MenuKeys.MenuKeyEnumSelector },
@@ -25,7 +25,7 @@ public class MenuViewModel : ViewModelBase
new() { MenuHeader = "MultiComboBox", Key = MenuKeys.MenuKeyMultiComboBox }, new() { MenuHeader = "MultiComboBox", Key = MenuKeys.MenuKeyMultiComboBox },
new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown }, new() { MenuHeader = "Numeric UpDown", Key = MenuKeys.MenuKeyNumericUpDown },
new() { MenuHeader = "NumPad", Key = MenuKeys.MenuKeyNumPad }, new() { MenuHeader = "NumPad", Key = MenuKeys.MenuKeyNumPad },
new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker }, new() { MenuHeader = "PathPicker", Key = MenuKeys.PathPicker, Status = "New" },
new() { MenuHeader = "PinCode", Key = MenuKeys.MenuKeyPinCode }, new() { MenuHeader = "PinCode", Key = MenuKeys.MenuKeyPinCode },
new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider }, new() { MenuHeader = "RangeSlider", Key = MenuKeys.MenuKeyRangeSlider },
new() { MenuHeader = "Rating", Key = MenuKeys.MenuKeyRating }, new() { MenuHeader = "Rating", Key = MenuKeys.MenuKeyRating },
@@ -37,11 +37,11 @@ public class MenuViewModel : ViewModelBase
}, },
new() new()
{ {
MenuHeader = "Dialog and Feedbacks", Children = new ObservableCollection<MenuItemViewModel>() MenuHeader = "Dialog & Feedbacks", Children = new ObservableCollection<MenuItemViewModel>()
{ {
new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog }, new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog },
new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer }, new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer, Status = "Updated" },
new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading }, new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading, Status = "Updated" },
new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox }, new() { MenuHeader = "Message Box", Key = MenuKeys.MenuKeyMessageBox },
new() { MenuHeader = "Notification", Key = MenuKeys.MenuKeyNotification }, new() { MenuHeader = "Notification", Key = MenuKeys.MenuKeyNotification },
new() { MenuHeader = "Toast", Key = MenuKeys.MenuKeyToast }, new() { MenuHeader = "Toast", Key = MenuKeys.MenuKeyToast },
@@ -50,7 +50,7 @@ public class MenuViewModel : ViewModelBase
}, },
new() new()
{ {
MenuHeader = "Date and Time", Children = new ObservableCollection<MenuItemViewModel> MenuHeader = "Date & Time", Children = new ObservableCollection<MenuItemViewModel>
{ {
new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker }, new() { MenuHeader = "Date Picker", Key = MenuKeys.MenuKeyDatePicker },
new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker }, new() { MenuHeader = "Date Time Picker", Key = MenuKeys.MenuKeyDateTimePicker },
@@ -61,37 +61,35 @@ public class MenuViewModel : ViewModelBase
}, },
new() new()
{ {
MenuHeader = "Navigation and Menus", Children = new ObservableCollection<MenuItemViewModel> MenuHeader = "Navigation & Menus", Children = new ObservableCollection<MenuItemViewModel>
{ {
new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb }, new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb, Status = "Updated" },
new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu }, new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu, Status = "Updated" },
new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination }, new() { MenuHeader = "Pagination", Key = MenuKeys.MenuKeyPagination },
new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar }, new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar },
} }
}, },
new() new()
{ {
MenuHeader = "Layout and Display", MenuHeader = "Layout & Display",
Children = new ObservableCollection<MenuItemViewModel> Children = new ObservableCollection<MenuItemViewModel>
{ {
new() { MenuHeader = "AspectRatioLayout", Key = MenuKeys.AspectRatioLayout }, new() { MenuHeader = "AspectRatioLayout", Key = MenuKeys.AspectRatioLayout },
new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar }, new() { MenuHeader = "Avatar", Key = MenuKeys.MenuKeyAvatar, Status = "WIP" },
new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge }, new() { MenuHeader = "Badge", Key = MenuKeys.MenuKeyBadge },
new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner }, new() { MenuHeader = "Banner", Key = MenuKeys.MenuKeyBanner, Status = "Updated" },
new() { MenuHeader = "Disable Container", Key = MenuKeys.MenuKeyDisableContainer }, new() { MenuHeader = "Disable Container", Key = MenuKeys.MenuKeyDisableContainer },
new() { MenuHeader = "Divider", Key = MenuKeys.MenuKeyDivider }, new() { MenuHeader = "Divider", Key = MenuKeys.MenuKeyDivider },
new() { MenuHeader = "DualBadge", Key = MenuKeys.MenuKeyDualBadge }, new() { MenuHeader = "DualBadge", Key = MenuKeys.MenuKeyDualBadge },
new() { MenuHeader = "ImageViewer", Key = MenuKeys.MenuKeyImageViewer }, new() { MenuHeader = "ImageViewer", Key = MenuKeys.MenuKeyImageViewer },
new() { MenuHeader = "ElasticWrapPanel", Key = MenuKeys.MenuKeyElasticWrapPanel }, new() { MenuHeader = "ElasticWrapPanel", Key = MenuKeys.MenuKeyElasticWrapPanel },
new() { MenuHeader = "Marquee", Key = MenuKeys.MenuKeyMarquee }, new() { MenuHeader = "Marquee", Key = MenuKeys.MenuKeyMarquee, Status = "New" },
new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer }, new() { MenuHeader = "Number Displayer", Key = MenuKeys.MenuKeyNumberDisplayer },
new() { MenuHeader = "Scroll To", Key = MenuKeys.MenuKeyScrollToButton }, new() { MenuHeader = "Scroll To", Key = MenuKeys.MenuKeyScrollToButton },
new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline }, new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline },
new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon } new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon }
} }
}, },
}; };
} }

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

@@ -38,6 +38,7 @@
SubMenuBinding="{Binding Children}" SubMenuBinding="{Binding Children}"
HeaderBinding="{Binding}" HeaderBinding="{Binding}"
IconBinding="{Binding MenuHeader}" IconBinding="{Binding MenuHeader}"
IsHorizontalCollapsed="{Binding IsCollapsed, Mode=TwoWay}"
ItemsSource="{Binding Menus.MenuItems}"> ItemsSource="{Binding Menus.MenuItems}">
<u:NavMenu.Styles> <u:NavMenu.Styles>
<Style x:DataType="vm:MenuItemViewModel" Selector="u|NavMenuItem"> <Style x:DataType="vm:MenuItemViewModel" Selector="u|NavMenuItem">
@@ -59,12 +60,12 @@
</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"
Header="{Binding Status}" Content="{Binding Status}"
IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}" /> IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}" />
</StackPanel> </StackPanel>
</DataTemplate> </DataTemplate>
@@ -91,20 +92,20 @@
<u:IconButton <u:IconButton
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
Classes="Tertiary" Classes="Tertiary"
Icon="{StaticResource SemiIconSetting}"
Content="{Binding FooterText}"
RenderTransform="{x:Null}"
ToolTip.Tip="Settings"
FontWeight="Normal"
Theme="{DynamicResource BorderlessIconButton}"> Theme="{DynamicResource BorderlessIconButton}">
<TextBlock IsVisible="{Binding !#menu.IsHorizontalCollapsed}" Text="Settings" />
<u:IconButton.Icon>
<PathIcon Data="{StaticResource SemiIconSetting}" Theme="{StaticResource InnerPathIcon}" />
</u:IconButton.Icon>
<Button.Flyout> <Button.Flyout>
<Flyout Placement="RightEdgeAlignedBottom"> <Flyout Placement="RightEdgeAlignedBottom">
<u:Form LabelPosition="Left"> <u:Form LabelPosition="Left">
<ComboBox <ComboBox
MinWidth="100" Width="110"
u:FormItem.Label="ThemeVariant" u:FormItem.Label="Theme"
DisplayMemberBinding="{Binding Name}" DisplayMemberBinding="{Binding Name}"
ItemsSource="{Binding Themes}" ItemsSource="{Binding Themes}"
PlaceholderText="Select a theme"
SelectedItem="{Binding SelectedTheme}" /> SelectedItem="{Binding SelectedTheme}" />
</u:Form> </u:Form>
</Flyout> </Flyout>