zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add header for demo.

Browse Source
This commit is contained in:
rabbitism 2023-02-10 00:34:48 +08:00
parent ee4a9c0e9a
commit 43db0c0293
5 changed files with 211 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
demo/Semi.Avalonia.Demo/Pages/Overview.axaml
View File

@ -9,18 +9,6 @@
mc:Ignorable="d">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel Spacing="5">
<TextBlock
HorizontalAlignment="Center"
Classes="H4"
Text="Welcome to Semi Avalonia"
Theme="{StaticResource TitleTextBlock}" />
<ToggleSwitch
Content="Switch Theme"
IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
OffContent="Dark"
OnContent="Default" />
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>

33
demo/Semi.Avalonia.Demo/Views/TabMenu.axaml → demo/Semi.Avalonia.Demo/Themes/TabMenu.axaml
View File

@ -12,27 +12,18 @@
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>
<ScrollViewer DockPanel.Dock="Left" 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>
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="{TemplateBinding Padding}"

33
demo/Semi.Avalonia.Demo/Themes/ToggleButton.axaml Normal file
View File

@ -0,0 +1,33 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ControlTheme x:Key="ThemeToggleButton" TargetType="ToggleButton">
<Setter Property="ToggleButton.Template">
<ControlTemplate TargetType="ToggleButton">
<Border
Name="Background"
Padding="8"
Background="{TemplateBinding Background}"
CornerRadius="3">
<PathIcon
Name="Icon"
Width="16"
Height="16"
Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
</Style>
<Style Selector="^:checked">
<Style Selector="^ /template/ PathIcon">
<Setter Property="PathIcon.Data" Value="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z" />
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>

272
demo/Semi.Avalonia.Demo/Views/MainView.axaml
View File

@ -11,126 +11,160 @@
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="TabMenu.axaml" />
<ResourceInclude Source="../Themes/TabMenu.axaml" />
<ResourceInclude Source="../Themes/ToggleButton.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<TabControl
Margin="8,20,0,20"
Padding="20,0,0,0"
HorizontalAlignment="Stretch"
TabStripPlacement="Left"
Theme="{DynamicResource NavigationTab}">
<TabItem Header="Overview">
<pages:Overview />
</TabItem>
<TabItem Header="AutoCompleteBox">
<pages:AutoCompleteBoxDemo />
</TabItem>
<TabItem Header="Border">
<pages:BorderDemo />
</TabItem>
<TabItem Header="Button">
<pages:ButtonDemo />
</TabItem>
<TabItem Header="ButtonSpinner">
<pages:ButtonSpinnerDemo />
</TabItem>
<TabItem Header="Calendar">
<pages:CalendarDemo />
</TabItem>
<TabItem Header="CalendarDatePicker">
<pages:CalendarDatePickerDemo />
</TabItem>
<TabItem Header="Carousel">
<pages:CarouselDemo />
</TabItem>
<TabItem Header="CheckBox">
<pages:CheckBoxDemo />
</TabItem>
<TabItem Header="ColorPicker">
<pages:ColorPickerDemo />
</TabItem>
<TabItem Header="ComboBox">
<pages:ComboBoxDemo />
</TabItem>
<TabItem Header="DataGrid">
<pages:DataGridDemo />
</TabItem>
<TabItem Header="DatePicker">
<pages:DatePickerDemo />
</TabItem>
<TabItem Header="Expander">
<pages:ExpanderDemo />
</TabItem>
<TabItem Header="Flyout">
<pages:FlyoutDemo />
</TabItem>
<TabItem Header="GridSplitter">
<pages:GridSplitter />
</TabItem>
<TabItem Header="Label">
<pages:LabelDemo />
</TabItem>
<TabItem Header="ListBox">
<pages:ListBoxDemo />
</TabItem>
<TabItem Header="ManagedFileChooser">
<pages:ManagedFileChooserDemo />
</TabItem>
<TabItem Header="Menu">
<pages:MenuDemo />
</TabItem>
<TabItem Header="Notification">
<pages:NotificationDemo />
</TabItem>
<TabItem Header="NumericUpDown">
<pages:NumericUpDownDemo />
</TabItem>
<TabItem Header="ProgressBar">
<pages:ProgressBarDemo />
</TabItem>
<TabItem Header="RadioButton">
<pages:RadioButtonDemo />
</TabItem>
<TabItem Header="RefreshContainer">
<pages:RefreshContainerDemo />
</TabItem>
<TabItem Header="RepeatButton">
<pages:RepeatButtonDemo />
</TabItem>
<TabItem Header="Slider">
<pages:SliderDemo />
</TabItem>
<TabItem Header="SplitView">
<pages:SplitViewDemo />
</TabItem>
<TabItem Header="TabControl">
<pages:TabControlDemo />
</TabItem>
<TabItem Header="TextBlock">
<pages:TextBlockDemo />
</TabItem>
<TabItem Header="TextBox">
<pages:TextBoxDemo />
</TabItem>
<TabItem Header="ThemeVariantScope">
<pages:ThemeVariantDemo />
</TabItem>
<TabItem Header="TimePicker">
<pages:TimePickerDemo />
</TabItem>
<TabItem Header="ToggleButton">
<pages:ToggleButtonDemo />
</TabItem>
<TabItem Header="ToggleSwitch">
<pages:ToggleSwitchDemo />
</TabItem>
<TabItem Header="ToolTip">
<pages:ToolTipDemo />
</TabItem>
<TabItem Header="TreeView">
<pages:TreeViewDemo />
</TabItem>
</TabControl>
<Grid RowDefinitions="Auto, *">
<Border
Margin="8"
Padding="12,4"
Theme="{DynamicResource CardBorder}">
<Grid VerticalAlignment="Center" ColumnDefinitions="*, Auto">
<StackPanel Grid.Column="0" Orientation="Horizontal">
<TextBlock
VerticalAlignment="Center"
Classes="H6"
Text="Semi Avalonia"
Theme="{DynamicResource TitleTextBlock}" />
<TextBlock
Margin="8,0"
VerticalAlignment="Center"
Text="/" />
<TextBlock
Margin="8,0"
VerticalAlignment="Center"
Classes="Secondary"
Text="{Binding #tab.SelectedItem.Header}" />
</StackPanel>
<ToggleButton
Grid.Column="1"
IsCheckedChanged="ToggleButton_OnIsCheckedChanged"
Theme="{DynamicResource ThemeToggleButton}" />
</Grid>
</Border>
<TabControl
Name="tab"
Grid.Row="1"
Margin="8"
Padding="20,0,0,0"
HorizontalAlignment="Stretch"
TabStripPlacement="Left"
Theme="{DynamicResource NavigationTab}">
<TabItem Header="Overview">
<pages:Overview />
</TabItem>
<TabItem Header="AutoCompleteBox">
<pages:AutoCompleteBoxDemo />
</TabItem>
<TabItem Header="Border">
<pages:BorderDemo />
</TabItem>
<TabItem Header="Button">
<pages:ButtonDemo />
</TabItem>
<TabItem Header="ButtonSpinner">
<pages:ButtonSpinnerDemo />
</TabItem>
<TabItem Header="Calendar">
<pages:CalendarDemo />
</TabItem>
<TabItem Header="CalendarDatePicker">
<pages:CalendarDatePickerDemo />
</TabItem>
<TabItem Header="Carousel">
<pages:CarouselDemo />
</TabItem>
<TabItem Header="CheckBox">
<pages:CheckBoxDemo />
</TabItem>
<TabItem Header="ColorPicker">
<pages:ColorPickerDemo />
</TabItem>
<TabItem Header="ComboBox">
<pages:ComboBoxDemo />
</TabItem>
<TabItem Header="DataGrid">
<pages:DataGridDemo />
</TabItem>
<TabItem Header="DatePicker">
<pages:DatePickerDemo />
</TabItem>
<TabItem Header="Expander">
<pages:ExpanderDemo />
</TabItem>
<TabItem Header="Flyout">
<pages:FlyoutDemo />
</TabItem>
<TabItem Header="GridSplitter">
<pages:GridSplitter />
</TabItem>
<TabItem Header="Label">
<pages:LabelDemo />
</TabItem>
<TabItem Header="ListBox">
<pages:ListBoxDemo />
</TabItem>
<TabItem Header="ManagedFileChooser">
<pages:ManagedFileChooserDemo />
</TabItem>
<TabItem Header="Menu">
<pages:MenuDemo />
</TabItem>
<TabItem Header="Notification">
<pages:NotificationDemo />
</TabItem>
<TabItem Header="NumericUpDown">
<pages:NumericUpDownDemo />
</TabItem>
<TabItem Header="ProgressBar">
<pages:ProgressBarDemo />
</TabItem>
<TabItem Header="RadioButton">
<pages:RadioButtonDemo />
</TabItem>
<TabItem Header="RefreshContainer">
<pages:RefreshContainerDemo />
</TabItem>
<TabItem Header="RepeatButton">
<pages:RepeatButtonDemo />
</TabItem>
<TabItem Header="Slider">
<pages:SliderDemo />
</TabItem>
<TabItem Header="SplitView">
<pages:SplitViewDemo />
</TabItem>
<TabItem Header="TabControl">
<pages:TabControlDemo />
</TabItem>
<TabItem Header="TextBlock">
<pages:TextBlockDemo />
</TabItem>
<TabItem Header="TextBox">
<pages:TextBoxDemo />
</TabItem>
<TabItem Header="ThemeVariantScope">
<pages:ThemeVariantDemo />
</TabItem>
<TabItem Header="TimePicker">
<pages:TimePickerDemo />
</TabItem>
<TabItem Header="ToggleButton">
<pages:ToggleButtonDemo />
</TabItem>
<TabItem Header="ToggleSwitch">
<pages:ToggleSwitchDemo />
</TabItem>
<TabItem Header="ToolTip">
<pages:ToolTipDemo />
</TabItem>
<TabItem Header="TreeView">
<pages:TreeViewDemo />
</TabItem>
</TabControl>
</Grid>
</UserControl>

13
demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs
View File

@ -1,4 +1,7 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Styling;
namespace Semi.Avalonia.Demo.Views;
@ -8,4 +11,14 @@ public partial class MainView : UserControl
{
InitializeComponent();
}
private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
{
var app = Application.Current;
if (app is not null)
{
var theme = app.ActualThemeVariant;
app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Default : ThemeVariant.Dark;
}
}
}