tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #5926 from MarchingCube/devtools-layout-ux 

Cleanup layout visualizer and improve UX.
release/0.10.5
Dariusz Komosiński 5 years ago
committed by Dan Walmsley
parent
bf6355e032
commit
783498de7c
3 changed files with 145 additions and 91 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlLayoutViewModel.cs
  2. 186
      src/Avalonia.Diagnostics/Diagnostics/Views/ControlDetailsView.xaml
  3. 21
      src/Avalonia.Diagnostics/Diagnostics/Views/ThicknessEditor.cs

29
src/Avalonia.Diagnostics/Diagnostics/ViewModels/ControlLayoutViewModel.cs
View File

@ -1,4 +1,6 @@
using System;
using System.ComponentModel; using System.ComponentModel;
using System.Text;
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Layout; using Avalonia.Layout;
using Avalonia.VisualTree; using Avalonia.VisualTree;
@ -95,12 +97,27 @@ namespace Avalonia.Diagnostics.ViewModels
{ {
string CreateConstraintInfo(StyledProperty<double> minProperty, StyledProperty<double> maxProperty) string CreateConstraintInfo(StyledProperty<double> minProperty, StyledProperty<double> maxProperty)
{ {
if (ao.IsSet(minProperty) || ao.IsSet(maxProperty)) bool hasMin = ao.IsSet(minProperty);
bool hasMax = ao.IsSet(maxProperty);
if (hasMin || hasMax)
{ {
var minValue = ao.GetValue(minProperty); var builder = new StringBuilder();
var maxValue = ao.GetValue(maxProperty);
if (hasMin)
{
var minValue = ao.GetValue(minProperty);
builder.AppendFormat("Min: {0}", Math.Round(minValue, 2));
builder.AppendLine();
}
if (hasMax)
{
var maxValue = ao.GetValue(maxProperty);
builder.AppendFormat("Max: {0}", Math.Round(maxValue, 2));
}
return $"{minValue} < size < {maxValue}"; return builder.ToString();
} }
return null; return null;
@ -183,8 +200,8 @@ namespace Avalonia.Diagnostics.ViewModels
{ {
var size = _control.Bounds; var size = _control.Bounds;
Width = size.Width; Width = Math.Round(size.Width, 2);
Height = size.Height; Height = Math.Round(size.Height, 2);
} }
} }
} }

186
src/Avalonia.Diagnostics/Diagnostics/Views/ControlDetailsView.xaml
View File

