Browse Source
* ControlCatalog - Side bar improvements * adjust side bar icon to adapt with side bar size * update sidebar colors * add custom title bar decorations to control catalog * share view code between home page and section page * improve side bar selection state visual * drop custom search bar in title decorationspull/22015/merge
Emmanuel Hansen
1 week ago
committed by
GitHub
GitHub
23 changed files with 1324 additions and 511 deletions
@ -0,0 +1,103 @@ |
|||
using System.Windows.Input; |
|||
using Avalonia; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Controls.Primitives; |
|||
using Avalonia.Data; |
|||
|
|||
namespace ControlCatalog.Controls |
|||
{ |
|||
public class HomeItemExpander : Expander, ISelectable |
|||
{ |
|||
/// <summary>
|
|||
/// Defines the <see cref="Command"/> property.
|
|||
/// </summary>
|
|||
public static readonly StyledProperty<ICommand?> CommandProperty = |
|||
Button.CommandProperty.AddOwner<HomeItemExpander>(); |
|||
|
|||
/// <summary>
|
|||
/// Defines the <see cref="CommandParameter"/> property.
|
|||
/// </summary>
|
|||
public static readonly StyledProperty<object?> CommandParameterProperty = |
|||
Button.CommandParameterProperty.AddOwner<HomeItemExpander>(); |
|||
|
|||
/// <summary>
|
|||
/// Defines the <see cref="CanExpand"/> property.
|
|||
/// </summary>
|
|||
public static readonly StyledProperty<bool> CanExpandProperty = |
|||
AvaloniaProperty.Register<HomeItemExpander, bool>( |
|||
nameof(CanExpand), |
|||
defaultBindingMode: BindingMode.TwoWay); |
|||
|
|||
/// <summary>
|
|||
/// Defines the <see cref="CanExpand"/> property.
|
|||
/// </summary>
|
|||
public static readonly DirectProperty<HomeItemExpander, bool> IsEffectivelyExpandedProperty = |
|||
AvaloniaProperty.RegisterDirect<HomeItemExpander, bool>( |
|||
nameof(IsEffectivelyExpanded), |
|||
x => x.IsEffectivelyExpanded, |
|||
(x, o) => x.IsEffectivelyExpanded = o, |
|||
defaultBindingMode: BindingMode.TwoWay); |
|||
|
|||
/// <summary>
|
|||
/// Defines the <see cref="IsSelected"/> property.
|
|||
/// </summary>
|
|||
public static readonly StyledProperty<bool> IsSelectedProperty = |
|||
SelectingItemsControl.IsSelectedProperty.AddOwner<HomeItemExpander>(); |
|||
|
|||
/// <summary>
|
|||
/// Gets or sets an <see cref="ICommand"/> to be invoked when the button is clicked.
|
|||
/// </summary>
|
|||
public ICommand? Command |
|||
{ |
|||
get => GetValue(CommandProperty); |
|||
set => SetValue(CommandProperty, value); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Gets or sets a parameter to be passed to the <see cref="Command"/>.
|
|||
/// </summary>
|
|||
public object? CommandParameter |
|||
{ |
|||
get => GetValue(CommandParameterProperty); |
|||
set => SetValue(CommandParameterProperty, value); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Gets or sets a value indicating whether the <see cref="HomeItemExpander"/>
|
|||
/// content area is open and visible.
|
|||
/// </summary>
|
|||
public bool CanExpand |
|||
{ |
|||
get => GetValue(CanExpandProperty); |
|||
set => SetValue(CanExpandProperty, value); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Gets or sets the selection state of the item.
|
|||
/// </summary>
|
|||
public bool IsSelected |
|||
{ |
|||
get => GetValue(IsSelectedProperty); |
|||
set => SetValue(IsSelectedProperty, value); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Gets whether the <see cref="HomeItemExpander"/> is expanded
|
|||
/// </summary>
|
|||
public bool IsEffectivelyExpanded |
|||
{ |
|||
get => field; |
|||
private set => SetAndRaise(IsEffectivelyExpandedProperty, ref field, value); |
|||
} |
|||
|
|||
protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change) |
|||
{ |
|||
base.OnPropertyChanged(change); |
|||
|
|||
if (change.Property == CanExpandProperty || change.Property == IsExpandedProperty) |
|||
{ |
|||
IsEffectivelyExpanded = CanExpand && IsExpanded; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
<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" |
|||
xmlns:models="clr-namespace:ControlCatalog.Models" |
|||
xmlns:controlCatalog="using:ControlCatalog" |
|||
xmlns:viewModels="using:ControlCatalog.ViewModels" |
|||
x:DataType="models:HomeSection" |
|||
x:Class="ControlCatalog.Controls.SectionControl"> |
|||
<StackPanel Margin="0,0,0,26"> |
|||
<ItemsControl ItemsSource="{Binding Items}"> |
|||
<ItemsControl.ItemsPanel> |
|||
<ItemsPanelTemplate> |
|||
<UniformGrid RowSpacing="12" ColumnSpacing="12" |
|||
Margin="0, 0, 1, 0" |
|||
SizeChanged="UniformGrid_OnSizeChanged" /> |
|||
</ItemsPanelTemplate> |
|||
</ItemsControl.ItemsPanel> |
|||
<ItemsControl.ItemTemplate> |
|||
<DataTemplate DataType="models:PageItem"> |
|||
<Button Theme="{StaticResource ButtonCardTheme}" |
|||
Command="{Binding $parent[controlCatalog:MainView].((viewModels:MainWindowViewModel)DataContext).NavigateToPageCommand}" |
|||
CommandParameter="{Binding}"> |
|||
<StackPanel Spacing="10"> |
|||
<Border Background="{DynamicResource HomeBadgeBackground}" |
|||
CornerRadius="8" |
|||
Width="36" Height="36" |
|||
HorizontalAlignment="Left"> |
|||
<PathIcon Data="{Binding IconData}" |
|||
Foreground="{DynamicResource HomeBadgeForeground}" |
|||
Width="18" Height="18" |
|||
HorizontalAlignment="Center" |
|||
VerticalAlignment="Center" /> |
|||
</Border> |
|||
<StackPanel Spacing="3"> |
|||
<TextBlock Text="{Binding Header}" |
|||
FontSize="14" FontWeight="SemiBold" /> |
|||
<TextBlock Text="{Binding Description}" |
|||
FontSize="12" |
|||
Foreground="{DynamicResource HomeSubtleForeground}" |
|||
TextWrapping="Wrap" |
|||
TextTrimming="CharacterEllipsis" |
|||
MaxLines="2" /> |
|||
</StackPanel> |
|||
</StackPanel> |
|||
</Button> |
|||
</DataTemplate> |
|||
</ItemsControl.ItemTemplate> |
|||
</ItemsControl> |
|||
</StackPanel> |
|||
</UserControl> |
|||
@ -0,0 +1,25 @@ |
|||
using System; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Controls.Primitives; |
|||
|
|||
namespace ControlCatalog.Controls |
|||
{ |
|||
public partial class SectionControl : UserControl |
|||
{ |
|||
public SectionControl() |
|||
{ |
|||
InitializeComponent(); |
|||
} |
|||
|
|||
private void UniformGrid_OnSizeChanged(object? sender, SizeChangedEventArgs e) |
|||
{ |
|||
if (sender is not UniformGrid grid) |
|||
return; |
|||
|
|||
const int minItemWidth = 248; |
|||
grid.Columns = Math.Max( |
|||
1, |
|||
(int)((e.NewSize.Width + grid.ColumnSpacing) / (minItemWidth + grid.ColumnSpacing))); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,79 @@ |
|||
using System; |
|||
using Avalonia; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Controls.Metadata; |
|||
using Avalonia.Controls.Primitives; |
|||
using Avalonia.Data; |
|||
using Avalonia.Interactivity; |
|||
|
|||
namespace ControlCatalog.Controls |
|||
{ |
|||
[PseudoClasses(":selected")] |
|||
public class SelectableButton : ToggleButton, ISelectable |
|||
{ |
|||
/// <summary>
|
|||
/// Defines the <see cref="IsSelected"/> property.
|
|||
/// </summary>
|
|||
public static readonly StyledProperty<bool> IsSelectedProperty = |
|||
AvaloniaProperty.Register<SelectableButton, bool>(nameof(IsSelected), false, |
|||
defaultBindingMode: BindingMode.TwoWay); |
|||
|
|||
/// <summary>
|
|||
/// Defines the <see cref="IsSelectedChanged"/> event.
|
|||
/// </summary>
|
|||
public static readonly RoutedEvent<RoutedEventArgs> IsSelectedChangedEvent = |
|||
RoutedEvent.Register<SelectableButton, RoutedEventArgs>( |
|||
nameof(IsSelectedChanged), |
|||
RoutingStrategies.Bubble); |
|||
|
|||
public SelectableButton() |
|||
{ |
|||
UpdatePseudoClasses(IsSelected); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Gets or sets whether the <see cref="SelectableButton"/> is selected.
|
|||
/// </summary>
|
|||
public bool IsSelected |
|||
{ |
|||
get => GetValue(IsSelectedProperty); |
|||
set => SetValue(IsSelectedProperty, value); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Raised when the <see cref="IsSelected"/> property value changes.
|
|||
/// </summary>
|
|||
public event EventHandler<RoutedEventArgs>? IsSelectedChanged |
|||
{ |
|||
add => AddHandler(IsSelectedChangedEvent, value); |
|||
remove => RemoveHandler(IsSelectedChangedEvent, value); |
|||
} |
|||
|
|||
/// <inheritdoc/>
|
|||
protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change) |
|||
{ |
|||
base.OnPropertyChanged(change); |
|||
|
|||
if (change.Property == IsSelectedProperty) |
|||
{ |
|||
var newValue = change.GetNewValue<bool>(); |
|||
UpdatePseudoClasses(newValue); |
|||
OnIsSelectedChanged(new RoutedEventArgs(IsSelectedChangedEvent)); |
|||
} |
|||
} |
|||
|
|||
private void UpdatePseudoClasses(bool isSelected) |
|||
{ |
|||
PseudoClasses.Set(":selected", isSelected); |
|||
} |
|||
|
|||
/// <summary>
|
|||
/// Called when <see cref="IsSelected"/> changes.
|
|||
/// </summary>
|
|||
/// <param name="e">Event arguments for the routed event that is raised by the default implementation of this method.</param>
|
|||
protected virtual void OnIsSelectedChanged(RoutedEventArgs e) |
|||
{ |
|||
RaiseEvent(e); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,359 @@ |
|||
<ResourceDictionary xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:controls="using:ControlCatalog.Controls"> |
|||
<ResourceDictionary.ThemeDictionaries> |
|||
<ResourceDictionary x:Key="Dark"> |
|||
<Color x:Key="HamburgerBaseHighColor">#99FFFFFF</Color> |
|||
<Color x:Key="HamburgerChromeMediumColor">#FF1F1F1F</Color> |
|||
<Color x:Key="HamburgerAltHighColor">#FF000000</Color> |
|||
<Color x:Key="HamburgerChromeLowColor">#FF171717</Color> |
|||
<SolidColorBrush x:Key="HomeCardBackground" Color="#2B2B33" /> |
|||
<SolidColorBrush x:Key="HomeCardBorderBrush" Color="#3A3A45" /> |
|||
<SolidColorBrush x:Key="HomeCardBorderBrushHover" Color="#8AB4FF" /> |
|||
<SolidColorBrush x:Key="HomeSubtleForeground" Color="#9C9CAB" /> |
|||
<SolidColorBrush x:Key="HomeBadgeBackground" Color="#31395A" /> |
|||
<SolidColorBrush x:Key="HomeBadgeForeground" Color="#8AB4FF" /> |
|||
</ResourceDictionary> |
|||
<ResourceDictionary x:Key="Default"> |
|||
<Color x:Key="HamburgerBaseHighColor">#99000000</Color> |
|||
<Color x:Key="HamburgerChromeMediumColor">#FFE6E6E6</Color> |
|||
<Color x:Key="HamburgerAltHighColor">#FFFFFFFF</Color> |
|||
<Color x:Key="HamburgerChromeLowColor">#FFF2F2F2</Color> |
|||
<SolidColorBrush x:Key="HomeCardBackground" Color="#FFFFFF" /> |
|||
<SolidColorBrush x:Key="HomeCardBorderBrush" Color="#E5E5EA" /> |
|||
<SolidColorBrush x:Key="HomeCardBorderBrushHover" Color="#3E6DF3" /> |
|||
<SolidColorBrush x:Key="HomeSubtleForeground" Color="#64646E" /> |
|||
<SolidColorBrush x:Key="HomeBadgeBackground" Color="#E8EFFD" /> |
|||
<SolidColorBrush x:Key="HomeBadgeForeground" Color="#3462D9" /> |
|||
</ResourceDictionary> |
|||
</ResourceDictionary.ThemeDictionaries> |
|||
|
|||
<ControlTheme x:Key="ButtonCardTheme" TargetType="Button"> |
|||
<Setter Property="HorizontalAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalAlignment" Value="Stretch" /> |
|||
<Setter Property="Background" Value="{DynamicResource HomeCardBackground}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource HomeCardBorderBrush}" /> |
|||
<Setter Property="BorderThickness" Value="1" /> |
|||
<Setter Property="CornerRadius" Value="10" /> |
|||
<Setter Property="Padding" Value="16, 14" /> |
|||
<Setter Property="MinHeight" Value="118" /> |
|||
<Setter Property="Cursor" Value="Hand" /> |
|||
|
|||
<Style Selector="^ /template/ ContentPresenter"> |
|||
<Setter Property="BoxShadow" Value="0 1 3 0 #0D000000" /> |
|||
<Setter Property="Transitions"> |
|||
<Transitions> |
|||
<BrushTransition Property="BorderBrush" Duration="0:0:0.1" /> |
|||
</Transitions> |
|||
</Setter> |
|||
</Style> |
|||
|
|||
<Style Selector="^:pointerover /template/ ContentPresenter"> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource HomeCardBorderBrushHover}" /> |
|||
</Style> |
|||
|
|||
</ControlTheme> |
|||
|
|||
<x:Double x:Key="NavigationItemHeight">36</x:Double> |
|||
<BoxShadows x:Key="NavigationItemShadow">1 1 1 1 #2000, 0 0 1 1 #2fff</BoxShadows> |
|||
<Thickness x:Key="NavigationItemPadding">8,0,4,0</Thickness> |
|||
<Thickness x:Key="NavigationItemSelectionPillMargin">2,0,0,0</Thickness> |
|||
<x:Double x:Key="SelectionPipeHeight">12</x:Double> |
|||
|
|||
<ControlTheme x:Key="ScrollPage" TargetType="ContentPage"> |
|||
<Setter Property="Background" Value="{DynamicResource PageBackgroundColor}"/> |
|||
<Setter Property="CornerRadius" Value="20,0,0,0"/> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
Background="{TemplateBinding Background}" |
|||
CornerRadius="{TemplateBinding CornerRadius}"> |
|||
<DockPanel> |
|||
<ContentPresenter Name="PART_TopCommandBar" |
|||
DockPanel.Dock="Top" |
|||
HorizontalContentAlignment="Stretch" |
|||
IsVisible="False" /> |
|||
<ContentPresenter Name="PART_BottomCommandBar" |
|||
DockPanel.Dock="Bottom" |
|||
HorizontalContentAlignment="Stretch" |
|||
IsVisible="False" /> |
|||
|
|||
<ScrollViewer Padding="20" |
|||
HorizontalScrollBarVisibility="Disabled"> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Content="{TemplateBinding Content}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
CornerRadius="{TemplateBinding CornerRadius}" /> |
|||
</ScrollViewer> |
|||
</DockPanel> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</ControlTheme> |
|||
<ControlTheme x:Key="NavHeaderItem" TargetType="ListBoxItem"> |
|||
<Setter Property="HorizontalContentAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalContentAlignment" Value="Center" /> |
|||
<Setter Property="HorizontalAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalAlignment" Value="Stretch" /> |
|||
<Setter Property="Background" Value="Transparent" /> |
|||
<Setter Property="Height" Value="{StaticResource NavigationItemHeight}" /> |
|||
<Setter Property="Padding" Value="{DynamicResource NavigationItemPadding}" /> |
|||
<Setter Property="Margin" Value="4,2,8,0" /> |
|||
<Setter Property="CornerRadius" Value="8" /> |
|||
<Setter Property="ClipToBounds" Value="False" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Name="PART_LayoutRoot" |
|||
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
CornerRadius="{TemplateBinding CornerRadius}"> |
|||
<Panel> |
|||
<Border Name="PART_SelectedPipe" |
|||
Width="{DynamicResource TabItemPipeThickness}" |
|||
Height="{DynamicResource SelectionPipeHeight}" |
|||
Margin="{DynamicResource NavigationItemSelectionPillMargin}" |
|||
HorizontalAlignment="Left" |
|||
VerticalAlignment="Center" |
|||
Background="{DynamicResource TabItemHeaderSelectedPipeFill}" |
|||
IsVisible="False" |
|||
CornerRadius="4"/> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
Padding="{TemplateBinding Padding}" |
|||
Margin="0" |
|||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Content="{TemplateBinding Content}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
TextElement.FontFamily="{TemplateBinding FontFamily}" |
|||
TextElement.FontSize="{TemplateBinding FontSize}" |
|||
TextElement.FontWeight="{TemplateBinding FontWeight}" /> |
|||
</Panel> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
|
|||
<Style Selector="^:pointerover, ^:selected"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/> |
|||
|
|||
<Style Selector="^ /template/ Border#PART_LayoutRoot"> |
|||
<Setter Property="Background" Value="{DynamicResource HamburgerChromeLowColor}" /> |
|||
<Setter Property="BoxShadow" Value="{StaticResource NavigationItemShadow}" /> |
|||
<Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" /> |
|||
</Style> |
|||
</Style> |
|||
|
|||
<Style Selector="^:selected"> |
|||
<Style Selector="^ /template/ Border#PART_SelectedPipe"> |
|||
<Setter Property="IsVisible" Value="True" /> |
|||
</Style> |
|||
</Style> |
|||
|
|||
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot"> |
|||
<Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" /> |
|||
<Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" /> |
|||
<Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" /> |
|||
</Style> |
|||
</ControlTheme> |
|||
<ControlTheme x:Key="SelectableItemButton" TargetType="controls:SelectableButton"> |
|||
<Setter Property="HorizontalContentAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalContentAlignment" Value="Center" /> |
|||
<Setter Property="HorizontalAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalAlignment" Value="Stretch" /> |
|||
<Setter Property="Background" Value="Transparent" /> |
|||
<Setter Property="Height" Value="{StaticResource NavigationItemHeight}" /> |
|||
<Setter Property="Padding" Value="{DynamicResource NavigationItemPadding}" /> |
|||
<Setter Property="CornerRadius" Value="8" /> |
|||
<Setter Property="ClipToBounds" Value="False" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Name="PART_LayoutRoot" |
|||
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
CornerRadius="{TemplateBinding CornerRadius}"> |
|||
<Panel> |
|||
<Border Name="PART_SelectedPipe" |
|||
Width="{DynamicResource TabItemPipeThickness}" |
|||
Height="{DynamicResource SelectionPipeHeight}" |
|||
Margin="{DynamicResource NavigationItemSelectionPillMargin}" |
|||
HorizontalAlignment="Left" |
|||
VerticalAlignment="Center" |
|||
Background="{DynamicResource TabItemHeaderSelectedPipeFill}" |
|||
IsVisible="False" |
|||
CornerRadius="4"/> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
Padding="{TemplateBinding Padding}" |
|||
Margin="0" |
|||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Content="{TemplateBinding Content}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
TextElement.FontFamily="{TemplateBinding FontFamily}" |
|||
TextElement.FontSize="{TemplateBinding FontSize}" |
|||
TextElement.FontWeight="{TemplateBinding FontWeight}" /> |
|||
</Panel> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
|
|||
<Style Selector="^:pointerover, ^:selected"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/> |
|||
|
|||
<Style Selector="^ /template/ Border#PART_LayoutRoot"> |
|||
<Setter Property="Background" Value="{DynamicResource HamburgerChromeLowColor}" /> |
|||
<Setter Property="BoxShadow" Value="{StaticResource NavigationItemShadow}" /> |
|||
</Style> |
|||
</Style> |
|||
|
|||
<Style Selector="^:selected"> |
|||
<Style Selector="^ /template/ Border#PART_SelectedPipe"> |
|||
<Setter Property="IsVisible" Value="True" /> |
|||
</Style> |
|||
</Style> |
|||
|
|||
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot"> |
|||
<Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" /> |
|||
<Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" /> |
|||
<Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" /> |
|||
</Style> |
|||
</ControlTheme> |
|||
|
|||
<ControlTheme x:Key="ExpanderToggleButton" TargetType="ToggleButton"> |
|||
<Setter Property="HorizontalContentAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalContentAlignment" Value="Center" /> |
|||
<Setter Property="HorizontalAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalAlignment" Value="Stretch" /> |
|||
<Setter Property="Background" Value="Transparent" /> |
|||
<Setter Property="Height" Value="{StaticResource NavigationItemHeight}" /> |
|||
<Setter Property="Padding" Value="{DynamicResource NavigationItemPadding}" /> |
|||
<Setter Property="CornerRadius" Value="8" /> |
|||
<Setter Property="ClipToBounds" Value="False" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Name="PART_LayoutRoot" |
|||
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
CornerRadius="{TemplateBinding CornerRadius}"> |
|||
<Panel> |
|||
<Border Name="PART_SelectedPipe" |
|||
Width="{DynamicResource TabItemPipeThickness}" |
|||
Height="{DynamicResource SelectionPipeHeight}" |
|||
Margin="{DynamicResource NavigationItemSelectionPillMargin}" |
|||
HorizontalAlignment="Left" |
|||
VerticalAlignment="Center" |
|||
Background="{DynamicResource TabItemHeaderSelectedPipeFill}" |
|||
IsVisible="False" |
|||
CornerRadius="4"/> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
Padding="{TemplateBinding Padding}" |
|||
Margin="0" |
|||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Content="{TemplateBinding Content}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
TextElement.FontFamily="{TemplateBinding FontFamily}" |
|||
TextElement.FontSize="{TemplateBinding FontSize}" |
|||
TextElement.FontWeight="{TemplateBinding FontWeight}" /> |
|||
</Panel> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
|
|||
<Style Selector="^:pointerover, ^:selected"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/> |
|||
|
|||
<Style Selector="^ /template/ Border#PART_LayoutRoot"> |
|||
<Setter Property="Background" Value="{DynamicResource HamburgerChromeLowColor}" /> |
|||
<Setter Property="BoxShadow" Value="{StaticResource NavigationItemShadow}" /> |
|||
</Style> |
|||
</Style> |
|||
|
|||
<Style Selector="^:checked"> |
|||
<Style Selector="^ /template/ Border#PART_SelectedPipe"> |
|||
<Setter Property="IsVisible" Value="True" /> |
|||
</Style> |
|||
</Style> |
|||
|
|||
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot"> |
|||
<Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" /> |
|||
<Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" /> |
|||
<Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" /> |
|||
</Style> |
|||
</ControlTheme> |
|||
<ControlTheme x:Key="HomeSectionExpander" TargetType="controls:HomeItemExpander"> |
|||
<Setter Property="IsTabStop" Value="False"/> |
|||
<Setter Property="HorizontalContentAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalContentAlignment" Value="Center" /> |
|||
<Setter Property="HorizontalAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalAlignment" Value="Stretch" /> |
|||
<Setter Property="Background" Value="Transparent" /> |
|||
<Setter Property="MinHeight" Value="{StaticResource NavigationItemHeight}" /> |
|||
<Setter Property="Padding" Value="{DynamicResource NavigationItemPadding}" /> |
|||
<Setter Property="CornerRadius" Value="8" /> |
|||
<Setter Property="ClipToBounds" Value="False" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Name="PART_LayoutRoot" |
|||
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
CornerRadius="{TemplateBinding CornerRadius}"> |
|||
<Grid RowDefinitions="Auto,*"> |
|||
<controls:SelectableButton x:Name="ExpanderHeader" |
|||
HorizontalAlignment="Stretch" |
|||
MinHeight="{TemplateBinding MinHeight}" |
|||
CornerRadius="{TemplateBinding CornerRadius}" |
|||
IsEnabled="{TemplateBinding IsEnabled}" |
|||
Content="{TemplateBinding Header}" |
|||
Command="{TemplateBinding Command}" |
|||
CommandParameter="{TemplateBinding CommandParameter}" |
|||
Theme="{StaticResource SelectableItemButton}" |
|||
Background="{TemplateBinding Background}" |
|||
IsSelected="{TemplateBinding IsSelected}" |
|||
IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" |
|||
ContentTemplate="{TemplateBinding HeaderTemplate}" > |
|||
</controls:SelectableButton> |
|||
<Border x:Name="ExpanderContent" |
|||
Grid.Row="1" |
|||
IsVisible="{TemplateBinding IsEffectivelyExpanded, Mode=TwoWay}" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
MinHeight="{TemplateBinding MinHeight}" |
|||
HorizontalAlignment="Stretch" |
|||
VerticalAlignment="Stretch" |
|||
Padding="{TemplateBinding Padding}"> |
|||
<ContentPresenter x:Name="PART_ContentPresenter" |
|||
Content="{TemplateBinding Content}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
Foreground="{TemplateBinding Foreground}" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" /> |
|||
</Border> |
|||
</Grid> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
|
|||
<Style Selector="^:pointerover"> |
|||
<Style Selector="^ /template/ controls|SelectableButton#ExpanderHeader"> |
|||
<Setter Property="Background" Value="{DynamicResource HamburgerChromeLowColor}" /> |
|||
</Style> |
|||
</Style> |
|||
|
|||
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot"> |
|||
<Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" /> |
|||
<Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" /> |
|||
<Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" /> |
|||
</Style> |
|||
</ControlTheme> |
|||
</ResourceDictionary> |
|||
@ -1,10 +1,30 @@ |
|||
using System.Collections.Generic; |
|||
using ControlCatalog.ViewModels; |
|||
using System.Linq; |
|||
using Avalonia.Media; |
|||
using ControlCatalog.Pages; |
|||
using MiniMvvm; |
|||
|
|||
namespace ControlCatalog.Models; |
|||
|
|||
public class HomeSection(string title, IReadOnlyList<PageItem> items) |
|||
public class HomeSection : ViewModelBase |
|||
{ |
|||
public string Title { get; } = title; |
|||
public IReadOnlyList<PageItem> Items { get; } = items; |
|||
public string Title { get; } |
|||
public StreamGeometry IconData { get; } |
|||
public IReadOnlyList<PageItem>? Items { get; set; } |
|||
|
|||
public bool IsSectionVisible => Items?.Any(x => x.IsVisible) == true; |
|||
|
|||
public PageItem PageItem { get; } |
|||
|
|||
public HomeSection(string title, StreamGeometry iconData) |
|||
{ |
|||
Title = title; |
|||
IconData = iconData; |
|||
PageItem = new PageItem(title, () => new SectionPage(this), iconData, "", null); |
|||
} |
|||
|
|||
public void RaiseSectionVisibilityChanged() |
|||
{ |
|||
RaisePropertyChanged(nameof(IsSectionVisible)); |
|||
} |
|||
} |
|||
|
|||
@ -1,101 +0,0 @@ |
|||
<ResourceDictionary xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:controls="using:ControlCatalog"> |
|||
|
|||
|
|||
<ResourceDictionary.ThemeDictionaries> |
|||
<ResourceDictionary x:Key="Dark"> |
|||
<Color x:Key="HamburgerBaseHighColor">#99FFFFFF</Color> |
|||
<Color x:Key="HamburgerChromeMediumColor">#FF1F1F1F</Color> |
|||
<Color x:Key="HamburgerAltHighColor">#FF000000</Color> |
|||
<Color x:Key="HamburgerChromeLowColor">#FF171717</Color> |
|||
</ResourceDictionary> |
|||
<ResourceDictionary x:Key="Default"> |
|||
<Color x:Key="HamburgerBaseHighColor">#99000000</Color> |
|||
<Color x:Key="HamburgerChromeMediumColor">#FFE6E6E6</Color> |
|||
<Color x:Key="HamburgerAltHighColor">#FFFFFFFF</Color> |
|||
<Color x:Key="HamburgerChromeLowColor">#FFF2F2F2</Color> |
|||
</ResourceDictionary> |
|||
</ResourceDictionary.ThemeDictionaries> |
|||
<x:Double x:Key="NavigationItemHeight">36</x:Double> |
|||
<BoxShadows x:Key="NavigationItemShadow">1 1 1 1 #2000, 0 0 1 1 #2fff</BoxShadows> |
|||
<Design.PreviewWith> |
|||
<Border Padding="0"> |
|||
<ListBox ItemContainerTheme="{StaticResource NavHeaderItem}"> |
|||
<ListBoxItem IsEnabled="False">Disabled</ListBoxItem> |
|||
<ListBoxItem> |
|||
Test |
|||
</ListBoxItem> |
|||
<ListBoxItem>Test</ListBoxItem> |
|||
</ListBox> |
|||
</Border> |
|||
</Design.PreviewWith> |
|||
<ControlTheme x:Key="NavHeaderItem" TargetType="ListBoxItem"> |
|||
<Setter Property="HorizontalContentAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalContentAlignment" Value="Center" /> |
|||
<Setter Property="HorizontalAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalAlignment" Value="Stretch" /> |
|||
<Setter Property="Background" Value="Transparent" /> |
|||
<Setter Property="Height" Value="{StaticResource NavigationItemHeight}" /> |
|||
<Setter Property="Padding" Value="14,0,4,0" /> |
|||
<Setter Property="Margin" Value="4,2,8,0" /> |
|||
<Setter Property="CornerRadius" Value="8" /> |
|||
<Setter Property="ClipToBounds" Value="False" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Name="PART_LayoutRoot" |
|||
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
CornerRadius="{TemplateBinding CornerRadius}"> |
|||
<Panel> |
|||
<Border Name="PART_SelectedPipe" |
|||
Width="{DynamicResource TabItemPipeThickness}" |
|||
Height="{DynamicResource TabItemVerticalPipeHeight}" |
|||
Margin="6,0,0,0" |
|||
HorizontalAlignment="Left" |
|||
VerticalAlignment="Center" |
|||
Background="{DynamicResource TabItemHeaderSelectedPipeFill}" |
|||
IsVisible="False" |
|||
CornerRadius="4"/> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
Padding="{TemplateBinding Padding}" |
|||
Margin="0" |
|||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Content="{TemplateBinding Content}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
TextElement.FontFamily="{TemplateBinding FontFamily}" |
|||
TextElement.FontSize="{TemplateBinding FontSize}" |
|||
TextElement.FontWeight="{TemplateBinding FontWeight}" /> |
|||
</Panel> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
|
|||
<Style Selector="^:pointerover"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/> |
|||
|
|||
<Style Selector="^ /template/ Border#PART_LayoutRoot"> |
|||
<Setter Property="Background" Value="{DynamicResource HamburgerChromeLowColor}" /> |
|||
<Setter Property="BoxShadow" Value="{StaticResource NavigationItemShadow}" /> |
|||
<Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" /> |
|||
</Style> |
|||
</Style> |
|||
|
|||
<Style Selector="^:selected"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/> |
|||
|
|||
<Style Selector="^ /template/ Border#PART_SelectedPipe"> |
|||
<Setter Property="IsVisible" Value="True" /> |
|||
</Style> |
|||
</Style> |
|||
|
|||
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot"> |
|||
<Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" /> |
|||
<Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" /> |
|||
<Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" /> |
|||
</Style> |
|||
</ControlTheme> |
|||
</ResourceDictionary> |
|||
@ -0,0 +1,15 @@ |
|||
<ContentPage Theme="{StaticResource ScrollPage}" |
|||
xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:controls="using:ControlCatalog.Controls" |
|||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
|||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
|||
xmlns:viewModels="using:ControlCatalog.ViewModels" |
|||
mc:Ignorable="d" |
|||
d:DesignWidth="800" |
|||
d:DesignHeight="450" |
|||
Header="{Binding HomeSection.Title}" |
|||
x:DataType="viewModels:SectionViewModel" |
|||
x:Class="ControlCatalog.Pages.SectionPage"> |
|||
<controls:SectionControl DataContext="{Binding HomeSection}" /> |
|||
</ContentPage> |
|||
@ -0,0 +1,23 @@ |
|||
using System; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Controls.Primitives; |
|||
using ControlCatalog.Models; |
|||
using ControlCatalog.ViewModels; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class SectionPage : ContentPage |
|||
{ |
|||
public SectionPage(HomeSection homeSection) |
|||
{ |
|||
InitializeComponent(); |
|||
|
|||
DataContext = new SectionViewModel(homeSection); |
|||
} |
|||
|
|||
public SectionPage() |
|||
{ |
|||
InitializeComponent(); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,150 @@ |
|||
<ContentPage Theme="{StaticResource ScrollPage}" 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" |
|||
xmlns:local="using:ControlCatalog" |
|||
xmlns:models="using:ControlCatalog.Models" |
|||
Header="Settings" |
|||
Margin="20" |
|||
xmlns:viewModels="using:ControlCatalog.ViewModels" |
|||
x:DataType="viewModels:SettingsViewModel" |
|||
x:Class="ControlCatalog.Pages.SettingsPage"> |
|||
<ContentPage.Resources> |
|||
<ResourceDictionary> |
|||
<ResourceDictionary.ThemeDictionaries> |
|||
<ResourceDictionary x:Key="Default"> |
|||
<SolidColorBrush x:Key="CardBackground" Color="#FFFFFF" /> |
|||
<SolidColorBrush x:Key="CardBorderBrush" Color="#E5E5EA" /> |
|||
<SolidColorBrush x:Key="CardBorderBrushHover" Color="#3E6DF3" /> |
|||
<SolidColorBrush x:Key="SubtleForeground" Color="#64646E" /> |
|||
<SolidColorBrush x:Key="BadgeBackground" Color="#E8EFFD" /> |
|||
<SolidColorBrush x:Key="BadgeForeground" Color="#3462D9" /> |
|||
</ResourceDictionary> |
|||
<ResourceDictionary x:Key="Dark"> |
|||
<SolidColorBrush x:Key="CardBackground" Color="#2B2B33" /> |
|||
<SolidColorBrush x:Key="CardBorderBrush" Color="#3A3A45" /> |
|||
<SolidColorBrush x:Key="CardBorderBrushHover" Color="#8AB4FF" /> |
|||
<SolidColorBrush x:Key="SubtleForeground" Color="#9C9CAB" /> |
|||
<SolidColorBrush x:Key="BadgeBackground" Color="#31395A" /> |
|||
<SolidColorBrush x:Key="BadgeForeground" Color="#8AB4FF" /> |
|||
</ResourceDictionary> |
|||
</ResourceDictionary.ThemeDictionaries> |
|||
</ResourceDictionary> |
|||
</ContentPage.Resources> |
|||
<ContentPage.Styles> |
|||
<Style Selector="ComboBox"> |
|||
<Setter Property="MinWidth">200</Setter> |
|||
</Style> |
|||
<Style Selector="Border.card"> |
|||
<Setter Property="Background" Value="{DynamicResource CardBackground}"/> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource CardBorderBrush}" /> |
|||
<Setter Property="BorderThickness" Value="1"/> |
|||
<Setter Property="Padding" Value="10"/> |
|||
<Setter Property="CornerRadius" Value="10"/> |
|||
</Style> |
|||
<Style Selector="Border.card Label"> |
|||
<Setter Property="VerticalAlignment" Value="Center"/> |
|||
</Style> |
|||
</ContentPage.Styles> |
|||
<StackPanel Orientation="Vertical" Spacing="10"> |
|||
<Border Classes="card"> |
|||
|
|||
<Grid ColumnSpacing="10" ColumnDefinitions="*,Auto"> |
|||
<Label>Window Decorations</Label> |
|||
<ComboBox x:Name="Decorations" |
|||
Grid.Column="1" |
|||
HorizontalAlignment="Stretch" |
|||
SelectedIndex="{Binding SelectedDecorationIndex}" |
|||
SelectionChanged="Decorations_SelectionChanged" |
|||
ToolTip.Tip="System Decorations"> |
|||
<ComboBox.Items> |
|||
<WindowDecorations>None</WindowDecorations> |
|||
<WindowDecorations>BorderOnly</WindowDecorations> |
|||
<WindowDecorations>Full</WindowDecorations> |
|||
</ComboBox.Items> |
|||
</ComboBox> |
|||
</Grid> |
|||
</Border> |
|||
|
|||
<Border Classes="card"> |
|||
<Grid ColumnSpacing="10" ColumnDefinitions="*,Auto"> |
|||
<Label>Theme</Label> |
|||
<ComboBox HorizontalAlignment="Stretch" |
|||
Grid.Column="1" |
|||
SelectedItem="{x:Static local:App.CurrentTheme}" |
|||
SelectionChanged="Themes_SelectionChanged" |
|||
ToolTip.Tip="Catalog Theme"> |
|||
<ComboBox.Items> |
|||
<models:CatalogTheme>Fluent</models:CatalogTheme> |
|||
<models:CatalogTheme>Simple</models:CatalogTheme> |
|||
</ComboBox.Items> |
|||
</ComboBox> |
|||
</Grid> |
|||
</Border> |
|||
|
|||
<Border Classes="card"> |
|||
<Grid ColumnSpacing="10" ColumnDefinitions="*,Auto"> |
|||
<Label>Theme Variant</Label> |
|||
<ComboBox HorizontalAlignment="Stretch" |
|||
Grid.Column="1" |
|||
DisplayMemberBinding="{Binding Key, x:DataType=ThemeVariant}" |
|||
SelectedIndex="{Binding SelectedThemeVariantIndex}" |
|||
SelectionChanged="ThemeVariants_SelectionChanged" |
|||
ToolTip.Tip="Theme Variant"> |
|||
<ComboBox.Items> |
|||
<ThemeVariant>Default</ThemeVariant> |
|||
<ThemeVariant>Light</ThemeVariant> |
|||
<ThemeVariant>Dark</ThemeVariant> |
|||
</ComboBox.Items> |
|||
</ComboBox> |
|||
</Grid> |
|||
</Border> |
|||
|
|||
<Border Classes="card"> |
|||
<Grid ColumnSpacing="10" ColumnDefinitions="*,Auto"> |
|||
<Label>Window Transparency</Label> |
|||
<ComboBox HorizontalAlignment="Stretch" |
|||
Grid.Column="1" |
|||
SelectedIndex="{Binding SelectedTransparencyLevelIndex}" |
|||
SelectionChanged="TransparencyLevels_SelectionChanged" |
|||
ToolTip.Tip="Window Transparency Level"> |
|||
<ComboBox.Items> |
|||
<WindowTransparencyLevel>None</WindowTransparencyLevel> |
|||
<WindowTransparencyLevel>Transparent</WindowTransparencyLevel> |
|||
<WindowTransparencyLevel>Blur</WindowTransparencyLevel> |
|||
<WindowTransparencyLevel>AcrylicBlur</WindowTransparencyLevel> |
|||
<WindowTransparencyLevel>Mica</WindowTransparencyLevel> |
|||
</ComboBox.Items> |
|||
</ComboBox> |
|||
</Grid> |
|||
</Border> |
|||
|
|||
<Border Classes="card"> |
|||
<Grid ColumnSpacing="10" ColumnDefinitions="*,Auto"> |
|||
<Label>Flow Direction</Label> |
|||
<ComboBox HorizontalAlignment="Stretch" |
|||
Grid.Column="1" |
|||
SelectedIndex="{Binding SelectedFlowDirectionIndex}" |
|||
SelectionChanged="FlowDirection_SelectionChanged" |
|||
ToolTip.Tip="Flow Direction"> |
|||
<ComboBox.Items> |
|||
<FlowDirection>LeftToRight</FlowDirection> |
|||
<FlowDirection>RightToLeft</FlowDirection> |
|||
</ComboBox.Items> |
|||
</ComboBox> |
|||
</Grid> |
|||
</Border> |
|||
|
|||
<Border Classes="card"> |
|||
<Grid ColumnSpacing="10" ColumnDefinitions="*,Auto"> |
|||
<Label>Window State</Label> |
|||
<ComboBox HorizontalAlignment="Stretch" |
|||
Grid.Column="1" |
|||
ItemsSource="{Binding WindowStates}" |
|||
SelectedItem="{Binding WindowState}" |
|||
ToolTip.Tip="Window State"/> |
|||
</Grid> |
|||
</Border> |
|||
</StackPanel> |
|||
</ContentPage> |
|||
@ -0,0 +1,93 @@ |
|||
using Avalonia; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Media; |
|||
using Avalonia.Media.Immutable; |
|||
using Avalonia.Styling; |
|||
using ControlCatalog.Models; |
|||
using ControlCatalog.ViewModels; |
|||
|
|||
namespace ControlCatalog.Pages |
|||
{ |
|||
public partial class SettingsPage : ContentPage |
|||
{ |
|||
private readonly TransparentStyles _transparentStyles = new(); |
|||
|
|||
public SettingsPage(SettingsViewModel settingsViewModel) |
|||
{ |
|||
InitializeComponent(); |
|||
|
|||
DataContext = settingsViewModel; |
|||
} |
|||
|
|||
public SettingsPage() |
|||
{ |
|||
InitializeComponent(); |
|||
DataContext = new SettingsViewModel(); |
|||
} |
|||
|
|||
protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e) |
|||
{ |
|||
base.OnAttachedToVisualTree(e); |
|||
|
|||
if (DataContext is SettingsViewModel viewModel) |
|||
{ |
|||
var topLevel = TopLevel.GetTopLevel(this)!; |
|||
if (topLevel is Window window) |
|||
viewModel.SelectedDecorationIndex = (int)window.WindowDecorations; |
|||
} |
|||
} |
|||
|
|||
private void Decorations_SelectionChanged(object? sender, SelectionChangedEventArgs e) |
|||
{ |
|||
if (TopLevel.GetTopLevel(this) is Window window && e.AddedItems.Count > 0 && e.AddedItems[0] is WindowDecorations systemDecorations) |
|||
{ |
|||
window.WindowDecorations = systemDecorations; |
|||
} |
|||
} |
|||
|
|||
private void Themes_SelectionChanged(object? sender, SelectionChangedEventArgs e) |
|||
{ |
|||
if (e.AddedItems.Count > 0 && e.AddedItems[0] is CatalogTheme theme) |
|||
{ |
|||
App.SetCatalogThemes(theme); |
|||
} |
|||
} |
|||
|
|||
private void ThemeVariants_SelectionChanged(object? sender, SelectionChangedEventArgs e) |
|||
{ |
|||
if (Application.Current is { } app && e.AddedItems.Count > 0 && e.AddedItems[0] is ThemeVariant themeVariant) |
|||
{ |
|||
app.RequestedThemeVariant = themeVariant; |
|||
} |
|||
} |
|||
|
|||
private void FlowDirection_SelectionChanged(object? sender, SelectionChangedEventArgs e) |
|||
{ |
|||
if (TopLevel.GetTopLevel(this) is { } topLevel && e.AddedItems.Count > 0 && e.AddedItems[0] is FlowDirection flowDirection) |
|||
{ |
|||
topLevel.FlowDirection = flowDirection; |
|||
} |
|||
} |
|||
|
|||
private void TransparencyLevels_SelectionChanged(object? sender, SelectionChangedEventArgs e) |
|||
{ |
|||
if (TopLevel.GetTopLevel(this) is { } topLevel && e.AddedItems.Count > 0 && e.AddedItems[0] is WindowTransparencyLevel transparencyLevel) |
|||
{ |
|||
topLevel.TransparencyLevelHint = [transparencyLevel]; |
|||
|
|||
if (topLevel.ActualTransparencyLevel != WindowTransparencyLevel.None && |
|||
transparencyLevel != WindowTransparencyLevel.None) |
|||
{ |
|||
topLevel.Background = new ImmutableSolidColorBrush(Colors.Gray, 0.2); |
|||
if (!topLevel.Styles.Contains(_transparentStyles)) |
|||
topLevel.Styles.Add(_transparentStyles); |
|||
} |
|||
else |
|||
{ |
|||
topLevel.Background = null; |
|||
topLevel.Styles.Remove(_transparentStyles); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,34 +0,0 @@ |
|||
<ResourceDictionary xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:controls="using:ControlCatalog"> |
|||
|
|||
<ControlTheme x:Key="ScrollPage" TargetType="ContentPage"> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<DockPanel> |
|||
<ContentPresenter Name="PART_TopCommandBar" |
|||
DockPanel.Dock="Top" |
|||
HorizontalContentAlignment="Stretch" |
|||
IsVisible="False" /> |
|||
<ContentPresenter Name="PART_BottomCommandBar" |
|||
DockPanel.Dock="Bottom" |
|||
HorizontalContentAlignment="Stretch" |
|||
IsVisible="False" /> |
|||
|
|||
<ScrollViewer Padding="20" |
|||
HorizontalScrollBarVisibility="Disabled"> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
Content="{TemplateBinding Content}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
CornerRadius="{TemplateBinding CornerRadius}" /> |
|||
</ScrollViewer> |
|||
</DockPanel> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</ControlTheme> |
|||
</ResourceDictionary> |
|||
@ -0,0 +1,10 @@ |
|||
using ControlCatalog.Models; |
|||
using MiniMvvm; |
|||
|
|||
namespace ControlCatalog.ViewModels |
|||
{ |
|||
internal class SectionViewModel(HomeSection homeSection) : ViewModelBase |
|||
{ |
|||
public HomeSection HomeSection { get; } = homeSection; |
|||
} |
|||
} |
|||
@ -0,0 +1,57 @@ |
|||
using Avalonia.Controls; |
|||
using MiniMvvm; |
|||
|
|||
namespace ControlCatalog.ViewModels |
|||
{ |
|||
public class SettingsViewModel : ViewModelBase |
|||
{ |
|||
public SettingsViewModel() |
|||
{ |
|||
WindowStates = new WindowState[] |
|||
{ |
|||
WindowState.Minimized, |
|||
WindowState.Normal, |
|||
WindowState.Maximized, |
|||
WindowState.FullScreen, |
|||
}; |
|||
|
|||
WindowState = WindowState.Normal; |
|||
} |
|||
|
|||
public WindowState WindowState |
|||
{ |
|||
get; |
|||
set => RaiseAndSetIfChanged(ref field, value); |
|||
} |
|||
|
|||
public int SelectedDecorationIndex |
|||
{ |
|||
get; |
|||
set => RaiseAndSetIfChanged(ref field, value); |
|||
} |
|||
|
|||
public int SelectedThemeVariantIndex |
|||
{ |
|||
get; |
|||
set => RaiseAndSetIfChanged(ref field, value); |
|||
} |
|||
|
|||
public int SelectedTransparencyLevelIndex |
|||
{ |
|||
get; |
|||
set => RaiseAndSetIfChanged(ref field, value); |
|||
} |
|||
|
|||
public int SelectedFlowDirectionIndex |
|||
{ |
|||
get; |
|||
set => RaiseAndSetIfChanged(ref field, value); |
|||
} |
|||
|
|||
public WindowState[] WindowStates |
|||
{ |
|||
get; |
|||
set => RaiseAndSetIfChanged(ref field, value); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue