Merge pull request #149 from irihitech/issue/134-dialog

Dialog Update
This commit is contained in:
Dong Bin
2024-03-27 22:07:28 +08:00
committed by GitHub
13 changed files with 189 additions and 110 deletions

View File

@@ -39,22 +39,27 @@
IsChecked="{Binding CanLightDismiss}"
OffContent="No"
OnContent="Yes" />
<ToggleSwitch
Content="FullScreen"
IsChecked="{Binding FullScreen}"
OffContent="No"
OnContent="Yes" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Buttons" />
<ComboBox ItemsSource="{Binding Buttons}" SelectedItem="{Binding SelectedButton}" />
<TextBlock VerticalAlignment="Center" Text="Buttons" />
<u:EnumSelector EnumType="{x:Type u:DialogButton}" Value="{Binding SelectedButton}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Mode" />
<ComboBox ItemsSource="{Binding Modes}" SelectedItem="{Binding SelectedMode}" />
<TextBlock VerticalAlignment="Center" Text="Mode" />
<u:EnumSelector EnumType="{x:Type u:DialogMode}" Value="{Binding SelectedMode}" />
</StackPanel>
<Button Command="{Binding ShowDialogCommand}" Content="Show Dialog" />
<TextBlock>
<Run Text="Default Result: " />
<Run Text="{Binding DefaultResult}" />
<Run Text="{Binding DefaultResult, FallbackValue=''}" />
</TextBlock>
<TextBlock>
<Run Text="Dialog Date: " />
<Run Text="{Binding Date}" />
<Run Text="{Binding Date, FallbackValue=''}" />
</TextBlock>
</StackPanel>
</TabItem>
@@ -73,8 +78,8 @@
OffContent="Local"
OnContent="Global" />
<ToggleSwitch
Content="Modal/Regular"
Name="modal"
Content="Modal/Regular"
IsChecked="{Binding IsModal}"
OffContent="Regular"
OnContent="Modal" />
@@ -83,6 +88,11 @@
IsChecked="{Binding CanLightDismiss}"
OffContent="No"
OnContent="Yes" />
<ToggleSwitch
Content="FullScreen"
IsChecked="{Binding FullScreen}"
OffContent="No"
OnContent="Yes" />
<Button Command="{Binding ShowCustomDialogCommand}" Content="Show Dialog" />
<TextBlock>
<Run Text="Custom Result: " />

View File

