Add TimeBox Control

This commit is contained in:
LiWenhao
2024-04-06 21:28:14 +08:00
parent e32f59f277
commit 72d962ab45
16 changed files with 960 additions and 0 deletions

View File

@@ -0,0 +1,149 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<Design.PreviewWith>
<StackPanel Margin="20">
<TextBlock Text="Hello World"/>
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type u:TimeBox}" TargetType="{x:Type u:TimeBox}">
<Setter Property="u:TimeBox.Focusable" Value="True"/>
<Setter Property="u:TimeBox.ShowLeadingZero" Value="True"/>
<Setter Property="u:TimeBox.TextAlignment" Value="Center"/>
<Setter Property="u:TimeBox.HorizontalAlignment" Value="Left"/>
<Setter Property="u:TimeBox.CornerRadius" Value="{DynamicResource TimeBoxCornerRadius}" />
<Setter Property="u:TimeBox.Background" Value="{DynamicResource TimeBoxBackground}" />
<Setter Property="u:TimeBox.MinHeight" Value="{DynamicResource TimeBoxDefaultMinHeight}" />
<Setter Property="u:TimeBox.BorderThickness" Value="{DynamicResource TimeBoxBorderThickness}" />
<Setter Property="u:TimeBox.SelectionBrush" Value="{DynamicResource TimeBoxSelectionBrush}" />
<Setter Property="u:TimeBox.SelectionForegroundBrush" Value="{DynamicResource TimeBoxSelectionForeground}" />
<Setter Property="u:TimeBox.CaretBrush" Value="{DynamicResource TimeBoxCaretBrush}" />
<Setter Property="u:TimeBox.Template">
<ControlTemplate TargetType="u:TimeBox">
<Border Name="PART_Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid Width="{TemplateBinding Width}" ColumnDefinitions="1*, Auto, 1*, Auto, 1*, Auto, 1*">
<Border Name="{x:Static u:TimeBox.PART_HourBorder}"
Grid.Column="0"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid>
<TextPresenter Name="{x:Static u:TimeBox.PART_HoursTextPresenter}"
MinWidth="8"
VerticalAlignment="Center"
CaretBrush="{TemplateBinding CaretBrush}"
Cursor="IBeam"
SelectionBrush="{TemplateBinding SelectionBrush}"
SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
TextAlignment="{TemplateBinding TextAlignment}"/>
<Panel Name="{x:Static u:TimeBox.PART_HourDragPanel}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
Cursor="SizeWestEast"/>
</Grid>
</Border>
<TextBlock
Grid.Column="1"
Margin="0,4"
VerticalAlignment="Center"
Focusable="False"
Text=":" />
<Border Name="{x:Static u:TimeBox.PART_MinuteBorder}"
Grid.Column="2"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid>
<TextPresenter Name="{x:Static u:TimeBox.PART_MinuteTextPresenter}"
MinWidth="8"
VerticalAlignment="Center"
CaretBrush="{TemplateBinding CaretBrush}"
Cursor="IBeam"
SelectionBrush="{TemplateBinding SelectionBrush}"
SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
TextAlignment="{TemplateBinding TextAlignment}"/>
<Panel Name="{x:Static u:TimeBox.PART_MinuteDragPanel}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
Cursor="SizeWestEast"/>
</Grid>
</Border>
<TextBlock
Grid.Column="3"
Margin="0,4"
VerticalAlignment="Center"
Focusable="False"
Text=":" />
<Border Name="{x:Static u:TimeBox.PART_SecondBorder}"
Grid.Column="4"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid>
<TextPresenter Name="{x:Static u:TimeBox.PART_SecondTextPresenter}"
MinWidth="8"
VerticalAlignment="Center"
CaretBrush="{TemplateBinding CaretBrush}"
Cursor="IBeam"
SelectionBrush="{TemplateBinding SelectionBrush}"
SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
TextAlignment="{TemplateBinding TextAlignment}"/>
<Panel Name="{x:Static u:TimeBox.PART_SecondDragPanel}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
Cursor="SizeWestEast"/>
</Grid>
</Border>
<TextBlock
Grid.Column="5"
Margin="0,4"
VerticalAlignment="Center"
Focusable="False"
Text="." />
<Border Name="{x:Static u:TimeBox.PART_MilliSecondBorder}"
Grid.Column="6"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid>
<TextPresenter Name="{x:Static u:TimeBox.PART_MillisecondTextPresenter}"
MinWidth="8"
VerticalAlignment="Center"
CaretBrush="{TemplateBinding CaretBrush}"
Cursor="IBeam"
SelectionBrush="{TemplateBinding SelectionBrush}"
SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
TextAlignment="{TemplateBinding TextAlignment}"/>
<Panel Name="{x:Static u:TimeBox.PART_MilliSecondDragPanel}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Transparent"
Cursor="SizeWestEast"/>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:focus-within">
<Setter Property="Border.BorderBrush" Value="{DynamicResource TimeBoxFocusBorderBrush}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="Background" Value="{DynamicResource TimeBoxDisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource SemiColorDisabledText}" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@@ -35,6 +35,7 @@
<ResourceInclude Source="Skeleton.axaml" />
<ResourceInclude Source="TwoTonePathIcon.axaml" />
<ResourceInclude Source="ToolBar.axaml" />
<ResourceInclude Source="TimeBox.axaml"/>
<ResourceInclude Source="VerificationCode.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,21 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<Design.PreviewWith>
<Border Padding="20">
<!-- Add Controls for Previewer Here -->
</Border>
</Design.PreviewWith>
<Style Selector="u|TimeBox /template/ Border#PART_HourBorder:pointerover">
<Setter Property="Background" Value="{DynamicResource TimeBoxPointeroverBackground}"/>
</Style>
<Style Selector="u|TimeBox /template/ Border#PART_MinuteBorder:pointerover">
<Setter Property="Background" Value="{DynamicResource TimeBoxPointeroverBackground}"/>
</Style>
<Style Selector="u|TimeBox /template/ Border#PART_SecondBorder:pointerover">
<Setter Property="Background" Value="{DynamicResource TimeBoxPointeroverBackground}"/>
</Style>
<Style Selector="u|TimeBox /template/ Border#PART_MilliSecondBorder:pointerover">
<Setter Property="Background" Value="{DynamicResource TimeBoxPointeroverBackground}"/>
</Style>
</Styles>

