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

feat: improve drawer demo. fix drawer close button visibility issue.

Browse Source
This commit is contained in:
rabbitism
2024-08-25 23:32:26 +08:00
parent 1d3e21e5a6
commit 38676f729e
12 changed files with 79 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
demo/Ursa.Demo/Dialogs/CustomDemoDialog.axaml
View File

@@ -12,9 +12,9 @@
mc:Ignorable="d"> mc:Ignorable="d">
<UserControl.Background> <UserControl.Background>
<LinearGradientBrush StartPoint="5%, 5%" EndPoint="80%, 80%"> <LinearGradientBrush StartPoint="5%, 5%" EndPoint="80%, 80%">
<GradientStop Offset="0.0" Color="{DynamicResource SemiBlue0Color}" /> <GradientStop Offset="0.0" Color="{DynamicResource SemiLightBlue0Color}" />
<GradientStop Offset="0.4" Color="{DynamicResource SemiBlue2Color}" /> <GradientStop Offset="0.4" Color="{DynamicResource SemiLightBlue2Color}" />
<GradientStop Offset="0.9" Color="{DynamicResource SemiBlue1Color}" /> <GradientStop Offset="0.9" Color="{DynamicResource SemiLightBlue1Color}" />
</LinearGradientBrush> </LinearGradientBrush>
</UserControl.Background> </UserControl.Background>
<Grid Margin="24" RowDefinitions="Auto, *, Auto" MinWidth="400"> <Grid Margin="24" RowDefinitions="Auto, *, Auto" MinWidth="400">
@@ -69,9 +69,9 @@
HorizontalAlignment="Right" HorizontalAlignment="Right"
Orientation="Horizontal" Orientation="Horizontal"
Spacing="8"> Spacing="8">
<Button Command="{Binding DialogCommand}" Content="Dialog" /> <Button Command="{Binding DialogCommand}" Content="Dialog" Theme="{DynamicResource SolidButton}" />
<Button Command="{Binding OKCommand}" Content="OK" /> <Button Command="{Binding OKCommand}" Content="OK" Theme="{DynamicResource SolidButton}" Classes="Tertiary"/>
<Button Command="{Binding CancelCommand}" Content="Cancel" /> <Button Command="{Binding CancelCommand}" Content="Cancel" Theme="{DynamicResource SolidButton}" Classes="Tertiary"/>
<ComboBox> <ComboBox>
<ComboBoxItem>A</ComboBoxItem> <ComboBoxItem>A</ComboBoxItem>
<ComboBoxItem>B</ComboBoxItem> <ComboBoxItem>B</ComboBoxItem>

9
demo/Ursa.Demo/Dialogs/DefaultDemoDialogViewModel.cs
View File

@@ -5,7 +5,7 @@ using Irihi.Avalonia.Shared.Contracts;
namespace Ursa.Demo.Dialogs; namespace Ursa.Demo.Dialogs;
public partial class DefaultDemoDialogViewModel: ObservableObject, IDialogContext public partial class DefaultDemoDialogViewModel: ObservableObject
{ {
public ObservableCollection<string> Cities { get; set; } public ObservableCollection<string> Cities { get; set; }
[ObservableProperty] private string? _owner; [ObservableProperty] private string? _owner;
@@ -21,11 +21,4 @@ public partial class DefaultDemoDialogViewModel: ObservableObject, IDialogContex
"Suzhou", "Tianjin", "Xi'an", "Qingdao", "Dalian" "Suzhou", "Tianjin", "Xi'an", "Qingdao", "Dalian"
]; ];
} }
public void Close()
{
RequestClose?.Invoke(this, null);
}
public event EventHandler<object?>? RequestClose;
} }

45
demo/Ursa.Demo/Dialogs/DialogWithAction.axaml
View File

@@ -1,45 +0,0 @@
<UserControl
x:Class="Ursa.Demo.Dialogs.DialogWithAction"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Ursa.Demo.Dialogs"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
d:DesignHeight="450"
d:DesignWidth="800"
x:CompileBindings="True"
x:DataType="local:DialogWithActionViewModel"
Background="{DynamicResource SemiYellow1}"
mc:Ignorable="d">
<Grid Margin="24" RowDefinitions="Auto, *, Auto">
<TextBlock
Grid.Row="0"
Margin="8"
FontSize="16"
FontWeight="600"
Text="{Binding Title}" />
<Calendar
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Top"
SelectedDate="{Binding Date}" />
<StackPanel
Grid.Row="2"
HorizontalAlignment="Right"
Orientation="Horizontal"
Spacing="8">
<Rectangle Width="10" Height="10" Fill="Red" u:DialogControlBase.CanClose="True"></Rectangle>
<Button Command="{Binding DialogCommand}" Content="Dialog" />
<Button Command="{Binding OKCommand}" Content="OK" />
<Button Command="{Binding CancelCommand}" Content="Cancel" />
<ComboBox>
<ComboBoxItem>A</ComboBoxItem>
<ComboBoxItem>B</ComboBoxItem>
<ComboBoxItem>C</ComboBoxItem>
</ComboBox>
</StackPanel>
</Grid>
</UserControl>

11
demo/Ursa.Demo/Dialogs/DialogWithAction.axaml.cs
View File

@@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace Ursa.Demo.Dialogs;
public partial class DialogWithAction : UserControl
{
public DialogWithAction()
{
InitializeComponent();
}
}

51
demo/Ursa.Demo/Dialogs/DialogWithActionViewModel.cs
View File

@@ -1,51 +0,0 @@
using System;
using System.Threading.Tasks;
using System.Windows.Input;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Irihi.Avalonia.Shared.Contracts;
using Ursa.Controls;
namespace Ursa.Demo.Dialogs;
public partial class DialogWithActionViewModel: ObservableObject, IDialogContext
{
[ObservableProperty] private string _title;
[ObservableProperty] private DateTime _date;
public void Close()
{
RequestClose?.Invoke(this, false);
}
public event EventHandler<object?>? RequestClose;
public ICommand OKCommand { get; set; }
public ICommand CancelCommand { get; set; }
public ICommand DialogCommand { get; set; }
public DialogWithActionViewModel()
{
OKCommand = new RelayCommand(OK);
CancelCommand = new RelayCommand(Cancel);
DialogCommand = new AsyncRelayCommand(ShowDialog);
Title = "Please select a date";
Date = DateTime.Now;
}
private void OK()
{
RequestClose?.Invoke(this, true);
}
private void Cancel()
{
RequestClose?.Invoke(this, false);
}
private async Task ShowDialog()
{
await OverlayDialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(new DialogWithActionViewModel());
}
}

14
demo/Ursa.Demo/Dialogs/PlainDialog.axaml
View File

@@ -1,14 +0,0 @@
<UserControl 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"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
xmlns:local="clr-namespace:Ursa.Demo.Dialogs"
x:DataType="local:PlainDialogViewModel"
x:CompileBindings="True"
x:Class="Ursa.Demo.Dialogs.PlainDialog">
<StackPanel HorizontalAlignment="Center">
<Calendar SelectedDate="{Binding Date}" ></Calendar>
<TextBlock TextWrapping="Wrap" Text="{Binding Text}"></TextBlock>
</StackPanel>
</UserControl>

11
demo/Ursa.Demo/Dialogs/PlainDialog.axaml.cs
View File

@@ -1,11 +0,0 @@
using Avalonia.Controls;
namespace Ursa.Demo.Dialogs;
public partial class PlainDialog : UserControl
{
public PlainDialog()
{
InitializeComponent();
}
}

27
demo/Ursa.Demo/Dialogs/PlainDialogViewModel.cs
View File

@@ -1,27 +0,0 @@
using System;
using CommunityToolkit.Mvvm.ComponentModel;
namespace Ursa.Demo.Dialogs;
public class PlainDialogViewModel: ObservableObject
{
private DateTime? _date;
public DateTime? Date
{
get => _date;
set => SetProperty(ref _date, value);
}
private string? _text;
public string? Text
{
get => _text;
set => SetProperty(ref _text, value);
}
public PlainDialogViewModel()
{
Text = "I am PlainDialogViewModel!";
}
}

98
demo/Ursa.Demo/Pages/DrawerDemo.axaml
View File

