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
3 weeks 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 System.Collections.Generic; |
||||
using ControlCatalog.ViewModels; |
using System.Linq; |
||||
|
using Avalonia.Media; |
||||
|
using ControlCatalog.Pages; |
||||
|
using MiniMvvm; |
||||
|
|
||||
namespace ControlCatalog.Models; |
namespace ControlCatalog.Models; |
||||
|
|
||||
public class HomeSection(string title, IReadOnlyList<PageItem> items) |
public class HomeSection : ViewModelBase |
||||
{ |
{ |
||||
public string Title { get; } = title; |
public string Title { get; } |
||||
public IReadOnlyList<PageItem> Items { get; } = items; |
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