chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Add Banner

Browse Source
This commit is contained in:
rabbitism
2023-02-19 02:15:06 +08:00
parent 6ea1d3fdd6
commit 09ce92cbb9
7 changed files with 129 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
demo/Ursa.Demo/Pages/BannerDemo.axaml
View File

@@ -4,32 +4,49 @@
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:pages="clr-namespace:Ursa.Demo.Pages"
xmlns:u="https://irihi.tech/ursa"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<Design.DataContext>
<pages:BannerDemoViewModel />
</Design.DataContext>
<StackPanel Spacing="20">
<!-- -->
<Grid ColumnDefinitions="*, 300">
<Grid Grid.Column="0">
<Border Margin="20">
<u:Banner
Margin="8"
Classes="Bordered"
Content="Content"
Header="Header" />
<u:Banner
Margin="8"
Classes="Bordered"
Content="C" />
<u:Banner
Margin="8"
HorizontalContentAlignment="Left"
Classes="Bordered"
Content="Content"
Header="Header" />
<u:Banner
Margin="8"
HorizontalContentAlignment="Left"
Classes="Bordered"
Content="C" />
<u:Banner Margin="8" Content="Content" />
Classes.Bordered="{Binding Bordered}"
Content="This is the Demo of Ursa Banner. "
Header="Welcome to Ursa"
Type="{Binding SelectedType}" />
</Border>
</Grid>
<Border Grid.Column="1" VerticalAlignment="Top">
<Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *">
<Label
Grid.Row="0"
Grid.Column="0"
VerticalAlignment="Center"
Content="Type" />
<ComboBox
Grid.Row="0"
Grid.Column="1"
MinWidth="200"
Items="{Binding Types}"
SelectedItem="{Binding SelectedType}" />
<Label
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Center"
Content="Bordered" />
<ToggleSwitch
Grid.Row="1"
Grid.Column="1"
VerticalAlignment="Center"
IsChecked="{Binding Bordered}" />
</Grid>
</Border>
</Grid>
</StackPanel>
</UserControl>

34
demo/Ursa.Demo/Pages/BannerDemo.axaml.cs
View File

@@ -1,6 +1,9 @@
using System.Collections.ObjectModel;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Notifications;
using Avalonia.Markup.Xaml;
using Ursa.Demo.ViewModels;
namespace Ursa.Demo.Pages;
@@ -9,10 +12,37 @@ public partial class BannerDemo : UserControl
public BannerDemo()
{
InitializeComponent();
this.DataContext = new BannerDemoViewModel();
}
}
private void InitializeComponent()
public class BannerDemoViewModel: ViewModelBase
{
AvaloniaXamlLoader.Load(this);
private ObservableCollection<NotificationType> _types;
public ObservableCollection<NotificationType> Types
{
get => _types;
set => SetProperty(ref _types, value);
}
private NotificationType _selectedType;
public NotificationType SelectedType
{
get => _selectedType;
set => SetProperty(ref _selectedType, value);
}
private bool _bordered;
public bool Bordered
{
get => _bordered;
set => SetProperty(ref _bordered, value);
}
public BannerDemoViewModel()
{
Types = new ObservableCollection<NotificationType>() { NotificationType.Information, NotificationType.Warning, NotificationType.Error, NotificationType.Success };
}
}

1
demo/Ursa.Demo/Ursa.Demo.csproj
View File

@@ -23,6 +23,7 @@
<!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview5" />
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
<PackageReference Include="Semi.Avalonia" Version="0.1.0-preview5.1" />
<PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
</ItemGroup>

51
src/Ursa.Themes.Semi/Controls/Banner.axaml
View File

@@ -4,6 +4,8 @@
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type u:Banner}" TargetType="u:Banner">
<Setter Property="u:Banner.BorderThickness" Value="{DynamicResource BannerBorderThickness}" />
<Setter Property="u:Banner.BorderBrush" Value="Transparent" />
<Setter Property="u:Banner.HorizontalContentAlignment" Value="Center" />
<Setter Property="u:Banner.Template">
<ControlTemplate TargetType="u:Banner">
@@ -23,6 +25,7 @@
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Margin="{DynamicResource BannerIconMargin}"
VerticalAlignment="Top"
IsVisible="{TemplateBinding ShowIcon}">
<ContentPresenter Content="{TemplateBinding Icon}" />
@@ -50,32 +53,70 @@
<Button
Name="{x:Static u:Banner.PART_CloseButton}"
Grid.Column="1"
Padding="4"
Cursor="Hand"
IsVisible="{TemplateBinding CanClose}"
Theme="{DynamicResource BorderlessButton}">
<PathIcon
Width="12"
Height="12"
Data="{DynamicResource BannerCloseIconGeometry}"
Foreground="Black" />
Foreground="{DynamicResource BannerCloseButtonForeground}" />
</Button>
</Grid>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^[Type=Information]">
<Style Selector="^.Bordered /template/ Border#PART_Container">
<Setter Property="Border.CornerRadius" Value="{DynamicResource BannerCornerRadius}" />
<Setter Property="BorderBrush" Value="{DynamicResource BannerInformationBorderBrush}" />
</Style>
<Style Selector="^ /template/ Border#PART_Container">
<Setter Property="Background" Value="{DynamicResource BannerInformationBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource BannerInformationBorderBrush}" />
</Style>
<Style Selector="^ /template/ PathIcon#PART_BuildInIcon">
<Setter Property="PathIcon.Data" Value="{DynamicResource BannerInformationIconGeometry}" />
<Setter Property="PathIcon.Foreground" Value="{DynamicResource BannerInformationBorderBrush}" />
</Style>
</Style>
<Style Selector="^.Bordered">
<Style Selector="^ /template/ Border#PART_Container">
<Style Selector="^[Type=Warning]">
<Style Selector="^.Bordered /template/ Border#PART_Container">
<Setter Property="Border.CornerRadius" Value="{DynamicResource BannerCornerRadius}" />
<Setter Property="Border.BorderThickness" Value="{DynamicResource BannerBorderThickness}" />
<Setter Property="BorderBrush" Value="{DynamicResource BannerWarningBorderBrush}" />
</Style>
<Style Selector="^ /template/ Border#PART_Container">
<Setter Property="Background" Value="{DynamicResource BannerWarningBackground}" />
</Style>
<Style Selector="^ /template/ PathIcon#PART_BuildInIcon">
<Setter Property="PathIcon.Data" Value="{DynamicResource BannerWarningIconGeometry}" />
<Setter Property="PathIcon.Foreground" Value="{DynamicResource BannerWarningBorderBrush}" />
</Style>
</Style>
<Style Selector="^[Type=Error]">
<Style Selector="^.Bordered /template/ Border#PART_Container">
<Setter Property="Border.CornerRadius" Value="{DynamicResource BannerCornerRadius}" />
<Setter Property="BorderBrush" Value="{DynamicResource BannerErrorBorderBrush}" />
</Style>
<Style Selector="^ /template/ Border#PART_Container">
<Setter Property="Background" Value="{DynamicResource BannerErrorBackground}" />
</Style>
<Style Selector="^ /template/ PathIcon#PART_BuildInIcon">
<Setter Property="PathIcon.Data" Value="{DynamicResource BannerErrorIconGeometry}" />
<Setter Property="PathIcon.Foreground" Value="{DynamicResource BannerErrorBorderBrush}" />
</Style>
</Style>
<Style Selector="^[Type=Success]">
<Style Selector="^.Bordered /template/ Border#PART_Container">
<Setter Property="Border.CornerRadius" Value="{DynamicResource BannerCornerRadius}" />
<Setter Property="BorderBrush" Value="{DynamicResource BannerSuccessBorderBrush}" />
</Style>
<Style Selector="^ /template/ Border#PART_Container">
<Setter Property="Background" Value="{DynamicResource BannerSuccessBackground}" />
</Style>
<Style Selector="^ /template/ PathIcon#PART_BuildInIcon">
<Setter Property="PathIcon.Data" Value="{DynamicResource BannerSuccessIconGeometry}" />
<Setter Property="PathIcon.Foreground" Value="{DynamicResource BannerSuccessBorderBrush}" />
</Style>
</Style>
</ControlTheme>

8
src/Ursa.Themes.Semi/Themes/Light/Banner.axaml
View File

@@ -2,4 +2,12 @@
<!-- Add Resources Here -->
<SolidColorBrush x:Key="BannerInformationBackground" Color="#EAF5FF" />
<SolidColorBrush x:Key="BannerInformationBorderBrush" Color="#0077FA" />
<SolidColorBrush x:Key="BannerWarningBackground" Color="#FFF8EA" />
<SolidColorBrush x:Key="BannerWarningBorderBrush" Color="#FC8800" />
<SolidColorBrush x:Key="BannerErrorBackground" Color="#FEF2ED" />
<SolidColorBrush x:Key="BannerErrorBorderBrush" Color="#F93920" />
<SolidColorBrush x:Key="BannerSuccessBackground" Color="#ECF7EC" />
<SolidColorBrush x:Key="BannerSuccessBorderBrush" Color="#3BB346" />
<SolidColorBrush x:Key="BannerCloseButtonForeground" Opacity="0.62" Color="#1C1F23" />
</ResourceDictionary>

1
src/Ursa.Themes.Semi/Themes/Shared/Banner.axaml
View File

@@ -8,4 +8,5 @@
<CornerRadius x:Key="BannerCornerRadius">3</CornerRadius>
<Thickness x:Key="BannerBorderThickness">1</Thickness>
<Thickness x:Key="BannerIconMargin">0 0 12 0</Thickness>
</ResourceDictionary>

1
src/Ursa.Themes.Semi/Ursa.Themes.Semi.csproj
View File

@@ -9,7 +9,6 @@
<ItemGroup>
<PackageReference Include="Avalonia" Version="11.0.0-preview5" />
<PackageReference Include="Semi.Avalonia" Version="0.1.0-preview5" />
<PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
</ItemGroup>