Merge pull request #10 from irihitech/9-divider

9 divider
This commit is contained in:
Dong Bin
2023-03-22 22:11:52 +08:00
committed by GitHub
12 changed files with 230 additions and 9 deletions

View File

@@ -0,0 +1,30 @@
<UserControl
x:Class="Ursa.Demo.Pages.DividerDemo"
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"
xmlns:u="https://irihi.tech/ursa"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<StackPanel Spacing="20">
<u:Divider>Center</u:Divider>
<u:Divider HorizontalContentAlignment="Left">Left</u:Divider>
<u:Divider HorizontalContentAlignment="Right">Right</u:Divider>
<u:Divider HorizontalContentAlignment="Center">Center</u:Divider>
<u:Divider HorizontalContentAlignment="Stretch">Stretch</u:Divider>
<u:Divider />
<u:Divider Orientation="Vertical" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="A" />
<u:Divider Margin="12,0" Orientation="Vertical" />
<TextBlock Text="A" />
<u:Divider Orientation="Vertical" />
<TextBlock Text="A" />
</StackPanel>
<Grid Height="100" Background="LightGreen">
<u:Divider HorizontalContentAlignment="Stretch">Stretch</u:Divider>
</Grid>
</StackPanel>
</UserControl>

View File

@@ -0,0 +1,18 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
namespace Ursa.Demo.Pages;
public partial class DividerDemo : UserControl
{
public DividerDemo()
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}

View File

@@ -29,6 +29,9 @@
<TabItem Header="Banner">
<pages:BannerDemo />
</TabItem>
<TabItem Header="Divider">
<pages:DividerDemo />
</TabItem>
<TabItem Header="IPv4Box">
<pages:IPv4BoxDemo />
</TabItem>

View File

@@ -0,0 +1,118 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<Design.PreviewWith>
<StackPanel Spacing="20">
<u:Divider Content="Hello" />
</StackPanel>
</Design.PreviewWith>
<!-- Add Resources Here -->
<ControlTheme x:Key="DividerLeftLine" TargetType="{x:Type Rectangle}">
<Setter Property="Rectangle.Fill" Value="{DynamicResource DividerBorderBrush}" />
<Setter Property="Rectangle.Height" Value="{DynamicResource SizeDividerWidth}" />
<Setter Property="Rectangle.MinWidth" Value="{DynamicResource SizeDividerLeftMinWidth}" />
<Setter Property="VerticalAlignment" Value="Center" />
</ControlTheme>
<ControlTheme x:Key="DividerRightLine" TargetType="{x:Type Rectangle}">
<Setter Property="Rectangle.Fill" Value="{DynamicResource DividerBorderBrush}" />
<Setter Property="Rectangle.Height" Value="{DynamicResource SizeDividerWidth}" />
<Setter Property="Rectangle.MinWidth" Value="{DynamicResource SizeDividerRightMinWidth}" />
<Setter Property="VerticalAlignment" Value="Center" />
</ControlTheme>
<ControlTheme x:Key="DividerContentPresenter" TargetType="{x:Type ContentPresenter}">
<Setter Property="ContentPresenter.Content" Value="{TemplateBinding Content}" />
<Setter Property="ContentPresenter.Background" Value="{TemplateBinding Background}" />
<Setter Property="TextElement.Foreground" Value="{TemplateBinding Foreground}" />
<Setter Property="ContentPresenter.ContentTemplate" Value="{TemplateBinding ContentTemplate}" />
<Setter Property="TextElement.FontFamily" Value="{TemplateBinding FontFamily}" />
<Setter Property="TextElement.FontWeight" Value="{TemplateBinding FontWeight}" />
<Setter Property="TextElement.FontSize" Value="{TemplateBinding FontSize}" />
<Setter Property="ContentPresenter.IsVisible" Value="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNotNull}}" />
<Setter Property="ContentPresenter.Margin" Value="{DynamicResource ThicknessDividerTextMargin}" />
<Setter Property="VerticalAlignment" Value="Center" />
</ControlTheme>
<ControlTheme x:Key="{x:Type u:Divider}" TargetType="u:Divider">
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Foreground" Value="{DynamicResource ColorDividerForeground}" />
<Setter Property="FontFamily" Value="{DynamicResource FontRegularFontFamily}" />
<!-- FontSize to be updated to dynamic resource -->
<Setter Property="FontSize" Value="14" />
<Style Selector="^[Orientation=Horizontal]">
<Style Selector="^[HorizontalContentAlignment=Left]">
<Setter Property="Template">
<ControlTemplate>
<Grid
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
ColumnDefinitions="Auto,Auto,*">
<Rectangle Theme="{StaticResource DividerLeftLine}" />
<ContentPresenter Grid.Column="1" Theme="{StaticResource DividerContentPresenter}" />
<Rectangle Grid.Column="2" Theme="{StaticResource DividerRightLine}" />
</Grid>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="^[HorizontalContentAlignment=Right]">
<Setter Property="Template">
<ControlTemplate>
<Grid
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
ColumnDefinitions="*,Auto,Auto">
<Rectangle Theme="{StaticResource DividerLeftLine}" />
<ContentPresenter Grid.Column="1" Theme="{StaticResource DividerContentPresenter}" />
<Rectangle Grid.Column="2" Theme="{StaticResource DividerRightLine}" />
</Grid>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="^[HorizontalContentAlignment=Center]">
<Setter Property="Template">
<ControlTemplate>
<Grid
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
ColumnDefinitions="*,Auto,*">
<Rectangle Theme="{StaticResource DividerLeftLine}" />
<ContentPresenter Grid.Column="1" Theme="{StaticResource DividerContentPresenter}" />
<Rectangle Grid.Column="2" Theme="{StaticResource DividerRightLine}" />
</Grid>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="^[HorizontalContentAlignment=Stretch]">
<Setter Property="Template">
<ControlTemplate>
<Grid
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
ColumnDefinitions="*,Auto,*">
<Rectangle Theme="{StaticResource DividerLeftLine}" />
<ContentPresenter Grid.Column="1" Theme="{StaticResource DividerContentPresenter}" />
<Rectangle Grid.Column="2" Theme="{StaticResource DividerRightLine}" />
</Grid>
</ControlTemplate>
</Setter>
</Style>
</Style>
<Style Selector="^[Orientation=Vertical]">
<Setter Property="Height" Value="{DynamicResource SizeDividerVerticalHeight}" />
<Setter Property="Margin" Value="{DynamicResource ThicknessDividerVerticalMargin}" />
<Setter Property="Width" Value="{DynamicResource SizeDividerWidth}" />
<Setter Property="Template">
<ControlTemplate>
<Rectangle
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Fill="{DynamicResource DividerBorderBrush}" />
</ControlTemplate>
</Setter>
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@@ -3,6 +3,7 @@
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" />
<ResourceInclude Source="Divider.axaml" />
<ResourceInclude Source="IPv4Box.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="DividerBorderBrush" Opacity="0.2" Color="White" />
</ResourceDictionary>

