diff --git a/docs/docs/documentation/getting-started/launch.md b/docs/docs/documentation/getting-started/launch.md index de7102411..94d06b160 100644 --- a/docs/docs/documentation/getting-started/launch.md +++ b/docs/docs/documentation/getting-started/launch.md @@ -15,6 +15,10 @@ Include SukiUI styles in your `App.axaml` ``` +::: warning +If a default `ThemeColor` is not set and you do not set the theme by any other means, your window and many controls will be completely transparent. +::: + ## Use SukiWindow as MainWindow Change MainWindow from Window class to SukiWindow class. diff --git a/docs/docs/documentation/hosts/dialog.md b/docs/docs/documentation/hosts/dialog.md index 6af71834a..5a1beb8ca 100644 --- a/docs/docs/documentation/hosts/dialog.md +++ b/docs/docs/documentation/hosts/dialog.md @@ -2,4 +2,114 @@ SukiUI provides a [host](./hosts) which can display dialogs easily at any level of your application. As standard we recommend simply using it in `SukiWindow.Hosts` as this provides the best experience, however dialogs can be localised within whatever context you require. -The host is designed in such a way as to be MVVM friendly and as long as you have access to the `ISukiDialogManager` instance used for a given `SukiDialogHost` you can display dialogs in it. \ No newline at end of file +The host is designed in such a way as to be MVVM friendly and as long as you have access to the `ISukiDialogManager` instance used for a given `SukiDialogHost` you can display dialogs in it. + +Here is a simple example setup using MVVM: + +### View +```xml + + + + + + +``` + +### ViewModel +```cs +public class ExampleViewModel +{ + public ISukiDialogManager DialogManager { get; } = new SukiDialogManager(); +} +``` +--- + +If you do not wish to use MVVM, or would rather a simpler solution that "just works", then you can choose to implement it like this: + +### AXAML +```xml + + + + + + +``` +### Code-Behind +```cs +public class MainWindow : SukiWindow +{ + public static ISukiDialogManager DialogManager = new SukiDialogManager(); + + public MainWindow() + { + InitializeComponent(); + DialogHost.Manager = DialogManager; + } +} +``` + +### Usage + +```cs +MainWindow.DialogManager.CreateDialog() + .TryShow(); +``` + +## Displaying Dialogs + +In order to construct and therefore display dialogs, a fluent style builder is provided that makes constructing dialogs simple. To begin constructing a dialog, it's recommended to call the extension method `.CreateDialog()` on the `ISukiDialogManager` instance you want it to be displayed in. + +From here method calls can be chained to construct the dialog as desired, most of these are self explanatory and have associated XMLDocs for convenience. + +Finally to display a dialog the `.TryShow()` method can be called to attempt to show the dialog if none is currently shown. + +Here is a simple example, expanding on the `ViewModel` above: + +```cs +public void DisplayDialog() +{ + DialogManager.CreateDialog() + .WithTitle("Example Dialog") + .WithContent("The content of an example dialog can be seen here.") + .TryShow(); +} +``` + +## Dismissing Dialogs + +By default, dialogs have no mechanism to be dismissed. In order to add dismissal mechanisms to a dialog it's necessary to use the `.Dismiss()` method, at which point you can provide a method by which the dialogs can be dismissed. Currently the only standalone dismissal is `.ByClickingBackground()` which will dismiss the dialog when the user clicks outside of it. + +Here is an example of an empty dialog which will be dismissed when the background is clicked. + +```cs +public void DisplayDialog() +{ + DialogManager.CreateDialog() + .Dismiss().ByClickingBackground() + .TryShow(); +} +``` + +The other method of dismissing dialogs involves the use of action buttons, discussed in the next section. + +## Interactions + +Dialogs can be interacted with simply by including a call to `.WithActionButton()`, this can be supplied with some content for the button, an on-clicked callback and optionally the `dismissOnClick` parameter can be set to `true` if you want the dialog to close immediately on clicking that specific button. Any number of `.WithActionButton()` calls can be included in the chain to add any number of buttons. + +Here is an example of a dialog with two buttons, one of which will dismiss the dialog. + +```cs +public void DisplayDialog() +{ + dialogManager.CreateDialog() + .WithActionButton("Don't Close", _ => { }) + .WithActionButton("Close ", _ => { }, true) // last parameter optional + .TryShow(); +} +``` + +## MessageBox Style + +It is possible to use the `.OfType()` method to cause the dialog to use an included MessageBox style, the styles included are: Information, Success, Warning and Error. \ No newline at end of file