microsoft · dvoituron · Sep 22, 2023 · Sep 20, 2023 · Sep 20, 2023 · Sep 20, 2023
@@ -14,13 +14,13 @@
    private async Task OpenSiteSettingsAsync()
    {
        DemoLogger.WriteLine($"Open site settings");
        _dialog = await DialogService.ShowPanelAsync<SiteSettingsPanel, GlobalState>(new DialogParameters<GlobalState>()
        {
            ShowTitle = true,
             Title = "Site settings",
             Content = GlobalState,
             Alignment = HorizontalAlignment.Right,
-            PrimaryAction = "Ok",
+            PrimaryAction = "OK",
             SecondaryAction = null,
             ShowDismiss = true
         });

@@ -1833,6 +1833,9 @@
             Closes the dialog
             </summary>
         </member>
+        <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialog.IsDefaultDialogHeader">
+            <summary />
+        </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialogFooter.Alignment">
             <summary>
             Gets or sets the dialog position:
@@ -1870,24 +1873,37 @@
             The event callback invoked when secondary button is clicked
             </summary>
         </member>
-        <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialogFooter.ShowPrimaryAction">
+        <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialogFooter.ChildContent">
             <summary>
-            Gets whether the primary button is displayed or not. Depends on PrimaryAction having a value.
+            Gets or sets the content to be rendered inside the component.
             </summary>
         </member>
-        <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialogFooter.ShowSecondaryAction">
+        <member name="M:Microsoft.Fast.Components.FluentUI.FluentDialogFooter.OnInitialized">
             <summary>
             Gets whether the secondary button is displayed or not. Depends on SecondaryAction having a value. 
             </summary>
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialogHeader.Title">
             <summary>
-            Title of the dialog
+            Title of the dialog.
+            If defined, this value will replace the one defined in the <see cref="T:Microsoft.Fast.Components.FluentUI.DialogParameters"/>.
+            </summary>
+        </member>
+        <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialogHeader.ShowTitle">
+            <summary>
+            When true, shows the title in the header.
+            If defined, this value will replace the one defined in the <see cref="T:Microsoft.Fast.Components.FluentUI.DialogParameters"/>.
             </summary>
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialogHeader.ShowDismiss">
             <summary>
             When true, shows the dismiss button in the header.
+            If defined, this value will replace the one defined in the <see cref="T:Microsoft.Fast.Components.FluentUI.DialogParameters"/>.
+            </summary>
+        </member>
+        <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialogHeader.ChildContent">
+            <summary>
+            Gets or sets the content to be rendered inside the component.
             </summary>
         </member>
         <member name="M:Microsoft.Fast.Components.FluentUI.FluentDialogProvider.#ctor">

@@ -76,12 +76,20 @@
 <p>
     Interaction with parent dialog can be made by injecting FluentDialog as Cascading Parameter. See <code>SimpleDialog.razor</code> for more details.
 </p>
+
 <DemoSection Title="DialogService with IDialogReference" MaxHeight="500px" Component="@typeof(DialogServiceExample)" AdditionalFiles="@(new[] {"SimpleDialog.razor"})">
     <Description>
         This example shows how to use async methods to show a dialog and get the result back from it. 
     </Description>
 </DemoSection>
 
+<DemoSection Title="Customized Dialog" Component="@typeof(DialogCustomizableExample)" AdditionalFiles="@(new[] {"SimpleCustomizedDialog.razor"})">
+    <Description>
+        This example shows how to open a Dialog using the <b>DialogService</b>.
+        The dialog is customized by specifying a custom header and footer: <b>FluentDialogHeader</b>, <b>FluentDialogFooter</b> and <b>FluentDialogBody</b>
+    </Description>
+</DemoSection>
+
 <DemoSection Title="DialogService with EventCallback" MaxHeight="500px" Component="@typeof(DialogServiceCallbackExample)" AdditionalFiles="@(new[] {"SimpleDialog.razor"})">
     <Description>
         This example shows how to use an <code>EventCallback</code> parameter to get data back from the dialog.
@@ -119,56 +127,38 @@
 <ApiDocumentation Component="typeof(DialogParameters<>)" GenericLabel="TData" />
 
 <h3>Dialog header and footer</h3>
-<p>The dialog header and footer can be changed by using the <code>FluentDialog</code>'s <code>HeaderTemplate</code> and <code>FooterTemplate</code> parameters.</p>
+<p>The dialog header and footer can be changed by using the <code>FluentDialogHeader</code> and <code>FluentDialogFooter</code> component.</p>
 <p>
     The default implementation uses the <code>FluentDialogHeader</code> and <code>FluentDialogFooter</code> components (see documentation below). 
     You can use the content of these components as the base for your own implementation:
 </p>
 
-<h4>Default dialog header</h4>
+<h4>Default dialog header (simplified version)</h4>
 <CodeSnippet>
-&lt;div class=&quot;fluent-dialog-header&quot;&gt;
-    &lt;FluentStack Orientation=&quot;Orientation.Horizontal&quot; VerticalAlignment=&quot;VerticalAlignment.Center&quot;&gt;
-        &lt;FluentLabel Typo=&quot;Typography.PaneHeader&quot; Style=&quot;width: 100%; margin: 0px;&quot;&gt;@@Title&lt;/FluentLabel&gt;
-        @@if (ShowDismiss)
-        {
-            &lt;FluentButton Appearance = &quot; Appearance.Stealth &quot;
-                @@onclick= &quot;@@(() = &gt; Dialog!.CancelAsync())&quot; &gt;
-                &lt;FluentIcon Icon = &quot; CoreIcons.Regular.Size24.Dismiss & quot; Width = &quot; 16px & quot; / &gt;
-            &lt;/FluentButton &gt;
-        }
-    &lt;/FluentStack&gt;
-&lt;/div&gt;
+    &lt;FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Top">
+        &lt;div style="width: 100%;">
+            &lt;FluentLabel Typo="Typography.PaneHeader">&commat;Title&lt;/FluentLabel>
+        &lt;/div>
+        &lt;FluentButton Appearance="Appearance.Stealth">
+            &lt;FluentIcon Icon="CoreIcons.Regular.Size24.Dismiss" />
+        &lt;FluentButton>
+    &lt;/FluentStack>
 </CodeSnippet>
 
-<h4>Default dialog footer</h4>
+<h4>Default dialog footer (simplified version)</h4>
 <CodeSnippet>
-&lt;div class=&quot;@@(Alignment == HorizontalAlignment.Center ? &quot;fluent-dialog-footer-normal&quot; : &quot;fluent-dialog-footer-bottom&quot;)&quot;&gt;
-    &lt;FluentStack Orientation=&quot;Orientation.Horizontal&quot;
-                 HorizontalAlignment=&quot;@@(Alignment == HorizontalAlignment.Center ? HorizontalAlignment.Right : HorizontalAlignment.Left)&quot;&gt;
-        @@if (ShowPrimaryAction)
-        {
-            &lt;FluentButton title=&quot;@@PrimaryAction&quot;
-                          @@onclick=&quot;@@OnPrimaryActionButtonClickAsync&quot;
-                          Appearance=&quot;Appearance.Accent&quot;
-                          Disabled=&quot;@@(!PrimaryActionEnabled)&quot;&gt;
-                @@PrimaryAction
-            &lt;/FluentButton&gt;
-        }
-        @@if (ShowSecondaryAction)
-        {
-            &lt;FluentButton title=&quot;@@SecondaryAction&quot;
-                          @@onclick=&quot;@@OnSecondaryActionButtonClickAsync&quot;
-                          Appearance=&quot;Appearance.Neutral&quot;
-                          Disabled=&quot;@@(!SecondaryActionEnabled)&quot;&gt;
-                @@SecondaryAction
-            &lt;/FluentButton&gt;
-        }
-    &lt;/FluentStack&gt;
-&lt;/div&gt;
+    &lt;FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Right" VerticalAlignment="VerticalAlignment.Bottom">
+        &lt;FluentButton Title="&commat;PrimaryAction" Appearance="Appearance.Accent" Disabled="&commat;PrimaryActionEnabled">
+            &commat;PrimaryAction
+        &lt;/FluentButton>
+        &lt;FluentButton Title="&commat;SecondaryAction" Appearance="Appearance.Neutral" Disabled="&commat;SecondaryActionEnabled">
+            &commat;SecondaryAction
+        &lt;/FluentButton>
+    &lt;/FluentStack>
 </CodeSnippet>
 
 <ApiDocumentation Component="typeof(FluentDialogHeader)" />
 
 <ApiDocumentation Component="typeof(FluentDialogFooter)" />
 
+<ApiDocumentation Component="typeof(FluentDialogBody)" />
@@ -0,0 +1,22 @@
+@inject IDialogService DialogService
+
+<FluentButton Appearance="Appearance.Accent" OnClick="@OpenAsync">Open dialog</FluentButton>
+
+<p>Name: @DialogData.Firstname</p>
+
+@code
+{
+    SimplePerson DialogData { get; set; } = new() { Firstname = "Bill", Age = 42 };
+
+    private async Task OpenAsync()
+    {
+        var dialog = await DialogService.ShowDialogAsync<SimpleCustomizedDialog>(DialogData, new DialogParameters()
+            {
+                Height = "200px",
+                Title = $"Updating the {DialogData.Firstname} sheet",
+            });
+
+        var result = await dialog.Result;
+        var data = result.Data as SimplePerson;
+    }
+}
@@ -18,7 +18,7 @@
     </FluentCheckbox>
 </div>
 <div style="margin-top: 1rem;">
-    <FluentButton @onclick="@OpenDialog" Appearance="Appearance.Accent">
+    <FluentButton OnClick="@OpenDialogAsync" Appearance="Appearance.Accent">
         Open Dialog
     </FluentButton>
 </div>
@@ -34,11 +34,11 @@
             Age = 39,
         };
 