@@ -13,86 +13,38 @@
x:DataType="vm:DrawerDemoViewModel" x:DataType="vm:DrawerDemoViewModel"
mc:Ignorable="d"> mc:Ignorable="d">
<Grid ColumnDefinitions="Auto, *"> <Grid ColumnDefinitions="Auto, *">
<TabControl Grid.Column="0" Width="300"> <u:Form Width="300" Grid.Column="0" LabelPosition="Top">
<TabItem Header="Default"> <TextBox u:FormItem.Label="Title" Text="{Binding Title}"/>
<StackPanel> <u:EnumSelector
<u:EnumSelector EnumType="common:Position" Value="{Binding SelectedPosition}" /> u:FormItem.Label="Position"
EnumType="common:Position"
Value="{Binding Position}"/>
<u:EnumSelector
u:FormItem.Label="Buttons"
EnumType="u:DialogButton"
Value="{Binding Buttons}"/>
<CheckBox u:FormItem.Label="Can LightDismiss" IsChecked="{Binding CanLightDismiss}"/>
<CheckBox u:FormItem.Label="Is Modal" IsChecked="{Binding IsModal}"/>
<CheckBox u:FormItem.Label="Is Close Button Visible" IsChecked="{Binding IsCloseButtonVisible}" IsThreeState="True"/>
<CheckBox u:FormItem.Label="Custom Dialog" IsChecked="{Binding Custom}"/>
<ToggleSwitch <ToggleSwitch
Content="Global/Local" u:FormItem.Label="Global/Local OverlayHost"
IsChecked="{Binding IsGlobal}" IsChecked="{Binding IsLocal}"
OffContent="Local" OffContent="Global"
OnContent="Global" /> OnContent="Local" />
<ToggleSwitch <Button
Content="Modal" HorizontalAlignment="Left"
IsChecked="{Binding IsModal}" u:FormItem.NoLabel="True"
OffContent="No" Command="{Binding ShowDialogCommand}"
OnContent="Yes" /> Content="Show" />
<ToggleSwitch </u:Form>
Content="CanLightDismiss"
IsChecked="{Binding CanLightDismiss}"
OffContent="No"
OnContent="Yes" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Buttons" />
<u:EnumSelector EnumType="{x:Type u:DialogButton}" Value="{Binding SelectedButton}" />
</StackPanel>
<Button Command="{Binding ShowDialogCommand}" Content="Show Default Drawer" />
<TextBlock>
<Run Text="Default Result: " />
<Run Text="{Binding DefaultResult}" />
</TextBlock>
<TextBlock>
<Run Text="Dialog Date: " />
<Run Text="{Binding Date}" />
</TextBlock>
</StackPanel>
</TabItem>
<TabItem Header="Custom">
<StackPanel>
<u:EnumSelector EnumType="common:Position" Value="{Binding SelectedPosition}" />
<ToggleSwitch
Content="Global/Local"
IsChecked="{Binding IsGlobal}"
OffContent="Local"
OnContent="Global" />
<ToggleSwitch
Content="CanLightDismiss"
IsChecked="{Binding CanLightDismiss}"
OffContent="No"
OnContent="Yes" />
<ToggleSwitch
Content="Modal"
IsChecked="{Binding IsModal}"
OffContent="No"
OnContent="Yes" />
<Button Command="{Binding ShowCustomDialogCommand}" Content="Show Custom Drawer" />
<TextBlock>
<Run Text="Custom Result: " />
<Run Text="{Binding Result}" />
</TextBlock>
<TextBlock>
<Run Text="Dialog Date: " />
<Run Text="{Binding Date}" />
</TextBlock>
</StackPanel>
</TabItem>
</TabControl>
<Grid Grid.Column="1" ClipToBounds="True"> <Grid Grid.Column="1" ClipToBounds="True">
<Border <Border
BorderBrush="{DynamicResource SemiGrey1}" BorderBrush="{DynamicResource SemiGrey1}"
BorderThickness="1" BorderThickness="1"
ClipToBounds="True" ClipToBounds="True"
CornerRadius="20"> CornerRadius="20">
<u:OverlayDialogHost HostId="LocalHost"> <u:OverlayDialogHost HostId="LocalHost"/>
<u:OverlayDialogHost.DialogDataTemplates>
<DataTemplate DataType="x:String">
<TextBlock
Margin="24,24,48,24"
Foreground="Red"
Text="{Binding Path=.}" />
</DataTemplate>
</u:OverlayDialogHost.DialogDataTemplates>
</u:OverlayDialogHost>
</Border> </Border>
</Grid> </Grid>
</Grid> </Grid>

92
demo/Ursa.Demo/ViewModels/DrawerDemoViewModel.cs
View File

@@ -13,83 +13,61 @@ namespace Ursa.Demo.ViewModels;
public partial class DrawerDemoViewModel : ObservableObject public partial class DrawerDemoViewModel : ObservableObject
{ {
public ICommand ShowDialogCommand { get; set; } public ICommand ShowDialogCommand { get; set; }
public ICommand ShowCustomDialogCommand { get; set; }
[ObservableProperty] private Position _selectedPosition; [ObservableProperty] private Position _position;
[ObservableProperty] private DialogButton _selectedButton; [ObservableProperty] private DialogButton _buttons;
[ObservableProperty] private bool _isGlobal;
[ObservableProperty] private bool _canLightDismiss; [ObservableProperty] private bool _canLightDismiss;
[ObservableProperty] private DialogResult? _defaultResult;
[ObservableProperty] private bool _result;
[ObservableProperty] private bool _isModal; [ObservableProperty] private bool _isModal;
[ObservableProperty] private DateTime? _date; [ObservableProperty] private bool? _isCloseButtonVisible;
[ObservableProperty] private string? _title;
[ObservableProperty] private bool _custom;
[ObservableProperty] private bool _isLocal;
public DrawerDemoViewModel() public DrawerDemoViewModel()
{ {
ShowDialogCommand = new AsyncRelayCommand(ShowDefaultDialog); ShowDialogCommand = new AsyncRelayCommand(ShowDefaultDialog);
ShowCustomDialogCommand = new AsyncRelayCommand(ShowCustomDrawer); Position = Position.Right;
SelectedPosition = Position.Right;
IsGlobal = true;
IsModal = true; IsModal = true;
Title = "Add New";
} }
private async Task ShowDefaultDialog() private async Task ShowDefaultDialog()
{ {
var vm = new PlainDialogViewModel(); var options = new DrawerOptions()
{
Position = Position,
Buttons = Buttons,
CanLightDismiss = CanLightDismiss,
IsCloseButtonVisible = IsCloseButtonVisible,
Title = Title,
};
var hostId = IsLocal ? "LocalHost" : null;
if (Custom)
{
var vm = new CustomDemoDialogViewModel();
if (IsModal) if (IsModal)
{ {
DefaultResult = await Drawer.ShowModal<PlainDialog, PlainDialogViewModel>( await Drawer.ShowCustomModal<CustomDemoDialog, CustomDemoDialogViewModel, object?>(vm, hostId, options);
vm,
IsGlobal ? null : "LocalHost",
new DrawerOptions()
{
Title = "Please select a date",
Position = SelectedPosition,
Buttons = SelectedButton,
CanLightDismiss = CanLightDismiss,
});
Date = vm.Date;
} }
else else
{ {
Drawer.Show<PlainDialog, PlainDialogViewModel>( Drawer.ShowCustom<CustomDemoDialog, CustomDemoDialogViewModel>(vm, hostId, options);
vm, }
IsGlobal ? null : "LocalHost", }
new DrawerOptions() else
{ {
Title = "Please select a date", var vm = new DefaultDemoDialogViewModel();
Position = SelectedPosition, if (IsModal)
Buttons = SelectedButton, {
CanLightDismiss = CanLightDismiss, await Drawer.ShowModal<DefaultDemoDialog, DefaultDemoDialogViewModel>(vm, hostId, options);
}); }
else
{
Drawer.Show<DefaultDemoDialog, DefaultDemoDialogViewModel>(vm, hostId, options);
} }
} }
private async Task ShowCustomDrawer()
{
var vm = new DialogWithActionViewModel();
if (IsModal)
{
Result = await Drawer.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(
vm,
IsGlobal ? null : "LocalHost",
new DrawerOptions()
{
Position = SelectedPosition,
CanLightDismiss = CanLightDismiss,
});
Date = vm.Date;
}
else
{
Drawer.ShowCustom<DialogWithAction, DialogWithActionViewModel>(
vm,
IsGlobal ? null : "LocalHost",
new DrawerOptions()
{
Position = SelectedPosition,
CanLightDismiss = CanLightDismiss,
});
}
} }
} }

2
src/Ursa/Controls/Dialog/DefaultDialogControl.cs
View File

@@ -70,7 +70,7 @@ public class DefaultDialogControl : DialogControlBase
private void SetButtonVisibility() private void SetButtonVisibility()
{ {
var closeButtonVisible = IsCloseButtonVisible ??DataContext is IDialogContext; var closeButtonVisible = IsCloseButtonVisible ?? (DataContext is IDialogContext || Buttons != DialogButton.YesNo );
IsHitTestVisibleProperty.SetValue(closeButtonVisible, _closeButton); IsHitTestVisibleProperty.SetValue(closeButtonVisible, _closeButton);
if (!closeButtonVisible) if (!closeButtonVisible)
{ {

8
src/Ursa/Controls/Drawer/DefaultDrawerControl.cs
View File

@@ -70,9 +70,13 @@ public class DefaultDrawerControl : DrawerControlBase
private void SetButtonVisibility() private void SetButtonVisibility()
{ {
var isCloseButtonVisible = var closeButtonVisible =
IsCloseButtonVisible ?? (DataContext is IDialogContext || Buttons != DialogButton.YesNo); IsCloseButtonVisible ?? (DataContext is IDialogContext || Buttons != DialogButton.YesNo);
IsVisibleProperty.SetValue(isCloseButtonVisible, _closeButton); IsHitTestVisibleProperty.SetValue(closeButtonVisible, _closeButton);
if (!closeButtonVisible)
{
OpacityProperty.SetValue(0, _closeButton);
}
switch (Buttons) switch (Buttons)
{ {
case DialogButton.None: case DialogButton.None: