feat: add Nav tag, enhance footer.

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

View File

@@ -20,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"
@@ -123,4 +117,4 @@
</u:NavMenuItem>
</u:NavMenu>
</Grid>
</UserControl>
</UserControl>

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)

View File

@@ -12,10 +12,10 @@ public class MenuViewModel : ViewModelBase
new() { MenuHeader = "Controls", IsSeparator = true },
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 = "Icon Button", Key = MenuKeys.MenuKeyIconButton },
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 },
@@ -25,7 +25,7 @@ public class MenuViewModel : ViewModelBase
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 },
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 },
@@ -37,11 +37,11 @@ public class MenuViewModel : ViewModelBase
},
new()
{
MenuHeader = "Dialog and Feedbacks", Children = new ObservableCollection<MenuItemViewModel>()
MenuHeader = "Dialog & Feedbacks", Children = new ObservableCollection<MenuItemViewModel>()
{
new() { MenuHeader = "Dialog", Key = MenuKeys.MenuKeyDialog },
new() { MenuHeader = "Drawer", Key = MenuKeys.MenuKeyDrawer },
new() { MenuHeader = "Loading", Key = MenuKeys.MenuKeyLoading },
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 },
@@ -50,7 +50,7 @@ public class MenuViewModel : ViewModelBase
},
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 Time Picker", Key = MenuKeys.MenuKeyDateTimePicker },
@@ -61,37 +61,35 @@ public class MenuViewModel : ViewModelBase
},
new()
{
MenuHeader = "Navigation and Menus", Children = new ObservableCollection<MenuItemViewModel>
MenuHeader = "Navigation & Menus", Children = new ObservableCollection<MenuItemViewModel>
{
new() { MenuHeader = "Breadcrumb", Key = MenuKeys.MenuKeyBreadcrumb },
new() { MenuHeader = "Nav Menu", Key = MenuKeys.MenuKeyNavMenu },
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 and Display",
MenuHeader = "Layout & Display",
Children = new ObservableCollection<MenuItemViewModel>
{
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 = "Banner", Key = MenuKeys.MenuKeyBanner },
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 },
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 }
}
},
};
}

View File

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