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

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

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

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

@@ -1,6 +1,9 @@
using System.Collections.ObjectModel;
using Avalonia; using Avalonia;
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Controls.Notifications;
using Avalonia.Markup.Xaml; using Avalonia.Markup.Xaml;
using Ursa.Demo.ViewModels;
namespace Ursa.Demo.Pages; namespace Ursa.Demo.Pages;
@@ -9,10 +12,37 @@ public partial class BannerDemo : UserControl
public BannerDemo() public BannerDemo()
{ {
InitializeComponent(); InitializeComponent();
this.DataContext = new BannerDemoViewModel();
}
}
public class BannerDemoViewModel: ViewModelBase
{
private ObservableCollection<NotificationType> _types;
public ObservableCollection<NotificationType> Types
{
get => _types;
set => SetProperty(ref _types, value);
} }
private void InitializeComponent() private NotificationType _selectedType;
public NotificationType SelectedType
{ {
AvaloniaXamlLoader.Load(this); 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.--> <!--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 Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview5" />
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" /> <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" /> <PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
</ItemGroup> </ItemGroup>

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

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

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

@@ -2,4 +2,12 @@
<!-- Add Resources Here --> <!-- Add Resources Here -->
<SolidColorBrush x:Key="BannerInformationBackground" Color="#EAF5FF" /> <SolidColorBrush x:Key="BannerInformationBackground" Color="#EAF5FF" />
<SolidColorBrush x:Key="BannerInformationBorderBrush" Color="#0077FA" /> <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> </ResourceDictionary>

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

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

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

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