-    private void OpenDialog()
+    private async Task OpenDialogAsync()
     {
         DemoLogger.WriteLine($"Open dialog centered");
 
-        DialogParameters<SimplePerson> parameters = new()
+        await DialogService.ShowDialogAsync<SimpleDialog>(simplePerson, new DialogParameters()
             {
                 Title = $"Hello {simplePerson.Firstname}",
                 OnDialogResult = DialogService.CreateDialogCallback(this, HandleDialog),
@@ -47,11 +47,9 @@
                 SecondaryAction = "No",
                 Width = "500px",
                 Height = "500px",
-                Content = simplePerson,
                 TrapFocus = _trapFocus,
                 Modal = _modal,
-            };
-        DialogService.ShowDialog<SimpleDialog, SimplePerson>(parameters);
+            });
     }
 
     private async Task HandleDialog(DialogResult result)

@@ -38,20 +38,19 @@
     {
         DemoLogger.WriteLine($"Open dialog centered");
 
-        DialogParameters<SimplePerson> parameters = new()
+        DialogParameters parameters = new()
         {
             Title = $"Hello {simplePerson.Firstname}",
             PrimaryAction = "Yes",
             PrimaryActionEnabled = false,
             SecondaryAction = "No",
             Width = "500px",
             Height = "500px",
-            Content = simplePerson,
             TrapFocus = _trapFocus,
             Modal = _modal,
         };
 
-        IDialogReference dialog = await DialogService.ShowDialogAsync<SimpleDialog, SimplePerson>(parameters);
+        IDialogReference dialog = await DialogService.ShowDialogAsync<SimpleDialog>(simplePerson, parameters);
         DialogResult? result = await dialog.Result;
 
 

@@ -0,0 +1,35 @@
+@implements IDialogContentComponent<SimplePerson>
+
+@* Header *@
+<FluentDialogHeader ShowDismiss="true">
+    <FluentStack VerticalAlignment="VerticalAlignment.Center">
+        <FluentIcon Value="@(new Icons.Regular.Size24.WindowApps())" />
+        <FluentLabel Typo="Typography.PaneHeader">
+            @Dialog.Instance.Parameters.Title
+        </FluentLabel>
+    </FluentStack>
+</FluentDialogHeader>
+
+@* Footer *@
+<FluentDialogFooter>
+    <FluentButton Appearance="Appearance.Accent" OnClick="@SaveAsync">Close</FluentButton>
+</FluentDialogFooter>
+
+@* Body *@
+<FluentDialogBody>
+    <FluentTextField @bind-Value="@Content.Firstname">FirstName:</FluentTextField>
+    <FluentNumberField @bind-Value="@Content.Age">Age:</FluentNumberField>
+</FluentDialogBody>
+
+@code {
+    [Parameter]
+    public SimplePerson Content { get; set; } = default!;
+
+    [CascadingParameter]
+    public FluentDialog Dialog { get; set; } = default!;
+
+    private async Task SaveAsync()
+    {
+        await Dialog.CloseAsync();
+    }
+}