Jumar Macato
8 years ago
committed by
GitHub
GitHub
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" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:sys="clr-namespace:System;assembly=mscorlib"> |
|||
<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> |
|||
<Style.Resources> |
|||
|
|||
<SolidColorBrush x:Key="HighlightBrush">#FF086F9E</SolidColorBrush> |
|||
<SolidColorBrush x:Key="ThemeAccentBrush">#CC119EDA</SolidColorBrush> |
|||
<SolidColorBrush x:Key="ThemeAccentBrush2">#99119EDA</SolidColorBrush> |
|||
<SolidColorBrush x:Key="ThemeAccentBrush3">#66119EDA</SolidColorBrush> |
|||
<SolidColorBrush x:Key="ThemeAccentBrush4">#33119EDA</SolidColorBrush> |
|||
<SolidColorBrush x:Key="ErrorBrush">Red</SolidColorBrush> |
|||
<SolidColorBrush x:Key="ErrorBrushLight">#10ff0000</SolidColorBrush> |
|||
<Color x:Key="ThemeAccentColor">#CC119EDA</Color> |
|||
<Color x:Key="ThemeAccentColor2">#99119EDA</Color> |
|||
<Color x:Key="ThemeAccentColor3">#66119EDA</Color> |
|||
<Color x:Key="ThemeAccentColor4">#33119EDA</Color> |
|||
|
|||
<Thickness x:Key="ThemeBorderThickness">2</Thickness> |
|||
<sys:Double x:Key="ThemeDisabledOpacity">0.5</sys:Double> |
|||
<Color x:Key="ThemeBackgroundColor">#FFFFFFFF</Color> |
|||
<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> |
|||
<sys:Double x:Key="FontSizeNormal">12</sys:Double> |
|||
<sys:Double x:Key="FontSizeLarge">16</sys:Double> |
|||
</Style.Resources> |
|||
</Style> |
|||
<Color x:Key="HighlightColor">#FF086F9E</Color> |
|||
<Color x:Key="ErrorColor">#FFFF0000</Color> |
|||
<Color x:Key="ErrorLightColor">#10FF0000</Color> |
|||
|
|||
<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"> |
|||
<Style Selector="TreeViewItem"> |
|||
<Setter Property="Padding" Value="2"/> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<StackPanel> |
|||
<Grid ColumnDefinitions="16, Auto"> |
|||
<ToggleButton Name="expander" |
|||
Focusable="False" |
|||
IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"/> |
|||
<ContentPresenter Name="PART_HeaderPresenter" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
Content="{TemplateBinding Header}" |
|||
Padding="{TemplateBinding Padding}" |
|||
TemplatedControl.IsTemplateFocusTarget="True" |
|||
Grid.Column="1"/> |
|||
</Grid> |
|||
<ItemsPresenter Name="PART_ItemsPresenter" |
|||
IsVisible="{TemplateBinding IsExpanded}" |
|||
Items="{TemplateBinding Items}" |
|||
ItemsPanel="{TemplateBinding ItemsPanel}" |
|||
Margin="24,0,0,0" |
|||
MemberSelector="{TemplateBinding MemberSelector}"/> |
|||
</StackPanel> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Styles xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"> |
|||
<Style Selector="TreeViewItem"> |
|||
<Style.Resources> |
|||
<converters:MarginMultiplierConverter Indent="16" Left="True" x:Key="LeftMarginConverter" /> |
|||
</Style.Resources> |
|||
<Setter Property="Padding" Value="2"/> |
|||
<Setter Property="Background" Value="Transparent"/> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<StackPanel> |
|||
<Border Name="SelectionBorder" |
|||
Focusable="True" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
TemplatedControl.IsTemplateFocusTarget="True"> |
|||
<Grid ColumnDefinitions="16, *" |
|||
Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource LeftMarginConverter}}" > |
|||
<ToggleButton Name="expander" |
|||
Focusable="False" |
|||
IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"/> |
|||
<ContentPresenter Name="PART_HeaderPresenter" |
|||
Focusable="False" |
|||
Content="{TemplateBinding Header}" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}" |
|||
Padding="{TemplateBinding Padding}" |
|||
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"> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Background="Transparent" |
|||
Width="14" |
|||
Height="12" |
|||
HorizontalAlignment="Center" |
|||
VerticalAlignment="Center"> |
|||
<Path Fill="{DynamicResource ThemeForegroundBrush}" |
|||
HorizontalAlignment="Center" |
|||
VerticalAlignment="Center" |
|||
Data="M 0 2 L 4 6 L 0 10 Z"/> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="TreeViewItem /template/ ToggleButton#expander"> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Background="Transparent" |
|||
Width="14" |
|||
Height="12" |
|||
HorizontalAlignment="Center" |
|||
VerticalAlignment="Center"> |
|||
<Path Fill="{DynamicResource ThemeForegroundBrush}" |
|||
HorizontalAlignment="Center" |
|||
VerticalAlignment="Center" |
|||
Data="M 0 2 L 4 6 L 0 10 Z"/> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
|
|||
<Style Selector="TreeViewItem /template/ ContentPresenter#PART_HeaderPresenter"> |
|||
<Setter Property="Padding" Value="2"/> |
|||
</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 /template/ ContentPresenter#PART_HeaderPresenter"> |
|||
<Setter Property="Padding" Value="2"/> |
|||
</Style> |
|||
|
|||
<Style Selector="TreeViewItem:empty /template/ ToggleButton#expander"> |
|||
<Setter Property="IsVisible" Value="False"/> |
|||
</Style> |
|||
</Styles> |
|||
<Style Selector="TreeViewItem /template/ Border#SelectionBorder:pointerover"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/> |
|||
</Style> |
|||
|
|||
<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