Jumar Macato
8 years ago
27 changed files with 418 additions and 148 deletions
@ -0,0 +1,13 @@ |
|||||
|
<UserControl xmlns="https://github.com/avaloniaui"> |
||||
|
<StackPanel Orientation="Vertical" Spacing="4"> |
||||
|
<TextBlock Classes="h1">ListBox</TextBlock> |
||||
|
<TextBlock Classes="h2">Hosts a collection of ListBoxItem.</TextBlock> |
||||
|
|
||||
|
<StackPanel Orientation="Horizontal" |
||||
|
Margin="0,16,0,0" |
||||
|
HorizontalAlignment="Center" |
||||
|
Spacing="16"> |
||||
|
<ListBox Items="{Binding}" Width="250" Height="350"></ListBox> |
||||
|
</StackPanel> |
||||
|
</StackPanel> |
||||
|
</UserControl> |
||||
@ -0,0 +1,25 @@ |
|||||
|
using System; |
||||
|
using System.Collections; |
||||
|
using System.Collections.Generic; |
||||
|
using System.Linq; |
||||
|
using Avalonia.Controls; |
||||
|
using Avalonia.Markup.Xaml; |
||||
|
|
||||
|
namespace ControlCatalog.Pages |
||||
|
{ |
||||
|
public class ListBoxPage : UserControl |
||||
|
{ |
||||
|
public ListBoxPage() |
||||
|
{ |
||||
|
this.InitializeComponent(); |
||||
|
DataContext = Enumerable.Range(1, 10).Select(i => $"Item {i}" ) |
||||
|
.ToArray(); |
||||
|
} |
||||
|
|
||||
|
private void InitializeComponent() |
||||
|
{ |
||||
|
AvaloniaXamlLoader.Load(this); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,32 @@ |
|||||
|
using System; |
||||
|
using System.Globalization; |
||||
|
using Avalonia.Data.Converters; |
||||
|
|
||||
|
namespace Avalonia.Controls.Converters |
||||
|
{ |
||||
|
public class MarginMultiplierConverter : IValueConverter |
||||
|
{ |
||||
|
public double Indent { get; set; } |
||||
|
|
||||
|
public bool Left { get; set; } = false; |
||||
|
|
||||
|
public bool Top { get; set; } = false; |
||||
|
|
||||
|
public bool Right { get; set; } = false; |
||||
|
|
||||
|
public bool Bottom { get; set; } = false; |
||||
|
|
||||
|
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) |
||||
|
{ |
||||
|
if (!(value is int depth)) |
||||
|
return new Thickness(0); |
||||
|
|
||||
|
return new Thickness(Left ? Indent * depth : 0, Top ? Indent * depth : 0, Right ? Indent * depth : 0, Bottom ? Indent * depth : 0); |
||||
|
} |
||||
|
|
||||
|
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) |
||||
|
{ |
||||
|
throw new System.NotImplementedException(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -1,30 +1,56 @@ |
|||||
<Style xmlns="https://github.com/avaloniaui" |
<Style xmlns="https://github.com/avaloniaui" |
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
||||
xmlns:sys="clr-namespace:System;assembly=mscorlib"> |
xmlns:sys="clr-namespace:System;assembly=mscorlib"> |
||||
<Style.Resources> |
<Style.Resources> |
||||
<SolidColorBrush x:Key="ThemeBackgroundBrush">#FFFFFFFF</SolidColorBrush> |
|
||||
<SolidColorBrush x:Key="ThemeBorderLightBrush">#FFAAAAAA</SolidColorBrush> |
|
||||
<SolidColorBrush x:Key="ThemeBorderMidBrush">#FF888888</SolidColorBrush> |
|
||||
<SolidColorBrush x:Key="ThemeBorderDarkBrush">#FF333333</SolidColorBrush> |
|
||||
<SolidColorBrush x:Key="ThemeControlLightBrush">#FFFFFFFF</SolidColorBrush> |
|
||||
<SolidColorBrush x:Key="ThemeControlMidBrush">#FFAAAAAA</SolidColorBrush> |
|
||||
<SolidColorBrush x:Key="ThemeControlDarkBrush">#FF888888</SolidColorBrush> |
|
||||
<SolidColorBrush x:Key="ThemeForegroundBrush">#FF000000</SolidColorBrush> |
|
||||
<SolidColorBrush x:Key="ThemeForegroundLightBrush">#FF808080</SolidColorBrush> |
|
||||
|
|
||||
<SolidColorBrush x:Key="HighlightBrush">#FF086F9E</SolidColorBrush> |
<Color x:Key="ThemeAccentColor">#CC119EDA</Color> |
||||
<SolidColorBrush x:Key="ThemeAccentBrush">#CC119EDA</SolidColorBrush> |
<Color x:Key="ThemeAccentColor2">#99119EDA</Color> |
||||
<SolidColorBrush x:Key="ThemeAccentBrush2">#99119EDA</SolidColorBrush> |
<Color x:Key="ThemeAccentColor3">#66119EDA</Color> |
||||
<SolidColorBrush x:Key="ThemeAccentBrush3">#66119EDA</SolidColorBrush> |
<Color x:Key="ThemeAccentColor4">#33119EDA</Color> |
||||
<SolidColorBrush x:Key="ThemeAccentBrush4">#33119EDA</SolidColorBrush> |
|
||||
<SolidColorBrush x:Key="ErrorBrush">Red</SolidColorBrush> |
|
||||
<SolidColorBrush x:Key="ErrorBrushLight">#10ff0000</SolidColorBrush> |
|
||||
|
|
||||
<Thickness x:Key="ThemeBorderThickness">2</Thickness> |
<Color x:Key="ThemeBackgroundColor">#FFFFFFFF</Color> |
||||
<sys:Double x:Key="ThemeDisabledOpacity">0.5</sys:Double> |
<Color x:Key="ThemeBorderLightColor">#FFAAAAAA</Color> |
||||
|
<Color x:Key="ThemeBorderMidColor">#FF888888</Color> |
||||
|
<Color x:Key="ThemeBorderDarkColor">#FF333333</Color> |
||||
|
<Color x:Key="ThemeControlLightColor">#FFFFFFFF</Color> |
||||
|
<Color x:Key="ThemeControlMidColor">#FFAAAAAA</Color> |
||||
|
<Color x:Key="ThemeControlDarkColor">#FF888888</Color> |
||||
|
<Color x:Key="ThemeControlHighlightLowColor">#FFF0F0F0</Color> |
||||
|
<Color x:Key="ThemeControlHighlightMidColor">#FFD0D0D0</Color> |
||||
|
<Color x:Key="ThemeControlHighlightDarkColor">#FF808080</Color> |
||||
|
<Color x:Key="ThemeForegroundColor">#FF000000</Color> |
||||
|
<Color x:Key="ThemeForegroundLightColor">#FF808080</Color> |
||||
|
|
||||
<sys:Double x:Key="FontSizeSmall">10</sys:Double> |
<Color x:Key="HighlightColor">#FF086F9E</Color> |
||||
<sys:Double x:Key="FontSizeNormal">12</sys:Double> |
<Color x:Key="ErrorColor">#FFFF0000</Color> |
||||
<sys:Double x:Key="FontSizeLarge">16</sys:Double> |
<Color x:Key="ErrorLightColor">#10FF0000</Color> |
||||
</Style.Resources> |
|
||||
</Style> |
<SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{DynamicResource ThemeBackgroundColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeBorderLightBrush" Color="{DynamicResource ThemeBorderLightColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeBorderMidBrush" Color="{DynamicResource ThemeBorderMidColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeBorderDarkBrush" Color="{DynamicResource ThemeBorderDarkColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeControlLightBrush" Color="{DynamicResource ThemeControlLightColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeControlMidBrush" Color="{DynamicResource ThemeControlMidColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeControlDarkBrush" Color="{DynamicResource ThemeControlDarkColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeControlHighlightLowBrush" Color="{DynamicResource ThemeControlHighlightLowColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeControlHighlightMidBrush" Color="{DynamicResource ThemeControlHighlightMidColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeControlHighlightDarkBrush" Color="{DynamicResource ThemeControlHighlightDarkColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeForegroundBrush" Color="{DynamicResource ThemeForegroundColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeForegroundLightBrush" Color="{DynamicResource ThemeForegroundLightColor}"></SolidColorBrush> |
||||
|
|
||||
|
<SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource HighlightColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeAccentBrush" Color="{DynamicResource ThemeAccentColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeAccentBrush2" Color="{DynamicResource ThemeAccentColor2}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeAccentBrush3" Color="{DynamicResource ThemeAccentColor3}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ThemeAccentBrush4" Color="{DynamicResource ThemeAccentColor4}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ErrorBrush" Color="{DynamicResource ErrorColor}"></SolidColorBrush> |
||||
|
<SolidColorBrush x:Key="ErrorLightBrush" Color="{DynamicResource ErrorLightColor}"></SolidColorBrush> |
||||
|
|
||||
|
<Thickness x:Key="ThemeBorderThickness">2</Thickness> |
||||
|
<sys:Double x:Key="ThemeDisabledOpacity">0.5</sys:Double> |
||||
|
|
||||
|
<sys:Double x:Key="FontSizeSmall">10</sys:Double> |
||||
|
<sys:Double x:Key="FontSizeNormal">12</sys:Double> |
||||
|
<sys:Double x:Key="FontSizeLarge">16</sys:Double> |
||||
|
</Style.Resources> |
||||
|
</Style> |
||||
|
|||||
@ -1,69 +1,92 @@ |
|||||
<Styles xmlns="https://github.com/avaloniaui"> |
<Styles xmlns="https://github.com/avaloniaui" |
||||
<Style Selector="TreeViewItem"> |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
||||
<Setter Property="Padding" Value="2"/> |
xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"> |
||||
<Setter Property="Template"> |
<Style Selector="TreeViewItem"> |
||||
<ControlTemplate> |
<Style.Resources> |
||||
<StackPanel> |
<converters:MarginMultiplierConverter Indent="16" Left="True" x:Key="LeftMarginConverter" /> |
||||
<Grid ColumnDefinitions="16, Auto"> |
</Style.Resources> |
||||
<ToggleButton Name="expander" |
<Setter Property="Padding" Value="2"/> |
||||
Focusable="False" |
<Setter Property="Background" Value="Transparent"/> |
||||
IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"/> |
<Setter Property="Template"> |
||||
<ContentPresenter Name="PART_HeaderPresenter" |
<ControlTemplate> |
||||
Background="{TemplateBinding Background}" |
<StackPanel> |
||||
BorderBrush="{TemplateBinding BorderBrush}" |
<Border Name="SelectionBorder" |
||||
BorderThickness="{TemplateBinding BorderThickness}" |
Focusable="True" |
||||
Content="{TemplateBinding Header}" |
Background="{TemplateBinding Background}" |
||||
Padding="{TemplateBinding Padding}" |
BorderBrush="{TemplateBinding BorderBrush}" |
||||
TemplatedControl.IsTemplateFocusTarget="True" |
BorderThickness="{TemplateBinding BorderThickness}" |
||||
Grid.Column="1"/> |
TemplatedControl.IsTemplateFocusTarget="True"> |
||||
</Grid> |
<Grid ColumnDefinitions="16, *" |
||||
<ItemsPresenter Name="PART_ItemsPresenter" |
Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource LeftMarginConverter}}" > |
||||
IsVisible="{TemplateBinding IsExpanded}" |
<ToggleButton Name="expander" |
||||
Items="{TemplateBinding Items}" |
Focusable="False" |
||||
ItemsPanel="{TemplateBinding ItemsPanel}" |
IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"/> |
||||
Margin="24,0,0,0" |
<ContentPresenter Name="PART_HeaderPresenter" |
||||
MemberSelector="{TemplateBinding MemberSelector}"/> |
Focusable="False" |
||||
</StackPanel> |
Content="{TemplateBinding Header}" |
||||
</ControlTemplate> |
HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}" |
||||
</Setter> |
Padding="{TemplateBinding Padding}" |
||||
</Style> |
Grid.Column="1"/> |
||||
|
</Grid> |
||||
|
</Border> |
||||
|
<ItemsPresenter Name="PART_ItemsPresenter" |
||||
|
IsVisible="{TemplateBinding IsExpanded}" |
||||
|
Items="{TemplateBinding Items}" |
||||
|
ItemsPanel="{TemplateBinding ItemsPanel}" |
||||
|
MemberSelector="{TemplateBinding MemberSelector}"/> |
||||
|
</StackPanel> |
||||
|
</ControlTemplate> |
||||
|
</Setter> |
||||
|
</Style> |
||||
|
|
||||
<Style Selector="TreeViewItem /template/ ToggleButton#expander"> |
<Style Selector="TreeViewItem /template/ ToggleButton#expander"> |
||||
<Setter Property="Template"> |
<Setter Property="Template"> |
||||
<ControlTemplate> |
<ControlTemplate> |
||||
<Border Background="Transparent" |
<Border Background="Transparent" |
||||
Width="14" |
Width="14" |
||||
Height="12" |
Height="12" |
||||
HorizontalAlignment="Center" |
HorizontalAlignment="Center" |
||||
VerticalAlignment="Center"> |
VerticalAlignment="Center"> |
||||
<Path Fill="{DynamicResource ThemeForegroundBrush}" |
<Path Fill="{DynamicResource ThemeForegroundBrush}" |
||||
HorizontalAlignment="Center" |
HorizontalAlignment="Center" |
||||
VerticalAlignment="Center" |
VerticalAlignment="Center" |
||||
Data="M 0 2 L 4 6 L 0 10 Z"/> |
Data="M 0 2 L 4 6 L 0 10 Z"/> |
||||
</Border> |
</Border> |
||||
</ControlTemplate> |
</ControlTemplate> |
||||
</Setter> |
</Setter> |
||||
</Style> |
</Style> |
||||
|
|
||||
<Style Selector="TreeViewItem /template/ ContentPresenter#PART_HeaderPresenter"> |
<Style Selector="TreeViewItem /template/ ContentPresenter#PART_HeaderPresenter"> |
||||
<Setter Property="Padding" Value="2"/> |
<Setter Property="Padding" Value="2"/> |
||||
</Style> |
</Style> |
||||
|
|
||||
<Style Selector="TreeViewItem:selected /template/ ContentPresenter#PART_HeaderPresenter"> |
|
||||
<Setter Property="Background" Value="#fff0f0f0"/> |
|
||||
</Style> |
|
||||
|
|
||||
<Style Selector="TreeViewItem:selected:focus /template/ ContentPresenter#PART_HeaderPresenter"> |
|
||||
<Setter Property="Background" Value="#ffd0d0d0"/> |
|
||||
</Style> |
|
||||
|
|
||||
<Style Selector="TreeViewItem /template/ ToggleButton#expander:checked"> |
|
||||
<Setter Property="RenderTransform"> |
|
||||
<RotateTransform Angle="45"/> |
|
||||
</Setter> |
|
||||
</Style> |
|
||||
|
|
||||
<Style Selector="TreeViewItem:empty /template/ ToggleButton#expander"> |
<Style Selector="TreeViewItem /template/ Border#SelectionBorder:pointerover"> |
||||
<Setter Property="IsVisible" Value="False"/> |
<Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/> |
||||
</Style> |
</Style> |
||||
</Styles> |
|
||||
|
<Style Selector="TreeViewItem:selected /template/ Border#SelectionBorder"> |
||||
|
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/> |
||||
|
</Style> |
||||
|
|
||||
|
<Style Selector="TreeViewItem:selected /template/ Border#SelectionBorder:focus"> |
||||
|
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/> |
||||
|
</Style> |
||||
|
|
||||
|
<Style Selector="TreeViewItem:selected /template/ Border#SelectionBorder:pointerover"> |
||||
|
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}"/> |
||||
|
</Style> |
||||
|
|
||||
|
<Style Selector="TreeViewItem:selected /template/ Border#SelectionBorder:pointerover:focus"> |
||||
|
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}"/> |
||||
|
</Style> |
||||
|
|
||||
|
<Style Selector="TreeViewItem /template/ ToggleButton#expander:checked"> |
||||
|
<Setter Property="RenderTransform"> |
||||
|
<RotateTransform Angle="45"/> |
||||
|
</Setter> |
||||
|
</Style> |
||||
|
|
||||
|
<Style Selector="TreeViewItem:empty /template/ ToggleButton#expander"> |
||||
|
<Setter Property="IsVisible" Value="False"/> |
||||
|
</Style> |
||||
|
</Styles> |
||||
|
|||||
Loading…
Reference in new issue