@@ -11,85 +11,28 @@ using Ursa.Demo.Pages;
namespace Ursa.Demo.ViewModels;
public class DialogDemoViewModel: ObservableObject
public partial class DialogDemoViewModel: ObservableObject
{
public ICommand ShowDialogCommand { get; set; }
public ICommand ShowCustomDialogCommand { get; set; }
private DialogMode _selectedMode;
public DialogMode SelectedMode
{
get => _selectedMode;
set => SetProperty(ref _selectedMode, value);
}
public ObservableCollection<DialogMode> Modes { get; set; }
private DialogButton _selectedButton;
public DialogButton SelectedButton
{
get => _selectedButton;
set => SetProperty(ref _selectedButton, value);
}
public ObservableCollection<DialogButton> Buttons { get; set; }
private bool _isWindow;
public bool IsWindow
{
get => _isWindow;
set => SetProperty(ref _isWindow, value);
}
private bool _isGlobal;
public bool IsGlobal
{
get => _isGlobal;
set => SetProperty(ref _isGlobal, value);
}
private bool _isModal;
public bool IsModal
{
get => _isModal;
set => SetProperty(ref _isModal, value);
}
private bool _canLightDismiss;
public bool CanLightDismiss
{
get => _canLightDismiss;
set => SetProperty(ref _canLightDismiss, value);
}
private DialogResult? _defaultResult;
public DialogResult? DefaultResult
{
get => _defaultResult;
set => SetProperty(ref _defaultResult, value);
}
private bool _result;
public bool Result
{
get => _result;
set => SetProperty(ref _result, value);
}
private DateTime? _date;
public DateTime? Date
{
get => _date;
set => SetProperty(ref _date, value);
}
[ObservableProperty] private DialogMode _selectedMode;
[ObservableProperty] private DialogButton _selectedButton;
[ObservableProperty] private bool _isWindow;
[ObservableProperty] private bool _isGlobal;
[ObservableProperty] private bool _isModal;
[ObservableProperty] private bool _canLightDismiss;
[ObservableProperty] private DialogResult? _defaultResult;
[ObservableProperty] private bool _result;
[ObservableProperty] private DateTime? _date;
[ObservableProperty] private bool _fullScreen;
public DialogDemoViewModel()
{
ShowDialogCommand = new AsyncRelayCommand(ShowDialog);
ShowCustomDialogCommand = new AsyncRelayCommand(ShowCustomDialog);
Modes = new ObservableCollection<DialogMode>(Enum.GetValues<DialogMode>());
Buttons = new ObservableCollection<DialogButton>(Enum.GetValues<DialogButton>());
IsModal = true;
IsGlobal = true;
}
private async Task ShowDialog()
@@ -123,6 +66,7 @@ public class DialogDemoViewModel: ObservableObject
HorizontalOffset = 50,
VerticalAnchor = VerticalPosition.Top,
VerticalOffset = 50,
FullScreen = FullScreen,
}
);
Date = vm.Date;
@@ -138,6 +82,7 @@ public class DialogDemoViewModel: ObservableObject
Mode = SelectedMode,
Buttons = SelectedButton,
CanLightDismiss = CanLightDismiss,
FullScreen = FullScreen,
});
}
}
@@ -149,7 +94,6 @@ public class DialogDemoViewModel: ObservableObject
var vm = new DialogWithActionViewModel();
if (IsWindow)
{
if (IsModal)
{
Result = await Dialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(
@@ -161,7 +105,6 @@ public class DialogDemoViewModel: ObservableObject
Dialog.ShowCustom<DialogWithAction, DialogWithActionViewModel>(
vm);
}
}
else
{
@@ -171,6 +114,7 @@ public class DialogDemoViewModel: ObservableObject
vm, IsGlobal ? null : "LocalHost", options: new OverlayDialogOptions()
{
CanLightDismiss = CanLightDismiss,
FullScreen = FullScreen,
});
Date = vm.Date;
}
@@ -178,7 +122,7 @@ public class DialogDemoViewModel: ObservableObject
{
OverlayDialog.ShowCustom<DialogWithAction, DialogWithActionViewModel>(new DialogWithActionViewModel(),
IsGlobal ? null : "LocalHost",
options: new OverlayDialogOptions{ CanLightDismiss = CanLightDismiss });
options: new OverlayDialogOptions{ CanLightDismiss = CanLightDismiss, FullScreen = FullScreen});
}
}

View File

@@ -31,6 +31,9 @@ public partial class DrawerDemoViewModel: ObservableObject
{
ShowDialogCommand = new AsyncRelayCommand(ShowDefaultDialog);
ShowCustomDialogCommand = new AsyncRelayCommand(ShowCustomDrawer);
SelectedPosition = Position.Right;
IsGlobal = true;
IsModal = true;
}
private async Task ShowDefaultDialog()

View File

@@ -18,7 +18,7 @@
<Setter Property="Template">
<ControlTemplate TargetType="u:CustomDialogControl">
<Border
Margin="8"
Name="PART_Border"
Padding="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
@@ -45,15 +45,22 @@
Grid.Column="1"
Margin="0,24,24,0"
DockPanel.Dock="Right"
Theme="{DynamicResource CloseButton}" />
Theme="{DynamicResource OverlayCloseButton}" />
</Grid>
</Grid>
</Border>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^[IsClosed=True]">
<Setter Property="RenderTransform" Value="scale(0.95)"/>
<Style Selector="^:full-screen">
<Setter Property="CornerRadius" Value="0"/>
<Style Selector="^ /template/ Border#PART_Border">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Theme" Value="{x:Null}"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Background" Value="{DynamicResource BorderCardBackground}"></Setter>
</Style>
</Style>
<Style Selector="^ /template/ Panel#PART_TitleArea">
<Setter Property="ContextFlyout">
@@ -143,10 +150,10 @@
<Setter Property="Template">
<ControlTemplate TargetType="u:DefaultDialogControl">
<Border
Margin="10"
Name="PART_Border"
Padding="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
BoxShadow="0 0 8 0 #1A000000"
Classes="Shadow"
ClipToBounds="False"
@@ -159,6 +166,8 @@
<ContentPresenter
Name="PART_ContentPresenter"
Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="24,8"
Content="{TemplateBinding Content}" />
</ScrollViewer>
@@ -192,7 +201,7 @@
Grid.Column="2"
Margin="0,24,24,0"
DockPanel.Dock="Right"
Theme="{DynamicResource CloseButton}" />
Theme="{DynamicResource OverlayCloseButton}" />
</Grid>
<StackPanel
Grid.Row="2"
@@ -228,8 +237,15 @@
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^[IsClosed=True]">
<Setter Property="RenderTransform" Value="scale(0.95)"/>
<Style Selector="^:full-screen">
<Setter Property="CornerRadius" Value="0"/>
</Style>
<Style Selector="^:full-screen /template/ Border#PART_Border">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Theme" Value="{x:Null}"/>
<Setter Property="Margin" Value="0"></Setter>
<Setter Property="Background" Value="{DynamicResource BorderCardBackground}"></Setter>
</Style>
<Style Selector="^[Mode=None]">
<Style Selector="^ /template/ PathIcon#PART_Icon">

View File

@@ -1,6 +1,5 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ControlTheme x:Key="CloseButton" TargetType="Button">
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Margin" Value="0, 4" />
@@ -39,4 +38,34 @@
</Style>
</ControlTheme>
<ControlTheme x:Key="OverlayCloseButton" TargetType="Button">
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Margin" Value="0, 4" />
<Setter Property="Padding" Value="4" />
<Setter Property="Height" Value="28" />
<Setter Property="Width" Value="28" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Template">
<ControlTemplate TargetType="Button">
<Border
Name="PART_Border"
Padding="{TemplateBinding Padding}"
Background="Transparent"
CornerRadius="{TemplateBinding CornerRadius}">
<PathIcon
Width="12"
Height="12"
Data="{DynamicResource WindowCloseIconGlyph}"/>
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ Border">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
</Style>
<Style Selector="^:pressed /template/ Border">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@@ -35,7 +35,7 @@
Grid.Column="1"
Margin="0,24,24,0"
DockPanel.Dock="Right"
Theme="{DynamicResource CloseButton}" />
Theme="{DynamicResource OverlayCloseButton}" />
</Grid>
</Grid>
</Border>
@@ -107,7 +107,7 @@
Grid.Column="1"
Margin="0,24,24,0"
DockPanel.Dock="Right"
Theme="{DynamicResource CloseButton}" />
Theme="{DynamicResource OverlayCloseButton}" />
</Grid>
<StackPanel
Grid.Row="2"

View File

@@ -150,6 +150,7 @@
<ControlTheme x:Key="{x:Type u:MessageBoxControl}" TargetType="u:MessageBoxControl">
<Setter Property="CornerRadius" Value="12" />
<Setter Property="Padding" Value="48 24" />
<Setter Property="u:DialogControlBase.CanDragMove" Value="True"></Setter>
<Setter Property="Template">
<ControlTemplate TargetType="u:MessageBoxControl">
<Border
@@ -192,7 +193,7 @@
Name="{x:Static u:MessageBoxWindow.PART_CloseButton}"
Grid.Column="2"
Margin="0,24,24,0"
Theme="{DynamicResource CloseButton}" />
Theme="{DynamicResource OverlayCloseButton}" />
</Grid>
<Grid
Grid.Row="1"

View File

@@ -14,12 +14,13 @@ namespace Ursa.Controls;
[TemplatePart(PART_CloseButton, typeof(Button))]
[TemplatePart(PART_TitleArea, typeof(Panel))]
[PseudoClasses(PC_Modal)]
[PseudoClasses(PC_Modal, PC_FullScreen)]
public abstract class DialogControlBase : OverlayFeedbackElement
{
public const string PART_CloseButton = "PART_CloseButton";
public const string PART_TitleArea = "PART_TitleArea";
public const string PC_Modal = ":modal";
public const string PC_FullScreen = ":full-screen";
internal HorizontalPosition HorizontalAnchor { get; set; } = HorizontalPosition.Center;
internal VerticalPosition VerticalAnchor { get; set; } = VerticalPosition.Center;
@@ -30,7 +31,17 @@ public abstract class DialogControlBase : OverlayFeedbackElement
internal double? HorizontalOffsetRatio { get; set; }
internal double? VerticalOffsetRatio { get; set; }
internal bool CanLightDismiss { get; set; }
internal bool CanDragMove { get; set; }
private bool _isFullScreen;
public static readonly DirectProperty<DialogControlBase, bool> IsFullScreenProperty = AvaloniaProperty.RegisterDirect<DialogControlBase, bool>(
nameof(IsFullScreen), o => o.IsFullScreen, (o, v) => o.IsFullScreen = v);
public bool IsFullScreen
{
get => _isFullScreen;
set => SetAndRaise(IsFullScreenProperty, ref _isFullScreen, value);
}
protected internal Button? _closeButton;
private Panel? _titleArea;
@@ -134,6 +145,7 @@ public abstract class DialogControlBase : OverlayFeedbackElement
{
CanDragMoveProperty.Changed.AddClassHandler<InputElement, bool>(OnCanDragMoveChanged);
CanCloseProperty.Changed.AddClassHandler<InputElement, bool>(OnCanCloseChanged);
IsFullScreenProperty.AffectsPseudoClass<DialogControlBase>(PC_FullScreen);
}
@@ -143,7 +155,7 @@ public abstract class DialogControlBase : OverlayFeedbackElement
{
base.OnApplyTemplate(e);
_titleArea = e.NameScope.Find<Panel>(PART_TitleArea);
if (CanDragMove)
if (GetCanDragMove(this))
{
_titleArea?.RemoveHandler(PointerMovedEvent, OnTitlePointerMove);
_titleArea?.RemoveHandler(PointerPressedEvent, OnTitlePointerPressed);

View File

@@ -17,6 +17,7 @@ public enum VerticalPosition
public class OverlayDialogOptions
{
internal static OverlayDialogOptions Default { get; } = new OverlayDialogOptions();
public bool FullScreen { get; set; }
public HorizontalPosition HorizontalAnchor { get; set; } = HorizontalPosition.Center;
public VerticalPosition VerticalAnchor { get; set; } = VerticalPosition.Center;
/// <summary>

View File

@@ -1,5 +1,6 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Layout;
using Ursa.Common;
namespace Ursa.Controls;
@@ -181,6 +182,12 @@ public static class OverlayDialog
private static void ConfigureCustomDialogControl(CustomDialogControl control, OverlayDialogOptions? options)
{
options ??= OverlayDialogOptions.Default;
control.IsFullScreen = options.FullScreen;
if (options.FullScreen)
{
control.HorizontalAlignment = HorizontalAlignment.Stretch;
control.VerticalAlignment = VerticalAlignment.Stretch;
}
control.HorizontalAnchor = options.HorizontalAnchor;
control.VerticalAnchor = options.VerticalAnchor;
control.ActualHorizontalAnchor = options.HorizontalAnchor;
@@ -191,12 +198,18 @@ public static class OverlayDialog
options.VerticalAnchor == VerticalPosition.Center ? null : options.VerticalOffset;
control.IsCloseButtonVisible = options.ShowCloseButton;
control.CanLightDismiss = options.CanLightDismiss;
control.CanDragMove = options.CanDragMove;
DialogControlBase.SetCanDragMove(control, options.CanDragMove);
}
private static void ConfigureDefaultDialogControl(DefaultDialogControl control, OverlayDialogOptions? options)
{
if (options is null) options = new OverlayDialogOptions();
control.IsFullScreen = options.FullScreen;
if (options.FullScreen)
{
control.HorizontalAlignment = HorizontalAlignment.Stretch;
control.VerticalAlignment = VerticalAlignment.Stretch;
}
control.HorizontalAnchor = options.HorizontalAnchor;
control.VerticalAnchor = options.VerticalAnchor;
control.ActualHorizontalAnchor = options.HorizontalAnchor;
@@ -209,7 +222,7 @@ public static class OverlayDialog
control.Buttons = options.Buttons;
control.Title = options.Title;
control.CanLightDismiss = options.CanLightDismiss;
control.CanDragMove = options.CanDragMove;
DialogControlBase.SetCanDragMove(control, options.CanDragMove);
}
internal static T? Recall<T>(string? hostId) where T: Control

View File

@@ -14,6 +14,14 @@ public partial class OverlayDialogHost
private static void ResetDialogPosition(DialogControlBase control, Size newSize)
{
if (control.IsFullScreen)
{
control.Width = newSize.Width;
control.Height = newSize.Height;
SetLeft(control, 0);
SetTop(control, 0);
return;
}
var width = newSize.Width - control.Bounds.Width;
var height = newSize.Height - control.Bounds.Height;
var newLeft = width * control.HorizontalOffsetRatio??0;
@@ -84,6 +92,11 @@ public partial class OverlayDialogHost
}
this.Children.Add(control);
_layers.Add(new DialogPair(mask, control, false));
if (control.IsFullScreen)
{
control.Width = Bounds.Width;
control.Height = Bounds.Height;
}
control.Measure(this.Bounds.Size);
control.Arrange(new Rect(control.DesiredSize));
SetToPosition(control);
@@ -113,7 +126,10 @@ public partial class OverlayDialogHost
{
_modalCount--;
HasModal = _modalCount > 0;
await _maskDisappearAnimation.RunAsync(layer.Mask);
if (!IsAnimationDisabled)
{
await _maskDisappearAnimation.RunAsync(layer.Mask);
}
}
}
@@ -133,12 +149,20 @@ public partial class OverlayDialogHost
ResetZIndices();
this.Children.Add(mask);
this.Children.Add(control);
if (control.IsFullScreen)
{
control.Width = Bounds.Width;
control.Height = Bounds.Height;
}
control.Measure(this.Bounds.Size);
control.Arrange(new Rect(control.DesiredSize));
SetToPosition(control);
control.AddHandler(OverlayFeedbackElement.ClosedEvent, OnDialogControlClosing);
control.AddHandler(DialogControlBase.LayerChangedEvent, OnDialogLayerChanged);
_maskAppearAnimation.RunAsync(mask);
if (!IsAnimationDisabled)
{
_maskAppearAnimation.RunAsync(mask);
}
_modalCount++;
HasModal = _modalCount > 0;
control.IsClosed = false;

View File

@@ -28,13 +28,20 @@ public partial class OverlayDialogHost
SetDrawerPosition(control);
control.AddHandler(OverlayFeedbackElement.ClosedEvent, OnDrawerControlClosing);
var animation = CreateAnimation(control.Bounds.Size, control.Position, true);
if (mask is null)
if (IsAnimationDisabled)
{
await animation.RunAsync(control);
ResetDrawerPosition(control, this.Bounds.Size);
}
else
{
await Task.WhenAll(animation.RunAsync(control), _maskAppearAnimation.RunAsync(mask));
if (mask is null)
{
await animation.RunAsync(control);
}
else
{
await Task.WhenAll(animation.RunAsync(control), _maskAppearAnimation.RunAsync(mask));
}
}
}
@@ -48,9 +55,18 @@ public partial class OverlayDialogHost
control.Measure(this.Bounds.Size);
control.Arrange(new Rect(control.DesiredSize));
SetDrawerPosition(control);
_modalCount++;
HasModal = _modalCount > 0;
control.AddHandler(OverlayFeedbackElement.ClosedEvent, OnDrawerControlClosing);
var animation = CreateAnimation(control.Bounds.Size, control.Position);
await Task.WhenAll(animation.RunAsync(control), _maskAppearAnimation.RunAsync(mask));
if (IsAnimationDisabled)
{
ResetDrawerPosition(control, this.Bounds.Size);
}
else
{
await Task.WhenAll(animation.RunAsync(control), _maskAppearAnimation.RunAsync(mask));
}
}
private void SetDrawerPosition(DrawerControlBase control)
@@ -145,15 +161,23 @@ public partial class OverlayDialogHost
control.RemoveHandler(DialogControlBase.LayerChangedEvent, OnDialogLayerChanged);
if (layer.Mask is not null)
{
_modalCount--;
HasModal = _modalCount > 0;
layer.Mask.RemoveHandler(PointerPressedEvent, ClickMaskToCloseDialog);
var disappearAnimation = CreateAnimation(control.Bounds.Size, control.Position, false);
await Task.WhenAll(disappearAnimation.RunAsync(control), _maskDisappearAnimation.RunAsync(layer.Mask));
if (!IsAnimationDisabled)
{
var disappearAnimation = CreateAnimation(control.Bounds.Size, control.Position, false);
await Task.WhenAll(disappearAnimation.RunAsync(control), _maskDisappearAnimation.RunAsync(layer.Mask));
}
Children.Remove(layer.Mask);
}
else
{
var disappearAnimation = CreateAnimation(control.Bounds.Size, control.Position, false);
await disappearAnimation.RunAsync(control);
if (!IsAnimationDisabled)
{
var disappearAnimation = CreateAnimation(control.Bounds.Size, control.Position, false);
await disappearAnimation.RunAsync(control);
}
}
Children.Remove(control);
ResetZIndices();

View File

@@ -15,7 +15,7 @@ public partial class OverlayDialogHost: Canvas
private static readonly Animation _maskAppearAnimation;
private static readonly Animation _maskDisappearAnimation;
private readonly List<DialogPair> _layers = new List<DialogPair>();
private readonly List<DialogPair> _layers = new List<DialogPair>(10);
private class DialogPair
{
@@ -43,6 +43,8 @@ public partial class OverlayDialogHost: Canvas
get => _hasModal;
private set => SetAndRaise(HasModalProperty, ref _hasModal, value);
}
public bool IsAnimationDisabled { get; set; }
static OverlayDialogHost()
{