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

feat: improve dialog demo layout.

Browse Source
This commit is contained in:
rabbitism
2024-08-25 21:49:48 +08:00
parent 1553a936b5
commit 9758e1b826
8 changed files with 388 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
x:DataType="local:PlainDialogViewModel"
x:CompileBindings="True"
x:Class="Ursa.Demo.Dialogs.PlainDialog">
<StackPanel>
<StackPanel HorizontalAlignment="Center">
<Calendar SelectedDate="{Binding Date}" ></Calendar>
<TextBlock TextWrapping="Wrap" Text="{Binding Text}"></TextBlock>
</StackPanel>

260
demo/Ursa.Demo/Pages/DialogDemo.axaml
View File

@@ -6,115 +6,169 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:u="https://irihi.tech/ursa"
xmlns:vm="using:Ursa.Demo.ViewModels"
d:DesignHeight="450"
d:DesignHeight="1200"
d:DesignWidth="800"
x:CompileBindings="True"
x:DataType="vm:DialogDemoViewModel"
mc:Ignorable="d">
<Grid ColumnDefinitions="Auto, *">
<TabControl Grid.Column="0" Width="300">
<TabItem Header="Default">
<StackPanel>
<ToggleSwitch
Name="overlay"
Content="Window/Overlay"
IsChecked="{Binding IsWindow}"
OffContent="Overlay"
OnContent="Window" />
<ToggleSwitch
Content="Global/Local"
IsChecked="{Binding IsGlobal}"
IsVisible="{Binding !#overlay.IsChecked}"
OffContent="Local"
OnContent="Global" />
<ToggleSwitch
Name="defaultModal"
Content="Modal/Regular"
IsChecked="{Binding IsModal}"
IsVisible="{Binding !#overlay.IsChecked}"
OffContent="Regular"
OnContent="Modal" />
<ToggleSwitch
Content="HideInTaskBar/ShowInTaskBar"
IsChecked="{Binding ShowInTaskBar}"
IsVisible="{Binding #overlay.IsChecked}"
OffContent="HideInTaskBar"
OnContent="ShowInTaskBar" />
<ToggleSwitch
Content="ClickOnMaskToClose"
IsChecked="{Binding CanLightDismiss}"
OffContent="No"
OnContent="Yes" />
<ToggleSwitch
Content="FullScreen"
IsChecked="{Binding FullScreen}"
OffContent="No"
OnContent="Yes" />
<StackPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center" Text="Buttons" />
<u:EnumSelector EnumType="{x:Type u:DialogButton}" Value="{Binding SelectedButton}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<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, FallbackValue=''}" />
</TextBlock>
<TextBlock>
<Run Text="Dialog Date: " />
<Run Text="{Binding Date, FallbackValue=''}" />
</TextBlock>
</StackPanel>
<TabControl Grid.Column="0" TabStripPlacement="Left">
<TabItem Header="Default Window Dialog">
<u:Form
Width="300"
Margin="16,0"
DataContext="{Binding DefaultWindowDialogDemoViewModel}"
LabelPosition="Top">
<TextBox
HorizontalAlignment="Stretch"
u:FormItem.Label="Title"
Text="{Binding Title}" />
<u:EnumSelector
HorizontalAlignment="Stretch"
u:FormItem.Label="Startup Location"
EnumType="WindowStartupLocation"
Value="{Binding Location}" />
<u:FormItem Label="PixelPosition">
<UniformGrid Columns="2" Rows="1">
<u:NumericIntUpDown InnerLeftContent="X" Value="{Binding X}" />
<u:NumericIntUpDown InnerLeftContent="Y" Value="{Binding Y}" />
</UniformGrid>
</u:FormItem>
<u:EnumSelector
HorizontalAlignment="Stretch"
u:FormItem.Label="Dialog Mode"
EnumType="u:DialogMode"
Value="{Binding Mode}" />
<u:EnumSelector
HorizontalAlignment="Stretch"
u:FormItem.Label="Dialog Buttons"
EnumType="u:DialogButton"
Value="{Binding Button}" />
<CheckBox u:FormItem.Label="Show In Taskbar" IsChecked="{Binding ShowInTaskBar}" />
<CheckBox
u:FormItem.Label="Is Close Button Visible"
IsChecked="{Binding IsCloseButtonVisible}"
IsThreeState="True" />
<Button
HorizontalAlignment="Left"
u:FormItem.NoLabel="True"
Command="{Binding ShowDialogCommand}"
Content="Show" />
</u:Form>
</TabItem>
<TabItem Header="Custom">
<StackPanel>
<TabItem Header="Custom Window Dialog">
<u:Form
Width="300"
Margin="16,0"
DataContext="{Binding CustomWindowDialogDemoViewModel}"
LabelPosition="Top">
<TextBox
HorizontalAlignment="Stretch"
u:FormItem.Label="Title"
Text="{Binding Title}" />
<u:EnumSelector
HorizontalAlignment="Stretch"
u:FormItem.Label="Startup Location"
EnumType="WindowStartupLocation"
Value="{Binding Location}" />
<u:FormItem Label="PixelPosition">
<UniformGrid Columns="2" Rows="1">
<u:NumericIntUpDown InnerLeftContent="X" Value="{Binding X}" />
<u:NumericIntUpDown InnerLeftContent="Y" Value="{Binding Y}" />
</UniformGrid>
</u:FormItem>
<CheckBox u:FormItem.Label="Show In Taskbar" IsChecked="{Binding ShowInTaskBar}" />
<CheckBox
u:FormItem.Label="Is Close Button Visible"
IsChecked="{Binding IsCloseButtonVisible}"
IsThreeState="True" />
<CheckBox u:FormItem.Label="Modal" IsChecked="{Binding IsModal}" />
<Button
HorizontalAlignment="Left"
u:FormItem.NoLabel="True"
Command="{Binding ShowDialogCommand}"
Content="Show" />
</u:Form>
</TabItem>
<TabItem Header="Default Overlay Dialog">
<u:Form
Width="300"
Margin="16,0"
DataContext="{Binding DefaultOverlayDialogDemoViewModel}"
LabelPosition="Top">
<TextBox
HorizontalAlignment="Stretch"
u:FormItem.Label="Title"
Text="{Binding Title}" />
<u:EnumSelector
HorizontalAlignment="Stretch"
u:FormItem.Label="Dialog Mode"
EnumType="u:DialogMode"
Value="{Binding Mode}" />
<u:EnumSelector
HorizontalAlignment="Stretch"
u:FormItem.Label="Dialog Buttons"
EnumType="u:DialogButton"
Value="{Binding Button}" />
<CheckBox
u:FormItem.Label="Is Close Button Visible"
IsChecked="{Binding IsCloseButtonVisible}"
IsThreeState="True" />
<CheckBox u:FormItem.Label="Modal" IsChecked="{Binding IsModal}" />
<CheckBox u:FormItem.Label="Can DragMove" IsChecked="{Binding CanDragMove}" />
<CheckBox u:FormItem.Label="Can LightDismiss" IsChecked="{Binding CanLightDismiss}" />
<CheckBox u:FormItem.Label="FullScreen" IsChecked="{Binding FullScreen}" />
<ToggleSwitch
Name="overlay2"
Content="Window/Overlay"
IsChecked="{Binding IsWindow}"
OffContent="Overlay"
OnContent="Window" />
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>
</TabItem>
<TabItem Header="Custom Overlay Dialog">
<u:Form
Width="300"
Margin="16,0"
DataContext="{Binding CustomOverlayDialogDemoViewModel}"
LabelPosition="Top">
<TextBox
HorizontalAlignment="Stretch"
u:FormItem.Label="Title"
Text="{Binding Title}" />
<u:EnumSelector
HorizontalAlignment="Stretch"
u:FormItem.Label="Dialog Mode"
EnumType="u:DialogMode"
Value="{Binding Mode}" />
<u:EnumSelector
HorizontalAlignment="Stretch"
u:FormItem.Label="Dialog Buttons"
EnumType="u:DialogButton"
Value="{Binding Button}" />
<CheckBox
u:FormItem.Label="Is Close Button Visible"
IsChecked="{Binding IsCloseButtonVisible}"
IsThreeState="True" />
<CheckBox u:FormItem.Label="Modal" IsChecked="{Binding IsModal}" />
<CheckBox u:FormItem.Label="Can DragMove" IsChecked="{Binding CanDragMove}" />
<CheckBox u:FormItem.Label="Can LightDismiss" IsChecked="{Binding CanLightDismiss}" />
<CheckBox u:FormItem.Label="FullScreen" IsChecked="{Binding FullScreen}" />
<ToggleSwitch
Content="Global/Local"
IsChecked="{Binding IsGlobal}"
IsVisible="{Binding !#overlay2.IsChecked}"
OffContent="Local"
OnContent="Global" />
<ToggleSwitch
Content="HideInTaskBar/ShowInTaskBar"
IsChecked="{Binding ShowInTaskBar}"
IsVisible="{Binding #overlay2.IsChecked}"
OffContent="HideInTaskBar"
OnContent="ShowInTaskBar" />
<ToggleSwitch
Name="modal"
Content="Modal/Regular"
IsChecked="{Binding IsModal}"
OffContent="Regular"
OnContent="Modal" />
<ToggleSwitch
Content="ClickOnMaskToClose"
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: " />
<Run Text="{Binding Result}" />
</TextBlock>
<TextBlock>
<Run Text="Dialog Date: " />
<Run Text="{Binding Date}" />
</TextBlock>
</StackPanel>
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>
</TabItem>
</TabControl>
<Grid Grid.Column="1">
@@ -122,8 +176,8 @@
BorderBrush="{DynamicResource SemiGrey1}"
BorderThickness="1"
ClipToBounds="True"
CornerRadius="20">
<u:OverlayDialogHost HostId="LocalHost">
CornerRadius="12">
<u:OverlayDialogHost HostId="{x:Static vm:DialogDemoViewModel.LocalHost}">
<u:OverlayDialogHost.DialogDataTemplates>
<DataTemplate DataType="x:String">
<TextBlock

299
demo/Ursa.Demo/ViewModels/DialogDemoViewModel.cs
View File

@@ -1,7 +1,10 @@
using System;
using System.Collections.ObjectModel;
using System.Threading.Channels;
using System.Threading.Tasks;
using System.Windows.Input;
using Avalonia;
using Avalonia.Controls;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Ursa.Controls;
@@ -11,129 +14,205 @@ namespace Ursa.Demo.ViewModels;
public partial class DialogDemoViewModel: ObservableObject
{
public ICommand ShowDialogCommand { get; set; }
public ICommand ShowCustomDialogCommand { get; set; }
public const string LocalHost = "LocalHost";
public DefaultWindowDialogDemoViewModel DefaultWindowDialogDemoViewModel { get; set; } = new();
public CustomWindowDialogDemoViewModel CustomWindowDialogDemoViewModel { get; set; } = new();
public DefaultOverlayDialogDemoViewModel DefaultOverlayDialogDemoViewModel { get; set; } = new();
public CustomOverlayDialogDemoViewModel CustomOverlayDialogDemoViewModel { get; set; } = new();
}
[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 partial class DefaultWindowDialogDemoViewModel: ObservableObject
{
[ObservableProperty] private WindowStartupLocation _location;
[ObservableProperty] private int? _x;
[ObservableProperty] private int? _y;
[ObservableProperty] private string? _title;
[ObservableProperty] private DialogMode _mode;
[ObservableProperty] private DialogButton _button;
[ObservableProperty] private bool _showInTaskBar;
public DialogDemoViewModel()
[ObservableProperty] private bool? _isCloseButtonVisible;
public ICommand ShowDialogCommand { get; }
public DefaultWindowDialogDemoViewModel()
{
ShowDialogCommand = new AsyncRelayCommand(ShowDialog);
ShowCustomDialogCommand = new AsyncRelayCommand(ShowCustomDialog);
Mode = DialogMode.None;
Button = DialogButton.OKCancel;
Location = WindowStartupLocation.CenterScreen;
}
private async Task ShowDialog()
{
var options = new DialogOptions()
{
Title = Title,
Mode = Mode,
Button = Button,
ShowInTaskBar = ShowInTaskBar,
IsCloseButtonVisible = IsCloseButtonVisible,
StartupLocation = Location,
};
if (X.HasValue && Y.HasValue)
{
options.Position = new PixelPoint(X.Value, Y.Value);
}
await Dialog.ShowModal<PlainDialog, PlainDialogViewModel>(new PlainDialogViewModel(), options: options);
}
}
public partial class CustomWindowDialogDemoViewModel: ObservableObject
{
[ObservableProperty] private WindowStartupLocation _location;
[ObservableProperty] private int? _x;
[ObservableProperty] private int? _y;
[ObservableProperty] private string? _title;
[ObservableProperty] private bool _showInTaskBar;
[ObservableProperty] private bool? _isCloseButtonVisible;
[ObservableProperty] private bool _isModal;
public ICommand ShowDialogCommand { get; }
public CustomWindowDialogDemoViewModel()
{
ShowDialogCommand = new AsyncRelayCommand(ShowDialog);
Location = WindowStartupLocation.CenterScreen;
IsModal = true;
}
private async Task ShowDialog()
{
var options = new DialogOptions()
{
Title = Title,
ShowInTaskBar = ShowInTaskBar,
IsCloseButtonVisible = IsCloseButtonVisible,
StartupLocation = Location,
};
if (X.HasValue && Y.HasValue)
{
options.Position = new PixelPoint(X.Value, Y.Value);
}
if (IsModal)
{
await Dialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, object>(new DialogWithActionViewModel(),
options: options);
}
else
{
Dialog.ShowCustom<DialogWithAction, DialogWithActionViewModel>(new DialogWithActionViewModel(),
options: options);
}
}
}
public partial class DefaultOverlayDialogDemoViewModel : ObservableObject
{
[ObservableProperty] private HorizontalPosition _horizontalAnchor;
[ObservableProperty] private VerticalPosition _verticalAnchor;
[ObservableProperty] private double? _horizontalOffset;
[ObservableProperty] private double? _verticalOffset;
[ObservableProperty] private bool _fullScreen;
[ObservableProperty] private DialogMode _mode;
[ObservableProperty] private DialogButton _button;
[ObservableProperty] private string? _title;
[ObservableProperty] private bool _canLightDismiss;
[ObservableProperty] private bool _canDragMove;
[ObservableProperty] private bool? _isCloseButtonVisible;
[ObservableProperty] private bool _isModal;
[ObservableProperty] private bool _isLocal;
public ICommand ShowDialogCommand { get; }
public DefaultOverlayDialogDemoViewModel()
{
ShowDialogCommand = new AsyncRelayCommand(ShowDialog);
HorizontalAnchor = HorizontalPosition.Center;
VerticalAnchor = VerticalPosition.Center;
CanDragMove = true;
IsModal = true;
}
private async Task ShowDialog()
{
var options = new OverlayDialogOptions()
{
FullScreen = FullScreen,
HorizontalAnchor = HorizontalAnchor,
VerticalAnchor = VerticalAnchor,
HorizontalOffset = HorizontalOffset,
VerticalOffset = VerticalOffset,
Mode = Mode,
Buttons = Button,
Title = Title,
CanLightDismiss = CanLightDismiss,
CanDragMove = CanDragMove,
IsCloseButtonVisible = IsCloseButtonVisible,
};
string? dialogHostId = IsLocal ? DialogDemoViewModel.LocalHost : null;
if (IsModal)
{
await OverlayDialog.ShowModal<PlainDialog, PlainDialogViewModel>(new PlainDialogViewModel(), dialogHostId, options: options);
}
else
{
OverlayDialog.Show<PlainDialog, PlainDialogViewModel>(new PlainDialogViewModel(), dialogHostId, options: options);
}
}
}
public partial class CustomOverlayDialogDemoViewModel: ObservableObject
{
[ObservableProperty] private HorizontalPosition _horizontalAnchor;
[ObservableProperty] private VerticalPosition _verticalAnchor;
[ObservableProperty] private double? _horizontalOffset;
[ObservableProperty] private double? _verticalOffset;
[ObservableProperty] private bool _fullScreen;
[ObservableProperty] private DialogMode _mode;
[ObservableProperty] private DialogButton _button;
[ObservableProperty] private string? _title;
[ObservableProperty] private bool _canLightDismiss;
[ObservableProperty] private bool _canDragMove;
[ObservableProperty] private bool? _isCloseButtonVisible;
[ObservableProperty] private bool _isModal;
[ObservableProperty] private bool _isLocal;
public ICommand ShowDialogCommand { get; }
public CustomOverlayDialogDemoViewModel()
{
ShowDialogCommand = new AsyncRelayCommand(ShowDialog);
HorizontalAnchor = HorizontalPosition.Center;
VerticalAnchor = VerticalPosition.Center;
CanDragMove = true;
IsModal = true;
IsGlobal = true;
ShowInTaskBar = false;
}
private async Task ShowDialog()
{
var vm = new PlainDialogViewModel();
if (IsWindow)
var options = new OverlayDialogOptions()
{
DefaultResult = await Dialog.ShowModal<PlainDialog, PlainDialogViewModel>(
vm, options: new DialogOptions()
{
Title = "Please select a date",
Mode = SelectedMode,
Button = SelectedButton,
ShowInTaskBar = ShowInTaskBar,
});
Date = vm.Date;
FullScreen = FullScreen,
HorizontalAnchor = HorizontalAnchor,
VerticalAnchor = VerticalAnchor,
HorizontalOffset = HorizontalOffset,
VerticalOffset = VerticalOffset,
Mode = Mode,
Buttons = Button,
Title = Title,
CanLightDismiss = CanLightDismiss,
CanDragMove = CanDragMove,
IsCloseButtonVisible = IsCloseButtonVisible,
};
var dialogHostId = IsLocal ? DialogDemoViewModel.LocalHost : null;
if (IsModal)
{
await OverlayDialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, object>(new DialogWithActionViewModel(), dialogHostId, options: options);
}
else
{
if (IsModal)
{
DefaultResult = await OverlayDialog.ShowModal<PlainDialog, PlainDialogViewModel>(
vm,
IsGlobal ? null : "LocalHost",
new OverlayDialogOptions()
{
Title = "Please select a date",
Mode = SelectedMode,
Buttons = SelectedButton,
CanLightDismiss = CanLightDismiss,
HorizontalAnchor = HorizontalPosition.Right,
HorizontalOffset = 50,
VerticalAnchor = VerticalPosition.Top,
VerticalOffset = 50,
FullScreen = FullScreen,
}
);
Date = vm.Date;
}
else
{
OverlayDialog.Show<PlainDialog, PlainDialogViewModel>(
new PlainDialogViewModel(),
IsGlobal ? null : "LocalHost",
new OverlayDialogOptions()
{
Title = "Please select a date",
Mode = SelectedMode,
Buttons = SelectedButton,
CanLightDismiss = CanLightDismiss,
FullScreen = FullScreen,
});
}
OverlayDialog.ShowCustom<DialogWithAction, DialogWithActionViewModel>(new DialogWithActionViewModel(), dialogHostId, options: options);
}
}
private async Task ShowCustomDialog()
{
var vm = new DialogWithActionViewModel();
if (IsWindow)
{
if (IsModal)
{
Result = await Dialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(
vm,
options: new DialogOptions
{
ShowInTaskBar = ShowInTaskBar
});
Date = vm.Date;
}
else
{
Dialog.ShowCustom<DialogWithAction, DialogWithActionViewModel>(
vm,
options: new DialogOptions
{
ShowInTaskBar = ShowInTaskBar
});
}
}
else
{
if (IsModal)
{
Result = await OverlayDialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(
vm, IsGlobal ? null : "LocalHost", options: new OverlayDialogOptions()
{
CanLightDismiss = CanLightDismiss,
FullScreen = FullScreen,
});
Date = vm.Date;
}
else
{
OverlayDialog.ShowCustom<DialogWithAction, DialogWithActionViewModel>(new DialogWithActionViewModel(),
IsGlobal ? null : "LocalHost",
options: new OverlayDialogOptions{ CanLightDismiss = CanLightDismiss, FullScreen = FullScreen});
}
}
}
}