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">
<UserControl.Background>
<LinearGradientBrush StartPoint="5%, 5%" EndPoint="80%, 80%">
<GradientStop Offset="0.0" Color="{DynamicResource SemiBlue0Color}" />
<GradientStop Offset="0.4" Color="{DynamicResource SemiBlue2Color}" />
<GradientStop Offset="0.9" Color="{DynamicResource SemiBlue1Color}" />
<GradientStop Offset="0.0" Color="{DynamicResource SemiLightBlue0Color}" />
<GradientStop Offset="0.4" Color="{DynamicResource SemiLightBlue2Color}" />
<GradientStop Offset="0.9" Color="{DynamicResource SemiLightBlue1Color}" />
</LinearGradientBrush>
</UserControl.Background>
<Grid Margin="24" RowDefinitions="Auto, *, Auto" MinWidth="400">
@@ -69,9 +69,9 @@
HorizontalAlignment="Right"
Orientation="Horizontal"
Spacing="8">
<Button Command="{Binding DialogCommand}" Content="Dialog" />
<Button Command="{Binding OKCommand}" Content="OK" />
<Button Command="{Binding CancelCommand}" Content="Cancel" />
<Button Command="{Binding DialogCommand}" Content="Dialog" Theme="{DynamicResource SolidButton}" />
<Button Command="{Binding OKCommand}" Content="OK" Theme="{DynamicResource SolidButton}" Classes="Tertiary"/>
<Button Command="{Binding CancelCommand}" Content="Cancel" Theme="{DynamicResource SolidButton}" Classes="Tertiary"/>
<ComboBox>
<ComboBoxItem>A</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;
public partial class DefaultDemoDialogViewModel: ObservableObject, IDialogContext
public partial class DefaultDemoDialogViewModel: ObservableObject
{
public ObservableCollection<string> Cities { get; set; }
[ObservableProperty] private string? _owner;
@@ -21,11 +21,4 @@ public partial class DefaultDemoDialogViewModel: ObservableObject, IDialogContex
"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"
mc:Ignorable="d">
<Grid ColumnDefinitions="Auto, *">
<TabControl Grid.Column="0" Width="300">
<TabItem Header="Default">
<StackPanel>
<u:EnumSelector EnumType="common:Position" Value="{Binding SelectedPosition}" />
<u:Form Width="300" Grid.Column="0" LabelPosition="Top">
<TextBox u:FormItem.Label="Title" Text="{Binding Title}"/>
<u:EnumSelector
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
Content="Global/Local"
IsChecked="{Binding IsGlobal}"
OffContent="Local"
OnContent="Global" />
<ToggleSwitch
Content="Modal"
IsChecked="{Binding IsModal}"
OffContent="No"
OnContent="Yes" />
<ToggleSwitch
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>
u:FormItem.Label="Global/Local OverlayHost"
IsChecked="{Binding IsLocal}"
OffContent="Global"
OnContent="Local" />
<Button
HorizontalAlignment="Left"
u:FormItem.NoLabel="True"
Command="{Binding ShowDialogCommand}"
Content="Show" />
</u:Form>
<Grid Grid.Column="1" ClipToBounds="True">
<Border
BorderBrush="{DynamicResource SemiGrey1}"
BorderThickness="1"
ClipToBounds="True"
CornerRadius="20">
<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>
<u:OverlayDialogHost HostId="LocalHost"/>
</Border>
</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 ICommand ShowDialogCommand { get; set; }
public ICommand ShowCustomDialogCommand { get; set; }
[ObservableProperty] private Position _selectedPosition;
[ObservableProperty] private DialogButton _selectedButton;
[ObservableProperty] private bool _isGlobal;
[ObservableProperty] private Position _position;
[ObservableProperty] private DialogButton _buttons;
[ObservableProperty] private bool _canLightDismiss;
[ObservableProperty] private DialogResult? _defaultResult;
[ObservableProperty] private bool _result;
[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()
{
ShowDialogCommand = new AsyncRelayCommand(ShowDefaultDialog);
ShowCustomDialogCommand = new AsyncRelayCommand(ShowCustomDrawer);
SelectedPosition = Position.Right;
IsGlobal = true;
Position = Position.Right;
IsModal = true;
Title = "Add New";
}
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)
{
DefaultResult = await Drawer.ShowModal<PlainDialog, PlainDialogViewModel>(
vm,
IsGlobal ? null : "LocalHost",
new DrawerOptions()
{
Title = "Please select a date",
Position = SelectedPosition,
Buttons = SelectedButton,
CanLightDismiss = CanLightDismiss,
});
Date = vm.Date;
await Drawer.ShowCustomModal<CustomDemoDialog, CustomDemoDialogViewModel, object?>(vm, hostId, options);
}
else
{
Drawer.Show<PlainDialog, PlainDialogViewModel>(
vm,
IsGlobal ? null : "LocalHost",
new DrawerOptions()
Drawer.ShowCustom<CustomDemoDialog, CustomDemoDialogViewModel>(vm, hostId, options);
}
}
else
{
Title = "Please select a date",
Position = SelectedPosition,
Buttons = SelectedButton,
CanLightDismiss = CanLightDismiss,
});
var vm = new DefaultDemoDialogViewModel();
if (IsModal)
{
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()
{
var closeButtonVisible = IsCloseButtonVisible ??DataContext is IDialogContext;
var closeButtonVisible = IsCloseButtonVisible ?? (DataContext is IDialogContext || Buttons != DialogButton.YesNo );
IsHitTestVisibleProperty.SetValue(closeButtonVisible, _closeButton);
if (!closeButtonVisible)
{

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

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