feat: add CloseOnMaskToClose

This commit is contained in:
rabbitism
2024-02-02 00:41:09 +08:00
parent 1d01022a03
commit 7e488d29c2
4 changed files with 102 additions and 29 deletions

View File

@@ -23,58 +23,89 @@
OnContent="Window" />
<ToggleSwitch
Content="Global/Local"
IsVisible="{Binding !#overlay.IsChecked}"
IsChecked="{Binding IsGlobal}"
IsVisible="{Binding !#overlay.IsChecked}"
OffContent="Local"
OnContent="Global" />
<ToggleSwitch
Content="Modal/Regular"
IsVisible="{Binding !#overlay.IsChecked}"
IsChecked="{Binding IsModal}"
IsVisible="{Binding !#overlay.IsChecked}"
OffContent="Regular"
OnContent="Modal" />
<ToggleSwitch
Content="ClickOnMaskToClose"
IsChecked="{Binding CanCloseMaskToClose}"
OffContent="No"
OnContent="Yes" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Buttons" />
<ComboBox ItemsSource="{Binding Buttons}" SelectedItem="{Binding SelectedButton}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Mode" />
<ComboBox ItemsSource="{Binding Modes}" SelectedItem="{Binding SelectedMode}"/>
<ComboBox ItemsSource="{Binding Modes}" SelectedItem="{Binding SelectedMode}" />
</StackPanel>
<Button Content="Show Dialog" Command="{Binding ShowDialogCommand}" />
<Button Command="{Binding ShowDialogCommand}" Content="Show Dialog" />
<TextBlock>
<Run Text="Default Result: "></Run>
<Run Text="{Binding DefaultResult}"/>
<Run Text="Default Result: " />
<Run Text="{Binding DefaultResult}" />
</TextBlock>
<TextBlock>
<Run Text="Dialog Date: "></Run>
<Run Text="{Binding Date}"/>
<Run Text="Dialog Date: " />
<Run Text="{Binding Date}" />
</TextBlock>
</StackPanel>
</TabItem>
<TabItem Header="Custom">
<StackPanel>
<ToggleSwitch Content="Window/Overlay" OffContent="Overlay" OnContent="Window" IsChecked="{Binding IsWindow}" Name="overlay2" />
<ToggleSwitch Content="Global/Local" IsVisible="{Binding !#overlay2.IsChecked}" OffContent="Local" OnContent="Global" IsChecked="{Binding IsGlobal}" />
<ToggleSwitch Content="Modal/Regular" OffContent="Regular" OnContent="Modal" IsChecked="{Binding IsModal}" />
<Button Content="Show Dialog" Command="{Binding ShowCustomDialogCommand}" />
<ToggleSwitch
Name="overlay2"
Content="Window/Overlay"
IsChecked="{Binding IsWindow}"
OffContent="Overlay"
OnContent="Window" />
<ToggleSwitch
Content="Global/Local"
IsChecked="{Binding IsGlobal}"
IsVisible="{Binding !#overlay2.IsChecked}"
OffContent="Local"
OnContent="Global" />
<ToggleSwitch
Content="Modal/Regular"
IsChecked="{Binding IsModal}"
OffContent="Regular"
OnContent="Modal" />
<ToggleSwitch
Content="ClickOnMaskToClose"
IsChecked="{Binding CanCloseMaskToClose}"
OffContent="No"
OnContent="Yes" />
<Button Command="{Binding ShowCustomDialogCommand}" Content="Show Dialog" />
<TextBlock>
<Run Text="Custom Result: "></Run>
<Run Text="{Binding Result}"/>
<Run Text="Custom Result: " />
<Run Text="{Binding Result}" />
</TextBlock>
<TextBlock>
<Run Text="Dialog Date: "></Run>
<Run Text="{Binding Date}"/>
<Run Text="Dialog Date: " />
<Run Text="{Binding Date}" />
</TextBlock>
</StackPanel>
</TabItem>
</TabControl>
<Grid Grid.Column="1">
<Border ClipToBounds="True" CornerRadius="20" BorderThickness="1" BorderBrush="{DynamicResource SemiGrey1}">
<Border
BorderBrush="{DynamicResource SemiGrey1}"
BorderThickness="1"
ClipToBounds="True"
CornerRadius="20">
<u:OverlayDialogHost HostId="LocalHost">
<u:OverlayDialogHost.DialogDataTemplates>
<DataTemplate DataType="x:String">
<TextBlock Text="{Binding Path=.}" Foreground="Red" Margin="24 24 48 24"></TextBlock>
<TextBlock
Margin="24,24,48,24"
Foreground="Red"
Text="{Binding Path=.}" />
</DataTemplate>
</u:OverlayDialogHost.DialogDataTemplates>
</u:OverlayDialogHost>

View File

@@ -54,6 +54,13 @@ public class DialogDemoViewModel: ObservableObject
get => _isModal;
set => SetProperty(ref _isModal, value);
}
private bool _canCloseMaskToClose;
public bool CanCloseMaskToClose
{
get => _canCloseMaskToClose;
set => SetProperty(ref _canCloseMaskToClose, value);
}
private DialogResult? _defaultResult;
public DialogResult? DefaultResult
@@ -110,7 +117,8 @@ public class DialogDemoViewModel: ObservableObject
{
Title = "Please select a date",
Mode = SelectedMode,
Buttons = SelectedButton
Buttons = SelectedButton,
CanClickOnMaskToClose = CanCloseMaskToClose,
}
);
Date = vm.Date;
@@ -155,7 +163,10 @@ public class DialogDemoViewModel: ObservableObject
if (IsModal)
{
Result = await OverlayDialog.ShowCustomModal<DialogWithAction, DialogWithActionViewModel, bool>(
vm, IsGlobal ? null : "LocalHost");
vm, IsGlobal ? null : "LocalHost", options: new OverlayDialogOptions()
{
CanClickOnMaskToClose = CanCloseMaskToClose,
});
Date = vm.Date;
}
else

View File

@@ -135,4 +135,16 @@ public class DialogControl: ContentControl
{
PseudoClasses.Set(PC_Modal, modal);
}
public void Close()
{
if (this.DataContext is IDialogContext context)
{
context.Close();
}
else
{
DialogControlClosing?.Invoke(this, DialogResult.None);
}
}
}

View File

@@ -32,15 +32,34 @@ public class OverlayDialogHost : Canvas
set => SetValue(OverlayMaskBrushProperty, value);
}
private Border CreateOverlayMask() => new()
private Border CreateOverlayMask(bool canCloseOnClick)
{
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch,
Width = this.Bounds.Width,
Height = this.Bounds.Height,
[!BackgroundProperty] = this[!OverlayMaskBrushProperty],
IsVisible = true,
};
Border border = new()
{
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch,
Width = this.Bounds.Width,
Height = this.Bounds.Height,
[!BackgroundProperty] = this[!OverlayMaskBrushProperty],
IsVisible = true,
};
if (canCloseOnClick)
{
border.AddHandler(PointerReleasedEvent, ClickBorderToCloseDialog);
}
return border;
}
private void ClickBorderToCloseDialog(object sender, PointerReleasedEventArgs e)
{
if (sender is Border border)
{
int i = _masks.IndexOf(border);
DialogControl dialog = _modalDialogs[i];
dialog.Close();
border.RemoveHandler(PointerReleasedEvent, ClickBorderToCloseDialog);
}
}
protected sealed override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
{
@@ -138,7 +157,7 @@ public class OverlayDialogHost : Canvas
/// <param name="control"></param>
internal void AddModalDialog(DialogControl control)
{
var mask = CreateOverlayMask();
var mask = CreateOverlayMask(control.CanClickOnMaskToClose);
_masks.Add(mask);
_modalDialogs.Add(control);
control.SetAsModal(true);