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

feat: Add Badge and Badge demo.

Browse Source
This commit is contained in:
rabbitism
2023-02-20 11:13:51 +08:00
parent d6227788e7
commit 9208b1cd7e
19 changed files with 554 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/Ursa.Demo/App.axaml
View File

@@ -4,7 +4,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Ursa.Demo">
<Application.Styles>
<StyleInclude Source="avares://Semi.Avalonia/Themes/LightTheme.axaml" />
<StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
<StyleInclude Source="avares://Ursa.Themes.Semi/Index.axaml" />
</Application.Styles>
</Application>

190
demo/Ursa.Demo/Pages/BadgeDemo.axaml Normal file
View File

@@ -0,0 +1,190 @@
<UserControl
x:Class="Ursa.Demo.Pages.BadgeDemo"
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
Margin="24"
HorizontalAlignment="Left"
ClipToBounds="False">
<StackPanel.Styles>
<Style Selector="u|Badge">
<Setter Property="Margin" Value="14" />
</Style>
</StackPanel.Styles>
<TextBlock Text="Hello" />
<u:Badge
HorizontalAlignment="Center"
BadgeContent="500"
OverflowCount="100">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<StackPanel Orientation="Horizontal">
<u:Badge BadgeContent="5" CornerPosition="TopLeft">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge BadgeContent="5" CornerPosition="TopRight">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge BadgeContent="5" CornerPosition="BottomLeft">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge BadgeContent="5" CornerPosition="BottomRight">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
</StackPanel>
<u:Badge BadgeContent="SUCCEED!">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge HorizontalAlignment="Stretch" BadgeContent="VIP">
<Border Height="50" Background="LightYellow" />
</u:Badge>
<StackPanel Orientation="Horizontal">
<u:Badge
BadgeContent="VIP"
CornerPosition="TopLeft"
Dot="True">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge
BadgeContent="VIP"
CornerPosition="TopRight"
Dot="True">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge
BadgeContent="VIP"
CornerPosition="BottomLeft"
Dot="True">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge
BadgeContent="VIP"
CornerPosition="BottomRight"
Dot="True">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge BadgeContent="URSA" Classes="Primary">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge BadgeContent="URSA" Classes="Secondary">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge BadgeContent="URSA" Classes="Tertiary">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge BadgeContent="URSA" Classes="Warning">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge BadgeContent="URSA" Classes="Danger">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge
BadgeContent="URSA"
Classes="Primary"
Dot="True">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge
BadgeContent="URSA"
Classes="Secondary"
Dot="True">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge
BadgeContent="URSA"
Classes="Tertiary"
Dot="True">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge
BadgeContent="URSA"
Classes="Warning"
Dot="True">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
<u:Badge
BadgeContent="URSA"
Classes="Danger"
Dot="True">
<Border
Width="100"
Height="50"
Background="LightYellow" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge VerticalAlignment="Center" BadgeContent="Hello" />
<u:Badge
VerticalAlignment="Center"
BadgeContent="Hello"
Dot="True" />
</StackPanel>
</StackPanel>
</UserControl>

18
demo/Ursa.Demo/Pages/BadgeDemo.axaml.cs Normal file
View File

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

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

@@ -14,6 +14,11 @@ public partial class BannerDemo : UserControl
InitializeComponent();
this.DataContext = new BannerDemoViewModel();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}
public class BannerDemoViewModel: ViewModelBase

20
demo/Ursa.Demo/Views/MainWindow.axaml
View File

@@ -16,10 +16,20 @@
<vm:MainWindowViewModel />
</Design.DataContext>
<TabControl TabStripPlacement="Left">
<TabItem Header="Banner">
<pages:BannerDemo />
</TabItem>
</TabControl>
<Grid RowDefinitions="Auto, *">
<ToggleButton
Grid.Row="0"
HorizontalAlignment="Right"
Content="Update Theme"
IsCheckedChanged="ToggleButton_OnIsCheckedChanged" />
<TabControl Grid.Row="1" TabStripPlacement="Left">
<TabItem Header="Badge">
<pages:BadgeDemo />
</TabItem>
<TabItem Header="Banner">
<pages:BannerDemo />
</TabItem>
</TabControl>
</Grid>
</Window>

13
demo/Ursa.Demo/Views/MainWindow.axaml.cs
View File

@@ -1,4 +1,7 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Interactivity;
using Avalonia.Styling;
namespace Ursa.Demo.Views;
@@ -8,4 +11,14 @@ public partial class MainWindow : Window
{
InitializeComponent();
}
private void ToggleButton_OnIsCheckedChanged(object? sender, RoutedEventArgs e)
{
var app = Application.Current;
if (app is not null)
{
var theme = app.ActualThemeVariant;
app.RequestedThemeVariant = theme == ThemeVariant.Dark ? ThemeVariant.Light : ThemeVariant.Dark;
}
}
}