View File

@@ -1,8 +1,9 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" />
<ResourceInclude Source="IPv4Box.axaml" />
<MergeResourceInclude Source="Badge.axaml" />
<MergeResourceInclude Source="Banner.axaml" />
<MergeResourceInclude Source="Divider.axaml" />
<MergeResourceInclude Source="IPv4Box.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="DividerBorderBrush" Opacity="0.2" Color="#1C1F23" />
</ResourceDictionary>

View File

@@ -1,8 +1,9 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" />
<ResourceInclude Source="IPv4Box.axaml" />
<MergeResourceInclude Source="Badge.axaml" />
<MergeResourceInclude Source="Banner.axaml" />
<MergeResourceInclude Source="Divider.axaml" />
<MergeResourceInclude Source="IPv4Box.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,14 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<x:Double x:Key="SizeDividerVerticalHeight">20</x:Double>
<x:Double x:Key="SizeDividerVerticaMinHeight">0</x:Double>
<x:Double x:Key="SizeDividerLeftWidth">40</x:Double>
<x:Double x:Key="SizeDividerRightWidth">40</x:Double>
<x:Double x:Key="SizeDividerLeftMinWidth">20</x:Double>
<x:Double x:Key="SizeDividerRightMinWidth">20</x:Double>
<x:Double x:Key="SizeDividerWidth">1</x:Double>
<Thickness x:Key="ThicknessDividerVerticalMargin">1,0</Thickness>
<Thickness x:Key="ThicknessDividerHorizontalMargin">0,1</Thickness>
<Thickness x:Key="ThicknessDividerTextMargin">8,0</Thickness>
</ResourceDictionary>

View File

@@ -1,8 +1,9 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" />
<ResourceInclude Source="IPv4Box.axaml" />
<MergeResourceInclude Source="Badge.axaml" />
<MergeResourceInclude Source="Banner.axaml" />
<MergeResourceInclude Source="Divider.axaml" />
<MergeResourceInclude Source="IPv4Box.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,26 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Layout;
namespace Ursa.Controls;
public class Divider : ContentControl
{
static Divider()
{
HorizontalContentAlignmentProperty.OverrideDefaultValue<Divider>(HorizontalAlignment.Center);
}
public Divider()
{
HorizontalContentAlignment = HorizontalAlignment.Center;
}
public static readonly StyledProperty<Orientation> OrientationProperty = AvaloniaProperty.Register<Divider, Orientation>(
nameof(Orientation));
public Orientation Orientation
{
get => GetValue(OrientationProperty);
set => SetValue(OrientationProperty, value);
}
}