View File

@@ -8,5 +8,6 @@
<StyleInclude Source="ButtonGroup.axaml" />
<StyleInclude Source="Skeleton.axaml" />
<StyleInclude Source="ToolBar.axaml"/>
<StyleInclude Source="TimeBox.axaml"/>
<!-- Add Styles Here -->
</Styles>

View File

@@ -0,0 +1,12 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="TimeBoxBackground" Opacity="0.12" Color="White" />
<SolidColorBrush x:Key="TimeBoxPointeroverBackground" Opacity="0.16" Color="White" />
<SolidColorBrush x:Key="TimeBoxPressedBackground" Opacity="0.2" Color="White" />
<SolidColorBrush x:Key="TimeBoxBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="TimeBoxDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
<SolidColorBrush x:Key="TimeBoxFocusBorderBrush" Color="#FF54A9FF" />
<SolidColorBrush x:Key="TimeBoxSelectionBrush" Color="#FF54A9FF" />
<SolidColorBrush x:Key="TimeBoxSelectionForeground" Color="White" />
<SolidColorBrush x:Key="TimeBoxCaretBrush" Color="White" />
</ResourceDictionary>

View File

@@ -15,5 +15,6 @@
<MergeResourceInclude Source="TagInput.axaml" />
<MergeResourceInclude Source="Timeline.axaml" />
<MergeResourceInclude Source="Skeleton.axaml" />
<MergeResourceInclude Source="TimeBox.axaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,12 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="TimeBoxBackground" Opacity="0.05" Color="#FF2E3238" />
<SolidColorBrush x:Key="TimeBoxPointeroverBackground" Opacity="0.09" Color="#FF2E3238" />
<SolidColorBrush x:Key="TimeBoxPressedBackground" Opacity="0.13" Color="#FF2E3238" />
<SolidColorBrush x:Key="TimeBoxBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="TimeBoxDisabledBackground" Opacity="0.02" Color="#2E3238" />
<SolidColorBrush x:Key="TimeBoxFocusBorderBrush" Color="#FF0077FA" />
<SolidColorBrush x:Key="TimeBoxSelectionBrush" Color="#FF0077FA" />
<SolidColorBrush x:Key="TimeBoxSelectionForeground" Color="White" />
<SolidColorBrush x:Key="TimeBoxCaretBrush" Color="Black" />
</ResourceDictionary>

View File

@@ -15,5 +15,6 @@
<MergeResourceInclude Source="TagInput.axaml" />
<MergeResourceInclude Source="Timeline.axaml" />
<MergeResourceInclude Source="Skeleton.axaml" />
<MergeResourceInclude Source="TimeBox.axaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@@ -0,0 +1,8 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<x:Double x:Key="TimeBoxDefaultMinHeight">32</x:Double>
<x:Double x:Key="TimeBoxSmallMinHeight">24</x:Double>
<x:Double x:Key="TimeBoxLargeMinHeight">40</x:Double>
<Thickness x:Key="TimeBoxBorderThickness">1</Thickness>
<CornerRadius x:Key="TimeBoxCornerRadius">3</CornerRadius>
</ResourceDictionary>

View File

@@ -18,5 +18,6 @@
<MergeResourceInclude Source="Skeleton.axaml" />
<MergeResourceInclude Source="ThemeSelector.axaml" />
<MergeResourceInclude Source="ToolBar.axaml" />
<MergeResourceInclude Source="TimeBox.axaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>