DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

Window

in namespace DotVVM.BusinessPack.Controls

Renders modal dialog window.

Properties

Name Type Description Notes Default Value
AllowMove Boolean Gets or sets a value indicating whether moving of the window is allowed.
attribute
inner element
static value
bindable
default
True
AllowResize Boolean Gets or sets whether the resizing is enabled.
attribute
inner element
static value
bindable
default
True
AnimationDuration Double Gets or sets duration of open and close animations in seconds when set to 0 than no animation is used.
attribute
inner element
static value
bindable
default
0.25
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
Static
CloseOnEscapePress Boolean Gets or sets whether dialog will be closed on escape press.
attribute
inner element
static value
bindable
default
True
CloseOnOutsideClick Boolean Gets or sets whether dialog will be closed on outside click.
attribute
inner element
static value
bindable
default
True
ContentTemplate ITemplate Gets or sets template for content part of dialog.
attribute
inner element
static value
bindable
default
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
inner element
static value
bindable
default
DeathZoneSize Int32 Gets or sets size (in px) of zone around the dialog borders where modal cannot be moved or resized into.
attribute
inner element
static value
bindable
default
10
FooterTemplate ITemplate Gets or sets the template for the footer part of the dialog.
attribute
inner element
static value
bindable
default
FooterText String Gets or sets the text of the footer part of the dialog. This property cannot be combined with the FooterTemplate property.
attribute
inner element
static value
bindable
default
HeaderTemplate ITemplate Gets or sets the template for the header part of the dialog.
attribute
inner element
static value
bindable
default
HeaderText String Gets or sets the text of the header part of the dialog. This property cannot be combined with the HeaderTemplate property.
attribute
inner element
static value
bindable
default
Height String Gets or sets the height of the dialog. The value uses the CSS syntax, e.g. 640px or 80%.
attribute
inner element
static value
bindable
default
ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
InitialPositionLeft String Gets or sets initial position from left border. The value uses the CSS syntax, e.g. 200px or 10%.
attribute
inner element
static value
bindable
default
InitialPositionTop String Gets or sets initial position from top border. The value uses the CSS syntax, e.g. 200px or 10%.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
IsDisplayed Boolean Gets or sets whether dialog is displayed.
attribute
inner element
static value
bindable
default
False
MinHeight Int32 Gets or sets the minimum height of dialog. The value uses the CSS syntax, e.g. 640px or 80%.
attribute
inner element
static value
bindable
default
150
MinWidth Int32 Gets or sets the minimum width of the dialog. The value uses the CSS syntax, e.g. 640px or 80%.
attribute
inner element
static value
bindable
default
250
UseBackdrop Boolean Gets or sets whether dialog will be closed on outside click.
attribute
inner element
static value
bindable
default
True
Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True
Width String Gets or sets the width of the dialog. The value uses the CSS syntax, e.g. 640px or 80%.
attribute
inner element
static value
bindable
default
640px
WindowState WindowState Gets or sets the current state of the window.
attribute
inner element
static value
bindable
default
Normal

Events

Name Type Description

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.

The Business Pack includes also the ModalDialog which can display a similar window but prevents the user to interact with the content behind the dialog.

HTML Rendered by the Control

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}" />
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample1
{
    public class ViewModel
    {
        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}">
    <HeaderTemplate>
        <h3>This is header</h3>
    </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}" />
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample2
{
    public class ViewModel
    {
        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 CloseOnEscapePress can be used to make the window close when the user presses the Escape key.

<bp:Window IsDisplayed="{value: IsWindowDisplayed}"
           CloseOnEscapePress="false"
           CloseOnOutsideClick="false">
    <p>Display window content here.</p>
</bp:Window>

<bp:Button Text="Display Window"
           Click="{command: IsWindowDisplayed = true}" />
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample3
{
    public class ViewModel
    {
        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}" />
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample4
{
    public class ViewModel
    {
        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}" />
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample5
{
    public class ViewModel
    {
        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}" />
namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample6
{
    public class ViewModel
    {
        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>
</bp:Window>

<bp:Button Text="Display Window"
           Click="{command: IsWindowDisplayed = true}" />
using DotVVM.BusinessPack.Controls;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Window.sample7
{
    public class ViewModel
    {
        public bool IsWindowDisplayed { get; set; }
        public WindowState State { get; set; } = WindowState.Maximized;
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message