@ -8,11 +8,16 @@
<UserControl.Resources> <UserControl.Resources>
<SolidColorBrush x:Key="ThicknessBorderBrush" Color="#666666" /> <SolidColorBrush x:Key="ThicknessBorderBrush" Color="#666666" />
<SolidColorBrush x:Key="HighlightBorderBrush" Color="CornflowerBlue" />
<SolidColorBrush x:Key="SizeGuidelineBrush" Color="#333333" /> <SolidColorBrush x:Key="SizeGuidelineBrush" Color="#333333" />
<SolidColorBrush x:Key="MarginBackgroundBrush" Color="#D78965" /> <SolidColorBrush x:Key="MarginBackgroundBrush" Color="#D78965" />
<SolidColorBrush x:Key="MarginHighlightBrush" Color="#EA966F" />
<SolidColorBrush x:Key="BorderBackgroundBrush" Color="#E3C381" /> <SolidColorBrush x:Key="BorderBackgroundBrush" Color="#E3C381" />
<SolidColorBrush x:Key="BorderHighlightBrush" Color="#EFCD88" />
<SolidColorBrush x:Key="PaddingBackgroundBrush" Color="#B8C47F" /> <SolidColorBrush x:Key="PaddingBackgroundBrush" Color="#B8C47F" />
<SolidColorBrush x:Key="PaddingHighlightBrush" Color="#CEDA8E" />
<SolidColorBrush x:Key="SizeBackgroundBrush" Color="#88B2BD" /> <SolidColorBrush x:Key="SizeBackgroundBrush" Color="#88B2BD" />
<SolidColorBrush x:Key="SizeHighlightBrush" Color="#9ED0DC" />
<conv:BoolToOpacityConverter x:Key="BoolToOpacity" Opacity="0.6"/> <conv:BoolToOpacityConverter x:Key="BoolToOpacity" Opacity="0.6"/>
</UserControl.Resources> </UserControl.Resources>
@ -24,43 +29,60 @@
<Setter Property="BorderBrush" Value="{StaticResource ThicknessBorderBrush}" /> <Setter Property="BorderBrush" Value="{StaticResource ThicknessBorderBrush}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<Border <Panel>
Background="{TemplateBinding Background}" <Rectangle x:Name="PART_Background" Classes.no-content-pointerover="{Binding !#PART_ContentPresenter.IsPointerOver}" />
BorderBrush="{TemplateBinding BorderBrush}" <Border
BorderThickness="{TemplateBinding BorderThickness}"> x:Name="PART_Border"
<Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="Auto,*,Auto"> Classes.no-content-pointerover="{Binding !#PART_ContentPresenter.IsPointerOver}"
<Grid.Styles> BorderBrush="{TemplateBinding BorderBrush}"
<Style Selector="TextBox.thickness-edit"> BorderThickness="{TemplateBinding BorderThickness}">
<Setter Property="Background" Value="Transparent" /> <Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="Auto,*,Auto">
<Setter Property="BorderThickness" Value="0" /> <Grid.Styles>
<Setter Property="Margin" Value="2" /> <Style Selector="TextBox.thickness-edit">
<Setter Property="HorizontalAlignment" Value="Stretch" /> <Setter Property="Background" Value="Transparent" />
<Setter Property="VerticalAlignment" Value="Stretch" /> <Setter Property="BorderThickness" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="Margin" Value="2" />
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="(ScrollViewer.HorizontalScrollBarVisibility)" Value="Disabled" /> <Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="(ScrollViewer.VerticalScrollBarVisibility)" Value="Disabled" /> <Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="IsVisible" Value="{Binding $parent[local:ThicknessEditor].IsPresent}" /> <Setter Property="VerticalContentAlignment" Value="Center" />
</Style> <Setter Property="(ScrollViewer.HorizontalScrollBarVisibility)" Value="Disabled" />
</Grid.Styles> <Setter Property="(ScrollViewer.VerticalScrollBarVisibility)" Value="Disabled" />
<TextBlock IsVisible="{TemplateBinding IsPresent}" Margin="4,0,0,0" Text="{TemplateBinding Header}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" /> <Setter Property="IsVisible" Value="{Binding $parent[local:ThicknessEditor].IsPresent}" />
<TextBox Grid.Row="1" Grid.Column="0" Text="{Binding Left, RelativeSource={RelativeSource TemplatedParent}}" Classes="thickness-edit" /> </Style>
<TextBox x:Name="Right" Grid.Row="0" Grid.Column="1" Text="{Binding Top, RelativeSource={RelativeSource TemplatedParent}}" Classes="thickness-edit" /> </Grid.Styles>
<TextBox Grid.Row="1" Grid.Column="2" Text="{Binding Right, RelativeSource={RelativeSource TemplatedParent}}" Classes="thickness-edit" /> <TextBlock IsVisible="{TemplateBinding IsPresent}" Margin="4,0,0,0" Text="{TemplateBinding Header}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Bottom, RelativeSource={RelativeSource TemplatedParent}}" Classes="thickness-edit" /> <TextBox Grid.Row="1" Grid.Column="0" Text="{Binding Left, RelativeSource={RelativeSource TemplatedParent}}" Classes="thickness-edit" />
<ContentPresenter Grid.Row="1" Grid.Column="1" <TextBox x:Name="Right" Grid.Row="0" Grid.Column="1" Text="{Binding Top, RelativeSource={RelativeSource TemplatedParent}}" Classes="thickness-edit" />
Name="PART_ContentPresenter" <TextBox Grid.Row="1" Grid.Column="2" Text="{Binding Right, RelativeSource={RelativeSource TemplatedParent}}" Classes="thickness-edit" />
ContentTemplate="{TemplateBinding ContentTemplate}" <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Bottom, RelativeSource={RelativeSource TemplatedParent}}" Classes="thickness-edit" />
Content="{TemplateBinding Content}" <ContentPresenter Grid.Row="1" Grid.Column="1"
Padding="{TemplateBinding Padding}" Name="PART_ContentPresenter"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" /> Content="{TemplateBinding Content}"
</Grid> Padding="{TemplateBinding Padding}"
</Border> VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</Border>
</Panel>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
</Style> </Style>
<Style Selector="local|ThicknessEditor /template/ Rectangle#PART_Background">
<Setter Property="Fill" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" />
</Style>
<Style Selector="local|ThicknessEditor:pointerover /template/ Rectangle#PART_Background.no-content-pointerover">
<Setter Property="Fill" Value="{Binding Highlight, RelativeSource={RelativeSource TemplatedParent}}" />
</Style>
<Style Selector="local|ThicknessEditor:pointerover /template/ Border#PART_Border.no-content-pointerover">
<Setter Property="BorderBrush" Value="{StaticResource HighlightBorderBrush}" />
</Style>
<Style Selector="local|ThicknessEditor[IsPresent=False]"> <Style Selector="local|ThicknessEditor[IsPresent=False]">
<Setter Property="BorderThickness" Value="0" /> <Setter Property="BorderThickness" Value="0" />
</Style> </Style>
@ -110,47 +132,67 @@
<Grid Grid.Column="2" RowDefinitions="Auto,*, Auto,*,Auto" > <Grid Grid.Column="2" RowDefinitions="Auto,*, Auto,*,Auto" >
<TextBlock Grid.Row="0" Text="Layout Visualizer" Margin="4" /> <TextBlock Grid.Row="0" Text="Layout Visualizer" Margin="4" />
<Grid Grid.Row="1" x:Name="LayoutRoot" Margin="8,0,8,8" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto"> <Viewbox Grid.Row="1" StretchDirection="DownOnly" >
<Grid Grid.Row="1" x:Name="LayoutRoot" Margin="8,0,8,8" RowDefinitions="Auto,Auto" ColumnDefinitions="Auto,Auto">
<Border x:Name="VerticalSize" Grid.Row="0" Grid.Column="1" >
<TextBlock VerticalAlignment="Center" FontWeight="Bold" <Grid.Styles>
TextDecorations="{Binding Layout.HeightConstraint, Converter={x:Static local:Converters.HasConstraintConverter}}" <Style Selector="TextBlock.with-constraint">
Text="{Binding Layout.Height}" <Setter Property="TextDecorations" Value="Underline" />
ToolTip.Tip="{Binding Layout.HeightConstraint}" /> </Style>
</Border>
</Grid.Styles>
<Border x:Name="HorizontalSize" Grid.Row="1" Grid.Column="0" >
<TextBlock HorizontalAlignment="Center" FontWeight="Bold" <Border x:Name="VerticalSize" Grid.Row="0" Grid.Column="1" >
TextDecorations="{Binding Layout.WidthConstraint, Converter={x:Static local:Converters.HasConstraintConverter}}" <TextBlock VerticalAlignment="Center" FontWeight="Bold"
Text="{Binding Layout.Width}" Classes.with-constraint="{Binding Layout.HeightConstraint, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
ToolTip.Tip="{Binding Layout.WidthConstraint}" /> Text="{Binding Layout.Height}"
</Border> ToolTip.Tip="{Binding Layout.HeightConstraint}" />
</Border>
<local:ThicknessEditor Grid.Row="0" Grid.Column="0" Header="margin" VerticalAlignment="Top" HorizontalAlignment="Center" Background="{StaticResource MarginBackgroundBrush}" Thickness="{Binding Layout.MarginThickness}">
<local:ThicknessEditor x:Name="BorderArea" Header="border" Background="{StaticResource BorderBackgroundBrush}" Thickness="{Binding Layout.BorderThickness}" IsPresent="{Binding Layout.HasBorder}"> <Border x:Name="HorizontalSize" Grid.Row="1" Grid.Column="0" >
<local:ThicknessEditor x:Name="PaddingArea" Header="padding" Background="{StaticResource PaddingBackgroundBrush}" Thickness="{Binding Layout.PaddingThickness}" IsPresent="{Binding Layout.HasPadding}"> <TextBlock HorizontalAlignment="Center" FontWeight="Bold"
<Border x:Name="ContentArea" BorderThickness="1" BorderBrush="{StaticResource ThicknessBorderBrush}" MinWidth="100" MinHeight="16" Background="{StaticResource SizeBackgroundBrush}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"> Classes.with-constraint="{Binding Layout.WidthConstraint, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
<TextBlock Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="content" /> Text="{Binding Layout.Width}"
</Border> ToolTip.Tip="{Binding Layout.WidthConstraint}" />
</Border>
<local:ThicknessEditor Grid.Row="0" Grid.Column="0" Header="margin" VerticalAlignment="Top" HorizontalAlignment="Center" Background="{StaticResource MarginBackgroundBrush}" Highlight="{StaticResource MarginHighlightBrush}" Thickness="{Binding Layout.MarginThickness}">
<local:ThicknessEditor x:Name="BorderArea" Header="border" Background="{StaticResource BorderBackgroundBrush}" Highlight="{StaticResource BorderHighlightBrush}" Thickness="{Binding Layout.BorderThickness}" IsPresent="{Binding Layout.HasBorder}">
<local:ThicknessEditor x:Name="PaddingArea" Header="padding" Background="{StaticResource PaddingBackgroundBrush}" Highlight="{StaticResource PaddingHighlightBrush}" Thickness="{Binding Layout.PaddingThickness}" IsPresent="{Binding Layout.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="{StaticResource ThicknessBorderBrush}" />
</Style>
<Style Selector="Border:pointerover">
<Setter Property="Background" Value="{StaticResource SizeHighlightBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource HighlightBorderBrush}" />
</Style>
</Border.Styles>
<TextBlock Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="content" />
</Border>
</local:ThicknessEditor>
</local:ThicknessEditor> </local:ThicknessEditor>
</local:ThicknessEditor> </local:ThicknessEditor>
</local:ThicknessEditor>
<Canvas Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2">
<Canvas Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2"> <Canvas.Styles>
<Canvas.Styles> <Style Selector="Rectangle">
<Style Selector="Rectangle"> <Setter Property="StrokeDashArray" Value="1,3" />
<Setter Property="StrokeDashArray" Value="1,3" /> <Setter Property="Stroke" Value="{StaticResource SizeGuidelineBrush}" />
<Setter Property="Stroke" Value="{StaticResource SizeGuidelineBrush}" /> <Setter Property="StrokeThickness" Value="1" />
<Setter Property="StrokeThickness" Value="1" /> <Setter Property="IsHitTestVisible" Value="False" />
</Style> </Style>
</Canvas.Styles> </Canvas.Styles>
<Rectangle x:Name="HorizontalSizeBegin" /> <Rectangle x:Name="HorizontalSizeBegin" />
<Rectangle x:Name="HorizontalSizeEnd" /> <Rectangle x:Name="HorizontalSizeEnd" />
<Rectangle x:Name="VerticalSizeBegin" /> <Rectangle x:Name="VerticalSizeBegin" />
<Rectangle x:Name="VerticalSizeEnd" /> <Rectangle x:Name="VerticalSizeEnd" />
</Canvas> </Canvas>
</Grid> </Grid>
</Viewbox>
<Grid Grid.Row="2" Margin="4" RowDefinitions="Auto,Auto"> <Grid Grid.Row="2" Margin="4" RowDefinitions="Auto,Auto">

21
src/Avalonia.Diagnostics/Diagnostics/Views/ThicknessEditor.cs
View File

@ -1,21 +1,9 @@
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Data; using Avalonia.Data;
using Avalonia.Data.Converters;
using Avalonia.Media; using Avalonia.Media;
namespace Avalonia.Diagnostics.Views namespace Avalonia.Diagnostics.Views
{ {
internal static class Converters
{
public static IValueConverter HasConstraintConverter =
new FuncValueConverter<object, TextDecorationCollection>(ConvertToDecoration);
private static TextDecorationCollection ConvertToDecoration(object arg)
{
return arg != null ? TextDecorations.Underline : null;
}
}
internal class ThicknessEditor : ContentControl internal class ThicknessEditor : ContentControl
{ {
public static readonly DirectProperty<ThicknessEditor, Thickness> ThicknessProperty = public static readonly DirectProperty<ThicknessEditor, Thickness> ThicknessProperty =
@ -44,6 +32,14 @@ namespace Avalonia.Diagnostics.Views
AvaloniaProperty.RegisterDirect<ThicknessEditor, double>(nameof(Bottom), o => o.Bottom, AvaloniaProperty.RegisterDirect<ThicknessEditor, double>(nameof(Bottom), o => o.Bottom,
(o, v) => o.Bottom = v); (o, v) => o.Bottom = v);
public static readonly StyledProperty<IBrush> HighlightProperty =
AvaloniaProperty.Register<ThicknessEditor, IBrush>(nameof(Highlight));
public IBrush Highlight
{
get => GetValue(HighlightProperty);
set => SetValue(HighlightProperty, value);
}
private Thickness _thickness; private Thickness _thickness;
private string _header; private string _header;
@ -52,7 +48,6 @@ namespace Avalonia.Diagnostics.Views
private double _top; private double _top;
private double _right; private double _right;
private double _bottom; private double _bottom;
private bool _isUpdatingThickness; private bool _isUpdatingThickness;
public Thickness Thickness public Thickness Thickness

Write Preview
Loading…
Cancel
Save