feat: use vertical navigation tab control.

This commit is contained in:
rabbitism 2023-02-09 22:21:36 +08:00
parent 321912a32e
commit e37f97042e
32 changed files with 152 additions and 96 deletions

View File

@ -11,10 +11,7 @@
<Design.DataContext>
<local:AutoCompleteBoxDemoViewModel />
</Design.DataContext>
<StackPanel
Margin="20"
HorizontalAlignment="Left"
Spacing="20">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<StackPanel.Styles>
<Style Selector="AutoCompleteBox">
<Setter Property="Width" Value="300" />

View File

@ -1,9 +1,13 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.BorderDemo" 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" d:DesignHeight="450"
d:DesignWidth="800" mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
x:Class="Semi.Avalonia.Demo.Pages.BorderDemo"
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"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Spacing="20">
<Border Theme="{StaticResource CardBorder}">
<TextBlock>Card</TextBlock>
</Border>

View File

@ -7,10 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel
Margin="20"
HorizontalAlignment="Left"
Spacing="20">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<TextBlock>Light (Default)</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary">Primary</Button>

View File

@ -7,10 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel
Margin="20"
HorizontalAlignment="Left"
Spacing="20">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<ButtonSpinner
Height="30"
AllowSpin="{Binding #allowSpinCheck.IsChecked}"

View File

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<CalendarDatePicker />
<CalendarDatePicker
Name="DatePicker2"

View File

@ -10,9 +10,4 @@ public partial class CalendarDatePickerDemo : UserControl
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}

View File

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<Calendar />
<Calendar SelectionMode="SingleRange" />
</StackPanel>

View File

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Margin="48" HorizontalAlignment="Left">
<StackPanel Spacing="20">
<CheckBox>Unchecked</CheckBox>
<CheckBox IsEnabled="False">Unchecked</CheckBox>
<CheckBox IsChecked="True">Checked</CheckBox>

View File

@ -8,7 +8,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel>
<StackPanel Spacing="20">
<StackPanel
VerticalAlignment="Top"
Orientation="Horizontal"

View File

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
<StackPanel Spacing="20">
<ComboBox Width="150">
<TextBlock>AAA</TextBlock>
<TextBlock>BBB</TextBlock>

View File

@ -10,9 +10,4 @@ public partial class ComboBoxDemo : UserControl
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}

View File

@ -8,7 +8,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<TabControl Grid.Row="2">
<TabControl>
<TabItem Header="DataGrid">
<DockPanel>
<CheckBox

View File

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
<StackPanel Spacing="20">
<DatePicker />
<DatePicker DayFormat="d (ddd)" YearVisible="False" />
<DatePicker IsEnabled="False" />

View File

@ -1,9 +1,13 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.ExpanderDemo" 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" d:DesignHeight="450"
d:DesignWidth="800" mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
x:Class="Semi.Avalonia.Demo.Pages.ExpanderDemo"
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"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Spacing="20">
<StackPanel>
<Expander Header="Expander 1">
<TextBlock Text="Hello Avalonia!" />
@ -17,13 +21,16 @@
</StackPanel>
<Grid ColumnDefinitions="* *">
<Expander
Height="200" ExpandDirection="Right"
Height="200"
ExpandDirection="Right"
Header="Right">
<TextBlock>Right Content</TextBlock>
</Expander>
<Expander
Grid.Column="1" Height="200"
HorizontalAlignment="Right" ExpandDirection="Left"
Grid.Column="1"
Height="200"
HorizontalAlignment="Right"
ExpandDirection="Left"
Header="Left">
<TextBlock>Left Content</TextBlock>
</Expander>

View File

@ -1,11 +1,16 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.LabelDemo" 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" d:DesignHeight="450"
d:DesignWidth="800" mc:Ignorable="d">
x:Class="Semi.Avalonia.Demo.Pages.LabelDemo"
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"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel
Width="500" Margin="20"
HorizontalAlignment="Left" Spacing="20">
Width="500"
HorizontalAlignment="Left"
Spacing="20">
<StackPanel.Styles>
<Style Selector="Label">
<Setter Property="Margin" Value="4" />

View File

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<ListBox Margin="20">
<ListBox>
<ListBoxItem>Item 1</ListBoxItem>
<ListBoxItem>Item 2</ListBoxItem>
<ListBoxItem IsEnabled="False">Item 3</ListBoxItem>

View File

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
<StackPanel Spacing="20">
<Menu>
<MenuItem Header="_First">
<MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
@ -97,7 +97,7 @@
<MenuItem Header="Menu Item that won't close on click" StaysOpenOnClick="True" />
</ContextMenu>
</Border.ContextMenu>
<TextBlock Text="Context Menu" />
<TextBlock Text="Right Click to show Context Menu" />
</Border>
<Border>
<Border.ContextFlyout>
@ -122,7 +122,7 @@
</MenuItem>
</MenuFlyout>
</Border.ContextFlyout>
<TextBlock Text="Context Flyout" />
<TextBlock Text="Right Click to show Context Flyout" />
</Border>
</StackPanel>
</UserControl>

View File

@ -7,10 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel
Margin="300,20,20,20"
HorizontalAlignment="Left"
Spacing="20">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<Button Click="InfoButton_OnClick" Content="Information" />
<Button Click="InfoButton_OnClick" Content="Success" />
<Button Click="InfoButton_OnClick" Content="Warning" />

View File

@ -7,10 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel
Margin="20"
HorizontalAlignment="Left"
Spacing="20">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<NumericUpDown
Width="200"
Maximum="100"

View File

@ -8,7 +8,7 @@
d:DesignWidth="800"
mc:Ignorable="d">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel Margin="10" Spacing="5">
<StackPanel Spacing="5">
<TextBlock
HorizontalAlignment="Center"
Classes="H4"

View File

@ -7,10 +7,7 @@
d:DesignHeight="800"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel
Margin="20"
HorizontalAlignment="Left"
Spacing="20">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<ProgressBar
Width="200"
Maximum="100"

View File

@ -1,10 +1,11 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo" 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" mc:Ignorable="d">
<StackPanel
Margin="20" HorizontalAlignment="Left"
Spacing="20">
x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo"
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"
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<TextBlock Text="Radio Buttons" />
<StackPanel>
<RadioButton>111</RadioButton>

View File

@ -7,10 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel
Margin="20"
HorizontalAlignment="Left"
Spacing="20">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<RefreshContainer Name="container">
<TextBlock Text="Content" />
</RefreshContainer>

View File

@ -1,11 +1,13 @@
<UserControl 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"
mc:Ignorable="d" d:DesignWidth="800"
d:DesignHeight="450"
x:Class="Semi.Avalonia.Demo.Pages.RepeatButtonDemo">
<StackPanel Margin="20" HorizontalAlignment="Left" Spacing="20">
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.RepeatButtonDemo"
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"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<TextBlock>Light (Default)</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<RepeatButton Classes="Primary">Primary</RepeatButton>
@ -22,7 +24,12 @@
<RepeatButton Classes="Tertiary" Theme="{DynamicResource SolidRepeatButton}">Tertiary</RepeatButton>
<RepeatButton Classes="Warning" Theme="{DynamicResource SolidRepeatButton}">Warning</RepeatButton>
<RepeatButton Classes="Danger" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
<RepeatButton Classes="Primary" IsEnabled="False" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
<RepeatButton
Classes="Primary"
IsEnabled="False"
Theme="{DynamicResource SolidRepeatButton}">
Danger
</RepeatButton>
</StackPanel>
<TextBlock>Borderless</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
@ -31,7 +38,12 @@
<RepeatButton Classes="Tertiary" Theme="{DynamicResource BorderlessRepeatButton}">Tertiary</RepeatButton>
<RepeatButton Classes="Warning" Theme="{DynamicResource BorderlessRepeatButton}">Warning</RepeatButton>
<RepeatButton Classes="Danger" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
<RepeatButton Classes="Primary" IsEnabled="False" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
<RepeatButton
Classes="Primary"
IsEnabled="False"
Theme="{DynamicResource BorderlessRepeatButton}">
Danger
</RepeatButton>
</StackPanel>
</StackPanel>
</UserControl>

View File

@ -7,10 +7,7 @@
d:DesignHeight="800"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel
Margin="20"
HorizontalAlignment="Left"
Spacing="20">
<StackPanel HorizontalAlignment="Left" Spacing="20">
<Slider
Width="300"
Maximum="100"

View File

@ -11,7 +11,6 @@
<Grid ColumnDefinitions="*,400">
<StackPanel
Grid.Column="1"
Margin="5"
Orientation="Vertical"
Spacing="4">
<ToggleButton

View File

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel>
<StackPanel Spacing="20">
<Border Theme="{StaticResource CardBorder}">
<TabControl TabStripPlacement="Top">
<TabItem Content="Hello 1" Header="Tab 1" />

View File

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
<StackPanel Spacing="20">
<TimePicker />
<TimePicker MinuteIncrement="15" />
<TimePicker ClockIdentifier="24HourClock" />

View File

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Margin="20">
<StackPanel>
<TextBlock Text="Toggle Button" />
<StackPanel Orientation="Horizontal" Spacing="20">
<ToggleButton>Primary</ToggleButton>

View File

@ -7,7 +7,7 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Margin="20" Spacing="20">
<StackPanel Spacing="20">
<ToggleSwitch
Content="Content"
OffContent="OffContent"

View File

@ -8,10 +8,19 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="TabMenu.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<TabControl
Margin="8"
Margin="8,20,0,20"
Padding="20,0,0,0"
HorizontalAlignment="Stretch"
TabStripPlacement="Left">
TabStripPlacement="Left"
Theme="{DynamicResource NavigationTab}">
<TabItem Header="Overview">
<pages:Overview />
</TabItem>

View File

@ -0,0 +1,53 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ControlTheme x:Key="NavigationTab" TargetType="TabControl">
<Setter Property="TabControl.Template">
<!-- -->
<ControlTemplate TargetType="TabControl">
<Border
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<DockPanel>
<Grid DockPanel.Dock="Left" RowDefinitions="Auto, *">
<TextBlock
Grid.Row="0"
Margin="8,0,8,8"
HorizontalAlignment="Center"
Classes="H5"
Text="Semi Avalonia Demo"
Theme="{DynamicResource TitleTextBlock}" />
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
<Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
<ItemsPresenter Name="PART_ItemsPresenter">
<ItemsPresenter.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ItemsPresenter.ItemsPanel>
</ItemsPresenter>
<Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
</Panel>
</ScrollViewer>
</Grid>
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding SelectedContent}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
</DockPanel>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
<Setter Property="Border.Width" Value="1" />
<Setter Property="Border.VerticalAlignment" Value="Stretch" />
<Setter Property="Border.HorizontalAlignment" Value="Left" />
</Style>
</ControlTheme>
</ResourceDictionary>