9c014f37be
* Initial plan * Improve Introduction page with diverse simple controls Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * Make layout more condensed and add requested controls - Reduced spacing and padding throughout (20->12 margin, 16->10 padding, 8->6 spacing) - Reduced section title size (16->14) - Changed from 2-column to 3-column grid layout for better space utilization - Added all requested controls: IPv4Box, MultiComboBox, MultiAutoCompleteBox, NumericUpDown, RangeSlider, TagInput, TreeComboBox, DateRangePicker, DateTimePicker, TimeRangePicker, ToolBar, Marquee - Updated ViewModel with properties for new controls - Made controls smaller (using Small classes where available) Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com>
248 lines
12 KiB
XML
248 lines
12 KiB
XML
<UserControl
|
|
x:Class="Ursa.Demo.Pages.IntroductionDemo"
|
|
xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:u="https://irihi.tech/ursa"
|
|
xmlns:vm="using:Ursa.Demo.ViewModels"
|
|
xmlns:models="clr-namespace:Ursa.Demo.Models"
|
|
x:DataType="vm:IntroductionDemoViewModel"
|
|
d:DesignHeight="800"
|
|
d:DesignWidth="1600"
|
|
mc:Ignorable="d">
|
|
<Design.DataContext>
|
|
<vm:IntroductionDemoViewModel />
|
|
</Design.DataContext>
|
|
<UserControl.Styles>
|
|
<Style Selector="u|Badge">
|
|
<Setter Property="Margin" Value="4" />
|
|
</Style>
|
|
<Style Selector="u|DualBadge">
|
|
<Setter Property="Margin" Value="3" />
|
|
</Style>
|
|
<Style Selector="Border.SectionCard">
|
|
<Setter Property="Background" Value="{DynamicResource SemiColorBgDefault}" />
|
|
<Setter Property="BorderBrush" Value="{DynamicResource SemiColorBorder}" />
|
|
<Setter Property="BorderThickness" Value="1" />
|
|
<Setter Property="CornerRadius" Value="6" />
|
|
<Setter Property="Padding" Value="10" />
|
|
<Setter Property="Margin" Value="4" />
|
|
</Style>
|
|
<Style Selector="TextBlock.SectionTitle">
|
|
<Setter Property="FontWeight" Value="SemiBold" />
|
|
<Setter Property="FontSize" Value="14" />
|
|
</Style>
|
|
</UserControl.Styles>
|
|
|
|
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
|
|
<StackPanel Margin="12" Spacing="8">
|
|
<!-- Welcome Banner -->
|
|
<u:Banner
|
|
Classes="Bordered"
|
|
Content="Aesthetic revolution of productivity. Explore Ursa controls below."
|
|
Header="Welcome to Ursa.Avalonia!"
|
|
Type="Information" />
|
|
|
|
<!-- Marquee -->
|
|
<u:Marquee Height="40" Speed="40" Content="This is a scrolling marquee text - Ursa.Avalonia UI Library" />
|
|
|
|
<Grid ColumnDefinitions="*, *, *" RowDefinitions="Auto, Auto, Auto, Auto, Auto">
|
|
<!-- Row 0 - Avatars, Badges, Button Groups -->
|
|
<Border Grid.Column="0" Grid.Row="0" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="Avatars" Classes="SectionTitle" />
|
|
<StackPanel Orientation="Horizontal" Spacing="4">
|
|
<u:Avatar Classes="Red Small" Content="R" />
|
|
<u:Avatar Classes="Blue Small" Content="B" />
|
|
<u:Avatar Classes="Green Small" Content="G" />
|
|
<u:Avatar Classes="Square Orange Small" Content="S" />
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="1" Grid.Row="0" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="Badges" Classes="SectionTitle" />
|
|
<WrapPanel Orientation="Horizontal">
|
|
<u:Badge Classes="Primary" Header="5">
|
|
<u:Avatar Classes="Blue Small" Content="A" />
|
|
</u:Badge>
|
|
<u:Badge Classes="Success" Header="99" OverflowCount="50">
|
|
<u:Avatar Classes="Green Small" Content="B" />
|
|
</u:Badge>
|
|
<u:Badge Classes="Warning" Dot="True">
|
|
<u:Avatar Classes="Amber Small" Content="C" />
|
|
</u:Badge>
|
|
</WrapPanel>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="2" Grid.Row="0" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="Button Groups" Classes="SectionTitle" />
|
|
<u:ButtonGroup Classes="Primary Small" ItemsSource="{Binding ButtonGroupItems}" />
|
|
<u:ButtonGroup Classes="Success Small" ItemsSource="{Binding ButtonGroupItems}" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<!-- Row 1 - Icon Buttons, Rating, Dividers -->
|
|
<Border Grid.Column="0" Grid.Row="1" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="Icon Buttons" Classes="SectionTitle" />
|
|
<StackPanel Orientation="Horizontal" Spacing="4">
|
|
<u:IconButton Icon="{StaticResource SemiIconCamera}" Classes="Small" />
|
|
<u:IconButton Icon="{StaticResource SemiIconStar}" Classes="Secondary Small" />
|
|
<u:IconButton Icon="{StaticResource SemiIconLikeHeart}" Classes="Warning Small" />
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="1" Grid.Row="1" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="Rating" Classes="SectionTitle" />
|
|
<u:Rating Classes="Small" AllowHalf="True" Value="{Binding RatingValue}" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="2" Grid.Row="1" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="Dual Badge" Classes="SectionTitle" />
|
|
<u:DualBadge Header="v">1.0</u:DualBadge>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<!-- Row 2 - IPv4Box, NumericUpDown, Slider -->
|
|
<Border Grid.Column="0" Grid.Row="2" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="IPv4Box" Classes="SectionTitle" />
|
|
<u:IPv4Box Width="180" IPAddress="{Binding IpAddress}" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="1" Grid.Row="2" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="NumericUpDown" Classes="SectionTitle" />
|
|
<NumericUpDown Width="120" Value="{Binding SliderValue}" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="2" Grid.Row="2" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="Slider" Classes="SectionTitle" />
|
|
<Slider Minimum="0" Maximum="100" Value="{Binding SliderValue}" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<!-- Row 3 - RangeSlider, MultiComboBox, TreeComboBox -->
|
|
<Border Grid.Column="0" Grid.Row="3" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="RangeSlider" Classes="SectionTitle" />
|
|
<u:RangeSlider Minimum="0" Maximum="100" LowerValue="{Binding LowerValue}" UpperValue="{Binding UpperValue}" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="1" Grid.Row="3" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="MultiComboBox" Classes="SectionTitle" />
|
|
<u:MultiComboBox Width="180" Watermark="Select..." ItemsSource="{Binding ComboBoxItems}" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="2" Grid.Row="3" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="TreeComboBox" Classes="SectionTitle" />
|
|
<u:TreeComboBox Width="180" Watermark="Select...">
|
|
<u:TreeComboBoxItem Header="Item 1">
|
|
<u:TreeComboBoxItem Header="Sub 1" />
|
|
<u:TreeComboBoxItem Header="Sub 2" />
|
|
</u:TreeComboBoxItem>
|
|
<u:TreeComboBoxItem Header="Item 2" />
|
|
</u:TreeComboBox>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<!-- Row 4 - TagInput, MultiAutoCompleteBox, Breadcrumb -->
|
|
<Border Grid.Column="0" Grid.Row="4" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="TagInput" Classes="SectionTitle" />
|
|
<u:TagInput Width="180" Watermark="Add tags..." Tags="{Binding TagItems}" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="1" Grid.Row="4" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="MultiAutoComplete" Classes="SectionTitle" />
|
|
<u:MultiAutoCompleteBox Width="180" Watermark="Type..." ItemsSource="{Binding AutoCompleteItems}">
|
|
<u:MultiAutoCompleteBox.ItemTemplate>
|
|
<DataTemplate DataType="models:ControlData">
|
|
<TextBlock Text="{Binding MenuHeader}" />
|
|
</DataTemplate>
|
|
</u:MultiAutoCompleteBox.ItemTemplate>
|
|
</u:MultiAutoCompleteBox>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="2" Grid.Row="4" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="Breadcrumb" Classes="SectionTitle" />
|
|
<u:Breadcrumb>
|
|
<TextBlock Text="Home" />
|
|
<TextBlock Text="Ursa" />
|
|
<TextBlock Text="Intro" />
|
|
</u:Breadcrumb>
|
|
</StackPanel>
|
|
</Border>
|
|
</Grid>
|
|
|
|
<!-- Date and Time Pickers Row -->
|
|
<Grid ColumnDefinitions="*, *, *" RowDefinitions="Auto">
|
|
<Border Grid.Column="0" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="DateRangePicker" Classes="SectionTitle" />
|
|
<u:DateRangePicker Width="220" SelectedStartDate="{Binding StartDate}" SelectedEndDate="{Binding EndDate}" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="1" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="DateTimePicker" Classes="SectionTitle" />
|
|
<u:DateTimePicker Width="220" SelectedDate="{Binding DateTime}" />
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Grid.Column="2" Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="TimeRangePicker" Classes="SectionTitle" />
|
|
<u:TimeRangePicker Width="220" StartTime="{Binding StartTime}" EndTime="{Binding EndTime}" />
|
|
</StackPanel>
|
|
</Border>
|
|
</Grid>
|
|
|
|
<!-- ToolBar -->
|
|
<Border Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="ToolBar" Classes="SectionTitle" />
|
|
<u:ToolBar Header="Actions">
|
|
<Button Content="Save" Classes="Small" />
|
|
<u:ToolBarSeparator />
|
|
<Button Content="Load" Classes="Small" />
|
|
<Button Content="Delete" Classes="Small" />
|
|
</u:ToolBar>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<!-- Pagination -->
|
|
<Border Classes="SectionCard">
|
|
<StackPanel Spacing="6">
|
|
<TextBlock Text="Pagination" Classes="SectionTitle" />
|
|
<u:Pagination
|
|
HorizontalAlignment="Center"
|
|
PageSizeOptions="10, 20, 50"
|
|
ShowPageSizeSelector="True"
|
|
TotalCount="500" />
|
|
</StackPanel>
|
|
</Border>
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
</UserControl> |