Window
in namespace DotVVM.BusinessPack.Controls
Renders modal dialog window.
Usage & Scenarios
Creates a div
element styled as a window that can be shown or hidden any time.
The content behind the window remains unlocked and the window can be dragged freely to any place in the page.
DotVVM Business Pack includes also the ModalDialog which can display a similar window but prevents the user to interact with the content behind the dialog.
Sample 1: Basic Usage
The content inside the <bp:Window>
element is treated as a ContentTemplate
property which specifies the main content of the window.
The IsDisplayed
property is bound to the bool
property in the viewmodel which controls whether the window is shown or hidden. When the user hides the window, the property is set to false
automatically.
<bp:Window IsDisplayed="{value: IsWindowDisplayed}">
<p>Display window content here.</p>
</bp:Window>
<bp:Button Text="Display Window"
Click="{command: IsWindowDisplayed = true}" />
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public bool IsWindowDisplayed { get; set; }
}
}
Sample 2: Header And Footer
The HeaderText
can be used to specify the text in the window header. Alternatively, you can use the HeaderTemplate
property to be able to use rich HTML content inside the window header.
The same applies to the FooterText
and FooterTemplate
properties which can be used to customize the window footer row.
<%-- Custom content with header and footer text --%>
<bp:Window HeaderText="This is header"
FooterText="This is footer."
IsDisplayed="{value: IsWindow1Displayed}">
<p>Display window content here.</p>
</bp:Window>
<bp:Button Text="Show Window"
Click="{command: IsWindow1Displayed = true}" />
<%-- Custom content with header and footer template --%>
<bp:Window IsDisplayed="{value: IsWindow2Displayed}"
CloseOnOutsideClick="true">
<HeaderTemplate>
<span>This is header</span>
<bp:CloseDialogButton >
Close
</bp:CloseDialogButton>
</HeaderTemplate>
<ContentTemplate>
<p>Display window content here.</p>
</ContentTemplate>
<FooterTemplate>
<i>This is footer.</i>
</FooterTemplate>
</bp:Window>
<bp:Button Text="Show templated Window"
Click="{command: IsWindow2Displayed = true}" />
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public bool IsWindow1Displayed { get; set; }
public bool IsWindow2Displayed { get; set; }
}
}
Sample 3: Closing Window
By default, the window remains open until the user closes it.
The CloseOnOutsideClick
can be used to make the window close when the user clicks anywhere outside it.
The CloseOnEscape
can be used to make the window close when the user presses the Escape key.
<bp:Window IsDisplayed="{value: IsWindowDisplayed}"
CloseOnEscape="false"
CloseOnOutsideClick="false">
<p>Display window content here.</p>
</bp:Window>
<bp:Button Text="Display Window"
Click="{command: IsWindowDisplayed = true}" />
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample3
{
public class ViewModel : DotvvmViewModelBase
{
public bool IsWindowDisplayed { get; set; }
}
}
Sample 4: Window Size
The Width
and Height
properties can be used to specify fixed dimensions of the window. You can use any CSS units here - e.g. 400px
, 50%
etc.
To let the user resize the window, set the AllowResize
property to true
.
The MinWidth
and MinHeight
properties can restrict the minimum dimensions of the window. They are always in pixels.
<bp:Window IsDisplayed="{value: IsWindowDisplayed}"
MinWidth="200" MinHeight="100"
Width="300" Height="150"
AllowResize="true">
<p>Display window content here.</p>
</bp:Window>
<bp:Button Text="Display Window"
Click="{command: IsWindowDisplayed = true}" />
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample4
{
public class ViewModel : DotvvmViewModelBase
{
public bool IsWindowDisplayed { get; set; }
}
}
Sample 5: Initial Position
The InitialPositionLeft
and InitialPositionTop
properties can specify the initial distance from the left and top border of the browser viewport. You can use any CSS value here - e.g. 200px
, 30%
or 5vh
.
The AllowMove
property can be used to prevent the user from moving the window in the page. By default, the moving is allowed.
<bp:Window IsDisplayed="{value: IsWindowDisplayed}"
InitialPositionLeft="50"
InitialPositionTop="50"
AllowMove="false">
<p>Display window content here.</p>
</bp:Window>
<bp:Button Text="Display Window"
Click="{command: IsWindowDisplayed = true}" />
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample5
{
public class ViewModel : DotvvmViewModelBase
{
public bool IsWindowDisplayed { get; set; }
}
}
Sample 6: Animations
The AnimationDuration
property specifies the duration of the fade in and fade out effect. The value is in seconds.
<bp:Window IsDisplayed="{value: IsWindowDisplayed}"
AnimationDuration="1"
UseBackdrop="true">
<p>Display window content here.</p>
</bp:Window>
<bp:Button Text="Display Window"
Click="{command: IsWindowDisplayed = true}" />
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample6
{
public class ViewModel : DotvvmViewModelBase
{
public bool IsWindowDisplayed { get; set; }
}
}
Sample 7: Window State
The WindowState
property specifies whether the window is Maximized
, or whether it is in the Normal
state.
<bp:Window IsDisplayed="{value: IsWindowDisplayed}"
WindowState="{value: State}">
<p>Display window content here.</p>
<p>Current state is: {{value: State}}</p>
</bp:Window>
<bp:Button Text="Display Window"
Click="{command: IsWindowDisplayed = true}" />
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample7
{
public class ViewModel : DotvvmViewModelBase
{
public bool IsWindowDisplayed { get; set; }
public WindowState State { get; set; } = WindowState.Maximized;
}
}
Properties
Name | Type | Description | Notes | Default Value | |
---|---|---|---|---|---|
AllowMove | Boolean | Gets or sets whether user is allowed to change position of the window. It's enabled by default. |
attribute
static value
bindable
|
True | |
AllowResize | Boolean | Gets or sets whether user is allowed to resize the dialog. It's enabled by default. |
attribute
static value
|
True | |
AnimationDuration | Double | Gets or sets how long will the open and close animations run (in seconds). If the value is equal to 0, dialog is not animated. The default value is 0.25 seconds. |
attribute
static value
bindable
|
0.25 | |
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static | |
CloseOnEscape | Boolean | Gets or sets whether dialog will be closed when user hits the Escape key. It's enabled by default. |
attribute
static value
|
True | |
CloseOnOutsideClick | Boolean | Gets or sets whether dialog will be closed when user clicks outside the dialog. It's enabled by default. |
attribute
static value
|
True | |
ContentTemplate | ITemplate | Gets or sets template for content part of dialog. |
inner element
static value
default
|
null | |
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. |
attribute
static value
bindable
|
null | |
DeathZoneSize | Int32 | Gets or sets size (in px) of zone around the dialog borders where modal cannot be moved or resized into. The default size is 10px. |
attribute
static value
bindable
|
0 | |
FooterTemplate | ITemplate | Gets or sets the template for the footer part of the dialog. |
inner element
static value
|
null | |
FooterText | String | Gets or sets the text of the footer part of the dialog. This property cannot be combined with the FooterTemplate property. |
attribute
static value
bindable
|
||
HeaderTemplate | ITemplate | Gets or sets the template for the header part of the dialog. |
inner element
static value
|
null | |
HeaderText | String | Gets or sets the text of the header part of the dialog. This property cannot be combined with the HeaderTemplate property. |
attribute
static value
bindable
|
||
Height | String | Gets or sets the height of the dialog. The value uses the CSS syntax, e.g. 640px or 80%. It is not set by default. |
attribute
static value
bindable
|
null | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InitialPositionBottom | String |
attribute
static value
|
null | ||
InitialPositionLeft | String | Gets or sets initial position from left border. The value uses the CSS syntax, e.g. 200px or 10%. It is not set by default. |
attribute
static value
|
null | |
InitialPositionRight | String |
attribute
static value
|
null | ||
InitialPositionTop | String | Gets or sets initial position from top border. The value uses the CSS syntax, e.g. 200px or 10%. It is not set by default. |
attribute
static value
|
null | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
IsDisplayed | Boolean | Gets or sets the value indicating whether the dialog is visible. |
attribute
bindable
|
False | |
MinHeight | Int32 | Gets or sets the minimum height of dialog in pixels. The default value is 150. |
attribute
static value
|
150 | |
MinWidth | Int32 | Gets or sets the minimum width of the dialog in pixels. The default value is 250. |
attribute
static value
|
250 | |
ShowOverlay | Boolean | Gets or sets whether an overlay is displayed under the dialog. It's enabled by default. |
attribute
static value
|
True | |
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True | |
Width | String | Gets or sets the width of the dialog. The value uses the CSS syntax, e.g. 640px or 80%. The default value is 640px. |
attribute
static value
bindable
|
640px | |
WindowState | WindowState | Gets or sets the current state of the window. |
attribute
static value
bindable
|
Normal |