Nikita Tsukanov
5 years ago
committed by
GitHub
GitHub
66 changed files with 1624 additions and 614 deletions
@ -1,10 +1,28 @@ |
|||
namespace Avalonia.Controls.Primitives |
|||
{ |
|||
/// <summary>
|
|||
/// Specifies the visibility of a <see cref="ScrollBar"/> for scrollable content.
|
|||
/// </summary>
|
|||
public enum ScrollBarVisibility |
|||
{ |
|||
/// <summary>
|
|||
/// No scrollbars and no scrolling in this dimension.
|
|||
/// </summary>
|
|||
Disabled, |
|||
|
|||
/// <summary>
|
|||
/// The scrollbar should be visible only if there is more content than fits in the viewport.
|
|||
/// </summary>
|
|||
Auto, |
|||
|
|||
/// <summary>
|
|||
/// The scrollbar should never be visible. No space should ever be reserved for the scrollbar.
|
|||
/// </summary>
|
|||
Hidden, |
|||
|
|||
/// <summary>
|
|||
/// The scrollbar should always be visible. Space should always be reserved for the scrollbar.
|
|||
/// </summary>
|
|||
Visible, |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,87 @@ |
|||
<Styles xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
xmlns:controls="clr-namespace:Avalonia.Diagnostics.Controls"> |
|||
|
|||
<Styles.Resources> |
|||
<SolidColorBrush x:Key="HighlightBorderBrush" Color="CornflowerBlue" /> |
|||
<SolidColorBrush x:Key="ThicknessBorderBrush" Color="#666666" /> |
|||
</Styles.Resources> |
|||
|
|||
<Style Selector="controls|ThicknessEditor"> |
|||
<Setter Property="HorizontalContentAlignment" Value="Center" /> |
|||
<Setter Property="VerticalContentAlignment" Value="Center" /> |
|||
<Setter Property="BorderThickness" Value="1" /> |
|||
<Setter Property="BorderBrush" Value="{StaticResource ThicknessBorderBrush}" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Panel> |
|||
<Rectangle x:Name="PART_Background" |
|||
Classes.no-content-pointerover="{Binding !#PART_ContentPresenter.IsPointerOver}" /> |
|||
<Border |
|||
x:Name="PART_Border" |
|||
Classes.no-content-pointerover="{Binding !#PART_ContentPresenter.IsPointerOver}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}"> |
|||
<Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="Auto,*,Auto"> |
|||
<Grid.Styles> |
|||
<Style Selector="TextBox.thickness-edit"> |
|||
<Setter Property="Background" Value="Transparent" /> |
|||
<Setter Property="BorderThickness" Value="0" /> |
|||
<Setter Property="Margin" Value="2" /> |
|||
<Setter Property="HorizontalAlignment" Value="Stretch" /> |
|||
<Setter Property="VerticalAlignment" Value="Stretch" /> |
|||
<Setter Property="HorizontalContentAlignment" Value="Center" /> |
|||
<Setter Property="VerticalContentAlignment" Value="Center" /> |
|||
<Setter Property="(ScrollViewer.HorizontalScrollBarVisibility)" |
|||
Value="Disabled" /> |
|||
<Setter Property="(ScrollViewer.VerticalScrollBarVisibility)" Value="Disabled" /> |
|||
<Setter Property="IsVisible" |
|||
Value="{Binding $parent[controls:ThicknessEditor].IsPresent}" /> |
|||
</Style> |
|||
</Grid.Styles> |
|||
<TextBlock IsVisible="{TemplateBinding IsPresent}" Margin="4,0,0,0" |
|||
Text="{TemplateBinding Header}" Grid.Row="0" Grid.Column="0" |
|||
Grid.ColumnSpan="2" /> |
|||
<TextBox Grid.Row="1" Grid.Column="0" |
|||
Text="{Binding Left, RelativeSource={RelativeSource TemplatedParent}}" |
|||
Classes="thickness-edit" /> |
|||
<TextBox x:Name="Right" Grid.Row="0" Grid.Column="1" |
|||
Text="{Binding Top, RelativeSource={RelativeSource TemplatedParent}}" |
|||
Classes="thickness-edit" /> |
|||
<TextBox Grid.Row="1" Grid.Column="2" |
|||
Text="{Binding Right, RelativeSource={RelativeSource TemplatedParent}}" |
|||
Classes="thickness-edit" /> |
|||
<TextBox Grid.Row="2" Grid.Column="1" |
|||
Text="{Binding Bottom, RelativeSource={RelativeSource TemplatedParent}}" |
|||
Classes="thickness-edit" /> |
|||
<ContentPresenter Grid.Row="1" Grid.Column="1" |
|||
Name="PART_ContentPresenter" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
Content="{TemplateBinding Content}" |
|||
Padding="{TemplateBinding Padding}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" /> |
|||
</Grid> |
|||
</Border> |
|||
</Panel> |
|||
|
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
|
|||
<Style Selector="controls|ThicknessEditor[IsPresent=False]"> |
|||
<Setter Property="BorderThickness" Value="0" /> |
|||
</Style> |
|||
|
|||
<Style Selector="controls|ThicknessEditor /template/ Rectangle#PART_Background"> |
|||
<Setter Property="Fill" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" /> |
|||
</Style> |
|||
|
|||
<Style Selector="controls|ThicknessEditor:pointerover /template/ Rectangle#PART_Background.no-content-pointerover"> |
|||
<Setter Property="Fill" Value="{Binding Highlight, RelativeSource={RelativeSource TemplatedParent}}" /> |
|||
</Style> |
|||
|
|||
<Style Selector="controls|ThicknessEditor:pointerover /template/ Border#PART_Border.no-content-pointerover"> |
|||
<Setter Property="BorderBrush" Value="{StaticResource HighlightBorderBrush}" /> |
|||
</Style> |
|||
</Styles> |
|||
@ -0,0 +1,25 @@ |
|||
using System; |
|||
using System.Globalization; |
|||
using Avalonia.Data; |
|||
using Avalonia.Data.Converters; |
|||
|
|||
namespace Avalonia.Diagnostics.Converters |
|||
{ |
|||
internal class EnumToCheckedConverter : IValueConverter |
|||
{ |
|||
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) |
|||
{ |
|||
return Equals(value, parameter); |
|||
} |
|||
|
|||
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) |
|||
{ |
|||
if (value is bool isChecked && isChecked) |
|||
{ |
|||
return parameter; |
|||
} |
|||
|
|||
return BindingOperations.DoNothing; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,210 @@ |
|||
<UserControl xmlns="https://github.com/avaloniaui" |
|||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
|||
x:Class="Avalonia.Diagnostics.Views.LayoutExplorerView" |
|||
xmlns:local="clr-namespace:Avalonia.Diagnostics.Views" |
|||
xmlns:controls="clr-namespace:Avalonia.Diagnostics.Controls" |
|||
xmlns:converters="clr-namespace:Avalonia.Diagnostics.Converters"> |
|||
|
|||
<UserControl.Resources> |
|||
<SolidColorBrush x:Key="SizeGuidelineBrush" Color="#333333" /> |
|||
<SolidColorBrush x:Key="MarginBackgroundBrush" Color="#D78965" /> |
|||
<SolidColorBrush x:Key="MarginHighlightBrush" Color="#EA966F" /> |
|||
<SolidColorBrush x:Key="BorderBackgroundBrush" Color="#E3C381" /> |
|||
<SolidColorBrush x:Key="BorderHighlightBrush" Color="#EFCD88" /> |
|||
<SolidColorBrush x:Key="PaddingBackgroundBrush" Color="#B8C47F" /> |
|||
<SolidColorBrush x:Key="PaddingHighlightBrush" Color="#CEDA8E" /> |
|||
<SolidColorBrush x:Key="SizeBackgroundBrush" Color="#88B2BD" /> |
|||
<SolidColorBrush x:Key="SizeHighlightBrush" Color="#9ED0DC" /> |
|||
</UserControl.Resources> |
|||
|
|||
<Grid RowDefinitions="*,Auto"> |
|||
|
|||
<Viewbox Grid.Row="0" StretchDirection="DownOnly"> |
|||
<Grid x:Name="LayoutRoot" Margin="8,0,8,8" RowDefinitions="Auto,Auto" |
|||
ColumnDefinitions="Auto,Auto"> |
|||
|
|||
<Grid.Styles> |
|||
<Style Selector="TextBlock.with-constraint"> |
|||
<Setter Property="TextDecorations" Value="Underline" /> |
|||
</Style> |
|||
|
|||
</Grid.Styles> |
|||
|
|||
<Border x:Name="VerticalSize" Grid.Row="0" Grid.Column="1"> |
|||
<TextBlock VerticalAlignment="Center" FontWeight="Bold" |
|||
Classes.with-constraint="{Binding HeightConstraint, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" |
|||
Text="{Binding Height}" |
|||
ToolTip.Tip="{Binding HeightConstraint}" /> |
|||
</Border> |
|||
|
|||
<Border x:Name="HorizontalSize" Grid.Row="1" Grid.Column="0"> |
|||
<TextBlock HorizontalAlignment="Center" FontWeight="Bold" |
|||
Classes.with-constraint="{Binding WidthConstraint, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" |
|||
Text="{Binding Width}" |
|||
ToolTip.Tip="{Binding WidthConstraint}" /> |
|||
</Border> |
|||
|
|||
<controls:ThicknessEditor Grid.Row="0" Grid.Column="0" Header="margin" VerticalAlignment="Top" |
|||
HorizontalAlignment="Center" |
|||
Background="{StaticResource MarginBackgroundBrush}" |
|||
Highlight="{StaticResource MarginHighlightBrush}" |
|||
Thickness="{Binding MarginThickness}"> |
|||
<controls:ThicknessEditor x:Name="BorderArea" Header="border" |
|||
Background="{StaticResource BorderBackgroundBrush}" |
|||
Highlight="{StaticResource BorderHighlightBrush}" |
|||
Thickness="{Binding BorderThickness}" |
|||
IsPresent="{Binding HasBorder}"> |
|||
<controls:ThicknessEditor x:Name="PaddingArea" Header="padding" |
|||
Background="{StaticResource PaddingBackgroundBrush}" |
|||
Highlight="{StaticResource PaddingHighlightBrush}" |
|||
Thickness="{Binding PaddingThickness}" |
|||
IsPresent="{Binding HasPadding}"> |
|||
<Border x:Name="ContentArea" BorderThickness="1" MinWidth="100" MinHeight="16" |
|||
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"> |
|||
<Border.Styles> |
|||
<Style Selector="Border"> |
|||
<Setter Property="Background" Value="{StaticResource SizeBackgroundBrush}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource ThicknessBorderBrush}" /> |
|||
</Style> |
|||
<Style Selector="Border:pointerover"> |
|||
<Setter Property="Background" Value="{StaticResource SizeHighlightBrush}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource HighlightBorderBrush}" /> |
|||
</Style> |
|||
</Border.Styles> |
|||
<TextBlock Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" |
|||
Text="content" /> |
|||
</Border> |
|||
</controls:ThicknessEditor> |
|||
</controls:ThicknessEditor> |
|||
</controls:ThicknessEditor> |
|||
|
|||
<Canvas Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2"> |
|||
<Canvas.Styles> |
|||
<Style Selector="Rectangle"> |
|||
<Setter Property="StrokeDashArray" Value="1,3" /> |
|||
<Setter Property="Stroke" Value="{StaticResource SizeGuidelineBrush}" /> |
|||
<Setter Property="StrokeThickness" Value="1" /> |
|||
<Setter Property="IsHitTestVisible" Value="False" /> |
|||
</Style> |
|||
</Canvas.Styles> |
|||
<Rectangle x:Name="HorizontalSizeBegin" /> |
|||
<Rectangle x:Name="HorizontalSizeEnd" /> |
|||
<Rectangle x:Name="VerticalSizeBegin" /> |
|||
<Rectangle x:Name="VerticalSizeEnd" /> |
|||
</Canvas> |
|||
</Grid> |
|||
</Viewbox> |
|||
|
|||
<StackPanel Orientation="Vertical" Grid.Column="0" Grid.Row="1" Spacing="4" |
|||
Margin="4" HorizontalAlignment="Stretch"> |
|||
|
|||
<StackPanel.Resources> |
|||
<converters:EnumToCheckedConverter x:Key="AlignmentConverter" /> |
|||
</StackPanel.Resources> |
|||
|
|||
<StackPanel.Styles> |
|||
<Style Selector="RadioButton"> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border |
|||
Background="{TemplateBinding Background}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
Padding="{TemplateBinding Padding}"> |
|||
<Path x:Name="PART_Path" Fill="Black" Width="16" Height="16" Stretch="Uniform" /> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
|
|||
<Style Selector="RadioButton"> |
|||
<Setter Property="Background" Value="WhiteSmoke" /> |
|||
<Setter Property="Padding" Value="2" /> |
|||
</Style> |
|||
|
|||
<Style Selector="RadioButton:pointerover"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}" /> |
|||
</Style> |
|||
|
|||
<Style Selector="RadioButton:checked"> |
|||
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}" /> |
|||
</Style> |
|||
|
|||
</StackPanel.Styles> |
|||
|
|||
<DockPanel HorizontalAlignment="Stretch" LastChildFill="True"> |
|||
|
|||
<DockPanel.Styles> |
|||
<Style Selector="RadioButton.h-left /template/ Path#PART_Path"> |
|||
<Setter Property="Data" Value="M22 13V19H6V13H22M6 5V11H16V5H6M2 2V22H4V2H2" /> |
|||
</Style> |
|||
<Style Selector="RadioButton.h-center /template/ Path#PART_Path"> |
|||
<Setter Property="Data" |
|||
Value="M20 19H13V22H11V19H4V13H11V11H7V5H11V2H13V5H17V11H13V13H20V19Z" /> |
|||
</Style> |
|||
<Style Selector="RadioButton.h-right /template/ Path#PART_Path"> |
|||
<Setter Property="Data" Value="M18 13V19H2V13H18M8 5V11H18V5H8M20 2V22H22V2H20Z" /> |
|||
</Style> |
|||
<Style Selector="RadioButton.h-stretch /template/ Path#PART_Path"> |
|||
<Setter Property="Data" Value="M4,22H2V2h2V22z M22,2h-2v20h2V2z M13.5,7h-3v10h3V7z" /> |
|||
</Style> |
|||
</DockPanel.Styles> |
|||
|
|||
<Label DockPanel.Dock="Left" Content="Horizontal Alignment" /> |
|||
|
|||
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> |
|||
<RadioButton GroupName="HAlignment" Classes="h-left" |
|||
ToolTip.Tip="Left" |
|||
IsChecked="{Binding HorizontalAlignment, Converter={StaticResource AlignmentConverter}, ConverterParameter={x:Static HorizontalAlignment.Left}}" /> |
|||
<RadioButton GroupName="HAlignment" Classes="h-center" BorderThickness="0,1,1,1" |
|||
ToolTip.Tip="Center" |
|||
IsChecked="{Binding HorizontalAlignment, Converter={StaticResource AlignmentConverter}, ConverterParameter={x:Static HorizontalAlignment.Center}}" /> |
|||
<RadioButton GroupName="HAlignment" Classes="h-right" BorderThickness="0,1,1,1" |
|||
ToolTip.Tip="Right" |
|||
IsChecked="{Binding HorizontalAlignment, Converter={StaticResource AlignmentConverter}, ConverterParameter={x:Static HorizontalAlignment.Right}}" /> |
|||
<RadioButton GroupName="HAlignment" Classes="h-stretch" |
|||
ToolTip.Tip="Stretch" |
|||
IsChecked="{Binding HorizontalAlignment, Converter={StaticResource AlignmentConverter}, ConverterParameter={x:Static HorizontalAlignment.Stretch}}" /> |
|||
</StackPanel> |
|||
|
|||
</DockPanel> |
|||
|
|||
<DockPanel HorizontalAlignment="Stretch" LastChildFill="True"> |
|||
<DockPanel.Styles> |
|||
<Style Selector="RadioButton.v-top /template/ Path#PART_Path"> |
|||
<Setter Property="Data" Value="M11 22H5V6H11V22M19 6H13V16H19V6M22 2H2V4H22V2Z" /> |
|||
</Style> |
|||
<Style Selector="RadioButton.v-center /template/ Path#PART_Path"> |
|||
<Setter Property="Data" |
|||
Value="M5 20V13H2V11H5V4H11V11H13V7H19V11H22V13H19V17H13V13H11V20H5Z" /> |
|||
</Style> |
|||
<Style Selector="RadioButton.v-bottom /template/ Path#PART_Path"> |
|||
<Setter Property="Data" Value="M11 18H5V2H11V18M19 8H13V18H19V8M22 20H2V22H22V20Z" /> |
|||
</Style> |
|||
<Style Selector="RadioButton.v-stretch /template/ Path#PART_Path"> |
|||
<Setter Property="Data" Value="M22,2v2H2V2H22z M7,10.5v3h10v-3H7z M2,20v2h20v-2H2z" /> |
|||
</Style> |
|||
</DockPanel.Styles> |
|||
|
|||
<Label DockPanel.Dock="Left" Content="Vertical Alignment" /> |
|||
|
|||
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> |
|||
<RadioButton GroupName="VAlignment" Classes="v-top" |
|||
ToolTip.Tip="Top" |
|||
IsChecked="{Binding VerticalAlignment, Converter={StaticResource AlignmentConverter}, ConverterParameter={x:Static VerticalAlignment.Top}}" /> |
|||
<RadioButton GroupName="VAlignment" Classes="v-center" BorderThickness="0,1,1,1" |
|||
ToolTip.Tip="Center" |
|||
IsChecked="{Binding VerticalAlignment, Converter={StaticResource AlignmentConverter}, ConverterParameter={x:Static VerticalAlignment.Center}}" /> |
|||
<RadioButton GroupName="VAlignment" Classes="v-bottom" BorderThickness="0,1,1,1" |
|||
ToolTip.Tip="Bottom" |
|||
IsChecked="{Binding VerticalAlignment, Converter={StaticResource AlignmentConverter}, ConverterParameter={x:Static VerticalAlignment.Bottom}}" /> |
|||
<RadioButton GroupName="VAlignment" Classes="v-stretch" |
|||
ToolTip.Tip="Stretch" |
|||
IsChecked="{Binding VerticalAlignment, Converter={StaticResource AlignmentConverter}, ConverterParameter={x:Static VerticalAlignment.Stretch}}" /> |
|||
</StackPanel> |
|||
|
|||
</DockPanel> |
|||
</StackPanel> |
|||
</Grid> |
|||
|
|||
</UserControl> |
|||
@ -0,0 +1,128 @@ |
|||
using System; |
|||
using Avalonia.Controls; |
|||
using Avalonia.Controls.Shapes; |
|||
using Avalonia.Diagnostics.Controls; |
|||
using Avalonia.Markup.Xaml; |
|||
using Avalonia.VisualTree; |
|||
|
|||
namespace Avalonia.Diagnostics.Views |
|||
{ |
|||
internal class LayoutExplorerView : UserControl |
|||
{ |
|||
private readonly ThicknessEditor _borderArea; |
|||
private readonly ThicknessEditor _paddingArea; |
|||
private readonly Rectangle _horizontalSizeBegin; |
|||
private readonly Rectangle _horizontalSizeEnd; |
|||
private readonly Rectangle _verticalSizeBegin; |
|||
private readonly Rectangle _verticalSizeEnd; |
|||
private readonly Grid _layoutRoot; |
|||
private readonly Border _horizontalSize; |
|||
private readonly Border _verticalSize; |
|||
private readonly Border _contentArea; |
|||
|
|||
public LayoutExplorerView() |
|||
{ |
|||
InitializeComponent(); |
|||
|
|||
_borderArea = this.FindControl<ThicknessEditor>("BorderArea"); |
|||
_paddingArea = this.FindControl<ThicknessEditor>("PaddingArea"); |
|||
|
|||
_horizontalSizeBegin = this.FindControl<Rectangle>("HorizontalSizeBegin"); |
|||
_horizontalSizeEnd = this.FindControl<Rectangle>("HorizontalSizeEnd"); |
|||
_verticalSizeBegin = this.FindControl<Rectangle>("VerticalSizeBegin"); |
|||
_verticalSizeEnd = this.FindControl<Rectangle>("VerticalSizeEnd"); |
|||
|
|||
_horizontalSize = this.FindControl<Border>("HorizontalSize"); |
|||
_verticalSize = this.FindControl<Border>("VerticalSize"); |
|||
|
|||
_contentArea = this.FindControl<Border>("ContentArea"); |
|||
|
|||
_layoutRoot = this.FindControl<Grid>("LayoutRoot"); |
|||
|
|||
void SubscribeToBounds(Visual visual) |
|||
{ |
|||
visual.GetPropertyChangedObservable(TransformedBoundsProperty) |
|||
.Subscribe(UpdateSizeGuidelines); |
|||
} |
|||
|
|||
SubscribeToBounds(_borderArea); |
|||
SubscribeToBounds(_paddingArea); |
|||
SubscribeToBounds(_contentArea); |
|||
} |
|||
|
|||
private void InitializeComponent() |
|||
{ |
|||
AvaloniaXamlLoader.Load(this); |
|||
} |
|||
|
|||
private void UpdateSizeGuidelines(AvaloniaPropertyChangedEventArgs e) |
|||
{ |
|||
void UpdateGuidelines(Visual area) |
|||
{ |
|||
if (area.TransformedBounds is TransformedBounds bounds) |
|||
{ |
|||
// Horizontal guideline
|
|||
{ |
|||
var sizeArea = TranslateToRoot((_horizontalSize.TransformedBounds ?? default).Bounds.BottomLeft, |
|||
_horizontalSize); |
|||
|
|||
var start = TranslateToRoot(bounds.Bounds.BottomLeft, area); |
|||
|
|||
SetPosition(_horizontalSizeBegin, start); |
|||
|
|||
var end = TranslateToRoot(bounds.Bounds.BottomRight, area); |
|||
|
|||
SetPosition(_horizontalSizeEnd, end.WithX(end.X - 1)); |
|||
|
|||
var height = sizeArea.Y - start.Y + 2; |
|||
|
|||
_horizontalSizeBegin.Height = height; |
|||
_horizontalSizeEnd.Height = height; |
|||
} |
|||
|
|||
// Vertical guideline
|
|||
{ |
|||
var sizeArea = TranslateToRoot((_verticalSize.TransformedBounds ?? default).Bounds.TopRight, _verticalSize); |
|||
|
|||
var start = TranslateToRoot(bounds.Bounds.TopRight, area); |
|||
|
|||
SetPosition(_verticalSizeBegin, start); |
|||
|
|||
var end = TranslateToRoot(bounds.Bounds.BottomRight, area); |
|||
|
|||
SetPosition(_verticalSizeEnd, end.WithY(end.Y - 1)); |
|||
|
|||
var width = sizeArea.X - start.X + 2; |
|||
|
|||
_verticalSizeBegin.Width = width; |
|||
_verticalSizeEnd.Width = width; |
|||
} |
|||
} |
|||
} |
|||
|
|||
Point TranslateToRoot(Point point, IVisual from) |
|||
{ |
|||
return from.TranslatePoint(point, _layoutRoot) ?? default; |
|||
} |
|||
|
|||
static void SetPosition(Rectangle rect, Point start) |
|||
{ |
|||
Canvas.SetLeft(rect, start.X); |
|||
Canvas.SetTop(rect, start.Y); |
|||
} |
|||
|
|||
if (_borderArea.IsPresent) |
|||
{ |
|||
UpdateGuidelines(_borderArea); |
|||
} |
|||
else if (_paddingArea.IsPresent) |
|||
{ |
|||
UpdateGuidelines(_paddingArea); |
|||
} |
|||
else |
|||
{ |
|||
UpdateGuidelines(_contentArea); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,141 +1,232 @@ |
|||
<Styles xmlns="https://github.com/avaloniaui"> |
|||
<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> |
|||
<Design.PreviewWith> |
|||
<Border Padding="20"> |
|||
<StackPanel Orientation="Vertical" Spacing="20"> |
|||
<Expander ExpandDirection="Up" Header="Expand Up"> |
|||
<StackPanel> |
|||
<TextBlock>Expanded content</TextBlock> |
|||
</StackPanel> |
|||
</Expander> |
|||
<Expander ExpandDirection="Down" Header="Expand Down"> |
|||
<StackPanel> |
|||
<TextBlock>Expanded content</TextBlock> |
|||
</StackPanel> |
|||
</Expander> |
|||
<Expander ExpandDirection="Left" Header="Expand Left"> |
|||
<StackPanel> |
|||
<TextBlock>Expanded content</TextBlock> |
|||
</StackPanel> |
|||
</Expander> |
|||
<Expander ExpandDirection="Right" Header="Expand Right"> |
|||
<StackPanel> |
|||
<TextBlock>Expanded content</TextBlock> |
|||
</StackPanel> |
|||
</Expander> |
|||
</StackPanel> |
|||
</Border> |
|||
</Design.PreviewWith> |
|||
|
|||
<Styles.Resources> |
|||
<Thickness x:Key="ExpanderHeaderPadding">16</Thickness> |
|||
<Thickness x:Key="ExpanderContentPadding">16</Thickness> |
|||
|
|||
<Thickness x:Key="ExpanderBorderThickness">1</Thickness> |
|||
|
|||
<Thickness x:Key="ExpanderDropdownLeftBorderThickness">1,1,0,1</Thickness> |
|||
<Thickness x:Key="ExpanderDropdownUpBorderThickness">1,1,1,0</Thickness> |
|||
<Thickness x:Key="ExpanderDropdownRightBorderThickness">0,1,1,1</Thickness> |
|||
<Thickness x:Key="ExpanderDropdownDownBorderThickness">1,0,1,1</Thickness> |
|||
|
|||
<SolidColorBrush x:Key="ExpanderBackground" Color="{DynamicResource SystemAltMediumHighColor}" /> |
|||
<SolidColorBrush x:Key="ExpanderBorderBrush" Color="{DynamicResource SystemBaseLowColor}" /> |
|||
|
|||
<SolidColorBrush x:Key="ExpanderDropDownBackground" Color="{DynamicResource SystemChromeMediumLowColor}" /> |
|||
<SolidColorBrush x:Key="ExpanderDropDownBorderBrush" Color="{DynamicResource SystemBaseLowColor}" /> |
|||
|
|||
<SolidColorBrush x:Key="ExpanderForeground" Color="{DynamicResource SystemBaseHighColor}" /> |
|||
|
|||
<SolidColorBrush x:Key="ExpanderChevronForeground" Color="{DynamicResource SystemBaseHighColor}" /> |
|||
</Styles.Resources> |
|||
<Style Selector="Expander"> |
|||
<Setter Property="ContentTransition"> |
|||
<Setter.Value> |
|||
<CrossFade Duration="00:00:00.25" /> |
|||
</Setter.Value> |
|||
</Setter> |
|||
<Setter Property="Background" Value="{DynamicResource ExpanderBackground}" /> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource ExpanderBorderThickness}" /> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource ExpanderBorderBrush}" /> |
|||
<Setter Property="Padding" Value="{DynamicResource ExpanderHeaderPadding}" /> |
|||
<Setter Property="HorizontalAlignment" Value="Stretch" /> |
|||
<Setter Property="HorizontalContentAlignment" Value="Left" /> |
|||
<Setter Property="VerticalContentAlignment" Value="Center" /> |
|||
</Style> |
|||
<Style Selector="Expander[ExpandDirection=Down]"> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Background="{TemplateBinding Background}"> |
|||
<Grid RowDefinitions="Auto,*"> |
|||
<ToggleButton Name="PART_toggle" Grid.Row="0" Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" /> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
Grid.Row="1" |
|||
IsVisible="{TemplateBinding IsExpanded}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
Content="{TemplateBinding Content}" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Padding="{TemplateBinding Padding}" /> |
|||
</Grid> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="Expander[IsExpanded=true] /template/ ToggleButton#PART_toggle /template/ ContentPresenter#PART_ContentPresenter"> |
|||
<Setter Property="TextBlock.Foreground" Value="{DynamicResource ToggleButtonForeground}"/> |
|||
</Style> |
|||
<Style Selector="Expander[ExpandDirection=Up]"> |
|||
<Style Selector="Expander"> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Background="{TemplateBinding Background}"> |
|||
<Grid RowDefinitions="*,Auto"> |
|||
<ToggleButton Name="PART_toggle" Grid.Row="1" Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" /> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
Grid.Row="0" |
|||
IsVisible="{TemplateBinding IsExpanded}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
Content="{TemplateBinding Content}" |
|||
<DockPanel> |
|||
<ToggleButton x:Name="ExpanderHeader" |
|||
Padding="{TemplateBinding Padding}" |
|||
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" |
|||
Background="{TemplateBinding Background}" |
|||
BorderBrush="{TemplateBinding BorderBrush}" |
|||
BorderThickness="{TemplateBinding BorderThickness}" |
|||
Content="{TemplateBinding Header}" |
|||
ContentTemplate="{TemplateBinding HeaderTemplate}" |
|||
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" |
|||
IsEnabled="{TemplateBinding IsEnabled}" /> |
|||
<Border x:Name="ExpanderContent" |
|||
Padding="{DynamicResource ExpanderContentPadding}" |
|||
Background="{DynamicResource ExpanderDropDownBackground}" |
|||
BorderBrush="{DynamicResource ExpanderDropDownBorderBrush}" |
|||
IsVisible="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"> |
|||
<ContentPresenter x:Name="PART_ContentPresenter" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Padding="{TemplateBinding Padding}" /> |
|||
</Grid> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="Expander[ExpandDirection=Right]"> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Background="{TemplateBinding Background}"> |
|||
<Grid ColumnDefinitions="Auto,*"> |
|||
<ToggleButton Name="PART_toggle" Grid.Column="0" Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" /> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
Grid.Column="1" |
|||
IsVisible="{TemplateBinding IsExpanded}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
Content="{TemplateBinding Content}" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Padding="{TemplateBinding Padding}" /> |
|||
</Grid> |
|||
</Border> |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" /> |
|||
</Border> |
|||
</DockPanel> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="Expander[ExpandDirection=Left]"> |
|||
|
|||
<Style Selector="Expander /template/ ToggleButton#ExpanderHeader"> |
|||
<Setter Property="HorizontalContentAlignment" Value="Left" /> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border Background="{TemplateBinding Background}"> |
|||
<Border x:Name="ToggleButtonBackground"> |
|||
<Grid ColumnDefinitions="*,Auto"> |
|||
<ToggleButton Name="PART_toggle" Grid.Column="1" Content="{TemplateBinding Header}" IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" /> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
Grid.Column="0" |
|||
IsVisible="{TemplateBinding IsExpanded}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
Content="{TemplateBinding Content}" |
|||
<ContentPresenter x:Name="PART_ContentPresenter" |
|||
Margin="{TemplateBinding Padding}" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Padding="{TemplateBinding Padding}" /> |
|||
</Grid> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="Expander /template/ ToggleButton#PART_toggle"> |
|||
<Setter Property="Template"> |
|||
<ControlTemplate> |
|||
<Border BorderThickness="1" Background="Transparent"> |
|||
<Grid ColumnDefinitions="Auto,Auto"> |
|||
<Border Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center"> |
|||
<Path Fill="{DynamicResource SystemControlForegroundBaseHighBrush}" |
|||
HorizontalAlignment="Center" |
|||
VerticalAlignment="Center" |
|||
Data="M 0 2 L 4 6 L 0 10 Z" /> |
|||
VerticalContentAlignment="Center" |
|||
Background="Transparent" |
|||
BorderBrush="Transparent" |
|||
BorderThickness="0" |
|||
Content="{TemplateBinding Content}" |
|||
ContentTemplate="{TemplateBinding ContentTemplate}" |
|||
TextBlock.Foreground="{DynamicResource ExpanderForeground}" /> |
|||
<Border x:Name="ExpandCollapseChevronBorder" |
|||
Grid.Column="1" |
|||
Width="32" |
|||
Height="32" |
|||
Margin="7" |
|||
RenderTransformOrigin="50%,50%"> |
|||
<Path x:Name="ExpandCollapseChevron" |
|||
HorizontalAlignment="Center" |
|||
VerticalAlignment="Center" |
|||
RenderTransformOrigin="50%,50%" |
|||
Stretch="None" |
|||
Stroke="{DynamicResource ExpanderChevronForeground}" |
|||
StrokeThickness="1" /> |
|||
<Border.RenderTransform> |
|||
<RotateTransform /> |
|||
</Border.RenderTransform> |
|||
</Border> |
|||
<ContentPresenter Name="PART_ContentPresenter" |
|||
Grid.Column="1" |
|||
Background="Transparent" |
|||
Content="{TemplateBinding Content}" |
|||
VerticalAlignment="Center" |
|||
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" |
|||
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" |
|||
Padding="{TemplateBinding Padding}"/> |
|||
</Grid> |
|||
</Border> |
|||
</ControlTemplate> |
|||
</Setter> |
|||
</Style> |
|||
<Style Selector="Expander /template/ ToggleButton#PART_toggle:pointerover /template/ Border"> |
|||
<Setter Property="BorderBrush" Value="{DynamicResource SystemControlHighlightBaseMediumBrush}" /> |
|||
<Style Selector="Expander /template/ ToggleButton#ExpanderHeader:pressed"> |
|||
<Setter Property="RenderTransform" Value="{x:Null}" /> |
|||
</Style> |
|||
<Style Selector="Expander:down:expanded /template/ ToggleButton#PART_toggle /template/ Path"> |
|||
<Setter Property="RenderTransform"> |
|||
<RotateTransform Angle="90" /> |
|||
</Setter> |
|||
|
|||
<Style Selector="Expander:left /template/ ToggleButton#ExpanderHeader, Expander:right /template/ ToggleButton#ExpanderHeader"> |
|||
<Setter Property="VerticalAlignment" Value="Stretch" /> |
|||
</Style> |
|||
<Style Selector="Expander:up:expanded /template/ ToggleButton#PART_toggle /template/ Path"> |
|||
<Setter Property="RenderTransform"> |
|||
<RotateTransform Angle="-90" /> |
|||
</Setter> |
|||
|
|||
|
|||
<Style Selector="Expander /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground"> |
|||
<Setter Property="Background" Value="{TemplateBinding Background}" /> |
|||
<Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" /> |
|||
<Setter Property="BorderThickness" Value="{TemplateBinding BorderThickness}" /> |
|||
</Style> |
|||
<Style Selector="Expander:left:expanded /template/ ToggleButton#PART_toggle /template/ Path"> |
|||
<Setter Property="RenderTransform"> |
|||
<RotateTransform Angle="180" /> |
|||
</Setter> |
|||
|
|||
<Style Selector="Expander:not(:expanded) /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground"> |
|||
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" /> |
|||
</Style> |
|||
<Style Selector="Expander:right /template/ ToggleButton#PART_toggle /template/ Path"> |
|||
<Setter Property="RenderTransform"> |
|||
<RotateTransform Angle="180" /> |
|||
</Setter> |
|||
<Style Selector="Expander:expanded:up /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground"> |
|||
<Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" /> |
|||
</Style> |
|||
<Style Selector="Expander:right:expanded /template/ ToggleButton#PART_toggle /template/ Path"> |
|||
<Setter Property="RenderTransform"> |
|||
<RotateTransform Angle="0" /> |
|||
</Setter> |
|||
<Style Selector="Expander:expanded:up /template/ Border#ExpanderContent"> |
|||
<Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource TopCornerRadiusFilterConverter}}" /> |
|||
</Style> |
|||
<Style Selector="Expander:expanded:down /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground"> |
|||
<Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource TopCornerRadiusFilterConverter}}" /> |
|||
</Style> |
|||
<Style Selector="Expander:expanded:down /template/ Border#ExpanderContent"> |
|||
<Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" /> |
|||
</Style> |
|||
<Style Selector="Expander:expanded:left /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground"> |
|||
<Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}" /> |
|||
</Style> |
|||
<Style Selector="Expander:expanded:left /template/ Border#ExpanderContent"> |
|||
<Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource LeftCornerRadiusFilterConverter}}" /> |
|||
</Style> |
|||
<Style Selector="Expander:expanded:right /template/ ToggleButton#ExpanderHeader /template/ Border#ToggleButtonBackground"> |
|||
<Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource LeftCornerRadiusFilterConverter}}" /> |
|||
</Style> |
|||
<Style Selector="Expander:expanded:right /template/ Border#ExpanderContent"> |
|||
<Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}" /> |
|||
</Style> |
|||
|
|||
<Style Selector="Expander:left /template/ ToggleButton#ExpanderHeader"> |
|||
<Setter Property="DockPanel.Dock" Value="Right" /> |
|||
</Style> |
|||
<Style Selector="Expander:up /template/ ToggleButton#ExpanderHeader"> |
|||
<Setter Property="DockPanel.Dock" Value="Bottom" /> |
|||
</Style> |
|||
<Style Selector="Expander:right /template/ ToggleButton#ExpanderHeader"> |
|||
<Setter Property="DockPanel.Dock" Value="Left" /> |
|||
</Style> |
|||
<Style Selector="Expander:down /template/ ToggleButton#ExpanderHeader"> |
|||
<Setter Property="DockPanel.Dock" Value="Top" /> |
|||
</Style> |
|||
|
|||
|
|||
<Style Selector="Expander:expanded /template/ ToggleButton#ExpanderHeader /template/ Border#ExpandCollapseChevronBorder"> |
|||
<Style.Animations> |
|||
<Animation FillMode="Both" Duration="0:0:0.0625"> |
|||
<KeyFrame Cue="100%"> |
|||
<Setter Property="RotateTransform.Angle" Value="180" /> |
|||
</KeyFrame> |
|||
</Animation> |
|||
</Style.Animations> |
|||
</Style> |
|||
<Style Selector="Expander:not(:expanded) /template/ ToggleButton#ExpanderHeader /template/ Border#ExpandCollapseChevronBorder"> |
|||
<Style.Animations> |
|||
<Animation FillMode="Both" Duration="0:0:0.0625"> |
|||
<KeyFrame Cue="0%"> |
|||
<Setter Property="RotateTransform.Angle" Value="180" /> |
|||
</KeyFrame> |
|||
<KeyFrame Cue="100%"> |
|||
<Setter Property="RotateTransform.Angle" Value="0" /> |
|||
</KeyFrame> |
|||
</Animation> |
|||
</Style.Animations> |
|||
</Style> |
|||
|
|||
<Style Selector="Expander:left /template/ ToggleButton#ExpanderHeader /template/ Path#ExpandCollapseChevron"> |
|||
<Setter Property="Data" Value="M 7 0 L 0 7 L 7 14" /> |
|||
</Style> |
|||
<Style Selector="Expander:up /template/ ToggleButton#ExpanderHeader /template/ Path#ExpandCollapseChevron"> |
|||
<Setter Property="Data" Value="M 0 7 L 7 0 L 14 7" /> |
|||
</Style> |
|||
<Style Selector="Expander:right /template/ ToggleButton#ExpanderHeader /template/ Path#ExpandCollapseChevron"> |
|||
<Setter Property="Data" Value="M 0 0 L 7 7 L 0 14" /> |
|||
</Style> |
|||
<Style Selector="Expander:down /template/ ToggleButton#ExpanderHeader /template/ Path#ExpandCollapseChevron"> |
|||
<Setter Property="Data" Value="M 0 0 L 7 7 L 14 0" /> |
|||
</Style> |
|||
|
|||
|
|||
<Style Selector="Expander:left /template/ Border#ExpanderContent"> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownLeftBorderThickness}" /> |
|||
</Style> |
|||
<Style Selector="Expander:up /template/ Border#ExpanderContent"> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownUpBorderThickness}" /> |
|||
</Style> |
|||
<Style Selector="Expander:right /template/ Border#ExpanderContent"> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownRightBorderThickness}" /> |
|||
</Style> |
|||
<Style Selector="Expander:down /template/ Border#ExpanderContent"> |
|||
<Setter Property="BorderThickness" Value="{DynamicResource ExpanderDropdownDownBorderThickness}" /> |
|||
</Style> |
|||
</Styles> |
|||
|
|||
@ -0,0 +1,23 @@ |
|||
using System; |
|||
using System.Reactive.Linq; |
|||
|
|||
using Avalonia.Animation.Animators; |
|||
using Avalonia.Media; |
|||
|
|||
namespace Avalonia.Animation |
|||
{ |
|||
/// <summary>
|
|||
/// Transition class that handles <see cref="AvaloniaProperty"/> with <see cref="BoxShadows"/> type.
|
|||
/// </summary>
|
|||
public class BoxShadowsTransition : Transition<BoxShadows> |
|||
{ |
|||
private static readonly BoxShadowsAnimator s_animator = new BoxShadowsAnimator(); |
|||
|
|||
/// <inheritdocs/>
|
|||
public override IObservable<BoxShadows> DoTransition(IObservable<double> progress, BoxShadows oldValue, BoxShadows newValue) |
|||
{ |
|||
return progress |
|||
.Select(progress => s_animator.Interpolate(Easing.Ease(progress), oldValue, newValue)); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
using Avalonia.Controls; |
|||
using Avalonia.Media; |
|||
using Avalonia.Rendering; |
|||
|
|||
namespace Avalonia.Visuals.UnitTests.Rendering |
|||
{ |
|||
internal class CustomHitTestBorder : Border, ICustomHitTest |
|||
{ |
|||
public bool HitTest(Point point) |
|||
{ |
|||
// Move hit testing window halfway to the left
|
|||
return Bounds |
|||
.WithX(Bounds.X - Bounds.Width / 2) |
|||
.Contains(point); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue