feat: redesign Banner.
This commit is contained in:
Zhang Dian
@@ -13,28 +13,27 @@
|
||||
</Design.DataContext>
|
||||
<StackPanel Spacing="20">
|
||||
<Grid ColumnDefinitions="*, 300">
|
||||
<Grid Grid.Column="0">
|
||||
<Border Margin="20">
|
||||
<u:Banner
|
||||
Classes.Bordered="{Binding Bordered}"
|
||||
Content="This is the Demo of Ursa Banner. "
|
||||
Header="Welcome to Ursa"
|
||||
Type="{Binding SelectedType}" />
|
||||
</Border>
|
||||
</Grid>
|
||||
<u:Banner
|
||||
Margin="20"
|
||||
Grid.Column="0"
|
||||
Classes.Bordered="{Binding Bordered}"
|
||||
CanClose="{Binding CanClose}"
|
||||
Content="This is the Demo of Ursa Banner. "
|
||||
Header="Welcome to Ursa"
|
||||
Type="{Binding SelectedType}" />
|
||||
<Border Grid.Column="1" VerticalAlignment="Top">
|
||||
<Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *">
|
||||
<Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *">
|
||||
<Label
|
||||
Grid.Row="0"
|
||||
Grid.Column="0"
|
||||
VerticalAlignment="Center"
|
||||
Content="Type" />
|
||||
<ComboBox
|
||||
<u:EnumSelector
|
||||
Grid.Row="0"
|
||||
Grid.Column="1"
|
||||
MinWidth="200"
|
||||
ItemsSource="{Binding Types}"
|
||||
SelectedItem="{Binding SelectedType}" />
|
||||
Width="200"
|
||||
EnumType="NotificationType"
|
||||
Value="{Binding SelectedType}" />
|
||||
<Label
|
||||
Grid.Row="1"
|
||||
Grid.Column="0"
|
||||
@@ -45,8 +44,18 @@
|
||||
Grid.Column="1"
|
||||
VerticalAlignment="Center"
|
||||
IsChecked="{Binding Bordered}" />
|
||||
<Label
|
||||
Grid.Row="2"
|
||||
Grid.Column="0"
|
||||
VerticalAlignment="Center"
|
||||
Content="CanClose" />
|
||||
<ToggleSwitch
|
||||
Grid.Row="2"
|
||||
Grid.Column="1"
|
||||
VerticalAlignment="Center"
|
||||
IsChecked="{Binding CanClose}" />
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</UserControl>
|
||||
</UserControl>
|
||||
@@ -1,7 +1,7 @@
|
||||
using System.Collections.ObjectModel;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Controls.Notifications;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using CommunityToolkit.Mvvm.ComponentModel;
|
||||
using Ursa.Demo.ViewModels;
|
||||
|
||||
namespace Ursa.Demo.Pages;
|
||||
@@ -20,37 +20,9 @@ public partial class BannerDemo : UserControl
|
||||
}
|
||||
}
|
||||
|
||||
public class BannerDemoViewModel : ViewModelBase
|
||||
public partial class BannerDemoViewModel : ViewModelBase
|
||||
{
|
||||
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.Success, NotificationType.Warning, NotificationType.Error
|
||||
};
|
||||
}
|
||||
[ObservableProperty] private NotificationType _selectedType;
|
||||
[ObservableProperty] private bool _bordered;
|
||||
[ObservableProperty] private bool _canClose;
|
||||
}
|
||||
@@ -2,8 +2,18 @@
|
||||
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>
|
||||
<HeaderedContentControl Theme="{StaticResource GroupBox}" Width="500">
|
||||
<u:Banner
|
||||
Classes="Bordered"
|
||||
Header="Title"
|
||||
Content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
|
||||
Type="Warning"
|
||||
CanClose="True" />
|
||||
</HeaderedContentControl>
|
||||
</Design.PreviewWith>
|
||||
<ControlTheme x:Key="{x:Type u:Banner}" TargetType="u:Banner">
|
||||
<Setter Property="Padding" Value="{DynamicResource BannerBorderPadding}" />
|
||||
<Setter Property="BorderThickness" Value="{DynamicResource BannerBorderThickness}" />
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource BannerBorderBrush}" />
|
||||
<Setter Property="HorizontalContentAlignment" Value="Center" />
|
||||
@@ -11,19 +21,16 @@
|
||||
<ControlTemplate TargetType="u:Banner">
|
||||
<Border
|
||||
Name="PART_Container"
|
||||
Padding="12"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}">
|
||||
<Grid ColumnDefinitions="*, Auto">
|
||||
<Grid
|
||||
Grid.Column="0"
|
||||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
||||
ColumnDefinitions="Auto, *"
|
||||
RowDefinitions="Auto, *">
|
||||
ColumnDefinitions="Auto, *">
|
||||
<!-- Icon Area -->
|
||||
<Panel
|
||||
Grid.Row="0"
|
||||
Grid.RowSpan="2"
|
||||
Grid.Column="0"
|
||||
Margin="{DynamicResource BannerIconMargin}"
|
||||
VerticalAlignment="Top"
|
||||
@@ -31,38 +38,29 @@
|
||||
<ContentPresenter Content="{TemplateBinding Icon}" />
|
||||
<PathIcon
|
||||
Name="PART_BuildInIcon"
|
||||
Width="16"
|
||||
Height="16"
|
||||
IsVisible="{TemplateBinding Icon,
|
||||
Converter={x:Static ObjectConverters.IsNull}}" />
|
||||
Theme="{DynamicResource InnerPathIcon}"
|
||||
Classes="Large"
|
||||
IsVisible="{TemplateBinding Icon, Converter={x:Static ObjectConverters.IsNull}}" />
|
||||
</Panel>
|
||||
<ContentPresenter
|
||||
Grid.Row="0"
|
||||
Grid.Column="1"
|
||||
Content="{TemplateBinding Header}"
|
||||
ContentTemplate="{TemplateBinding HeaderTemplate}"
|
||||
IsVisible="{TemplateBinding Header,
|
||||
Converter={x:Static ObjectConverters.IsNotNull}}"
|
||||
TextElement.FontWeight="{DynamicResource TextBlockTitleFontWeight}" />
|
||||
<ContentPresenter
|
||||
Grid.Row="1"
|
||||
Grid.Column="1"
|
||||
Content="{TemplateBinding Content}"
|
||||
ContentTemplate="{TemplateBinding ContentTemplate}" />
|
||||
<StackPanel Grid.Column="1" Spacing="2">
|
||||
<ContentPresenter
|
||||
Content="{TemplateBinding Header}"
|
||||
ContentTemplate="{TemplateBinding HeaderTemplate}"
|
||||
TextElement.FontSize="{DynamicResource BannerTitleFontSize}"
|
||||
TextElement.FontWeight="{DynamicResource TextBlockTitleFontWeight}" />
|
||||
<ContentPresenter
|
||||
Content="{TemplateBinding Content}"
|
||||
ContentTemplate="{TemplateBinding ContentTemplate}" />
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
<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="{DynamicResource BannerCloseButtonForeground}" />
|
||||
</Button>
|
||||
Margin="{DynamicResource BannerCloseButtonMargin}"
|
||||
HorizontalAlignment="Right"
|
||||
VerticalAlignment="Top"
|
||||
Theme="{DynamicResource NotificationCloseButton}"
|
||||
IsVisible="{TemplateBinding CanClose}" />
|
||||
</Grid>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
@@ -120,4 +118,4 @@
|
||||
</Style>
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
</ResourceDictionary>
|
||||
@@ -6,6 +6,9 @@
|
||||
<StaticResource x:Key="BannerCloseIconGeometry" ResourceKey="SemiIconClose" />
|
||||
|
||||
<CornerRadius x:Key="BannerCornerRadius">3</CornerRadius>
|
||||
<Thickness x:Key="BannerBorderPadding">12</Thickness>
|
||||
<Thickness x:Key="BannerBorderThickness">1</Thickness>
|
||||
<Thickness x:Key="BannerIconMargin">0 0 12 0</Thickness>
|
||||
<Thickness x:Key="BannerCloseButtonMargin">12 0 0 0</Thickness>
|
||||
<x:Double x:Key="BannerTitleFontSize">18</x:Double>
|
||||
</ResourceDictionary>
|
||||
Reference in New Issue
Block a user