Share via

Window.SizeChanged Event

Definition

Namespace:
Microsoft.UI.Xaml
Edit

Occurs when the rendering size of the window has changed.

// Register
event_token SizeChanged(TypedEventHandler<IInspectable, WindowSizeChangedEventArgs const&> const& handler) const;

// Revoke with event_token
void SizeChanged(event_token const* cookie) const;

// Revoke with event_revoker
Window::SizeChanged_revoker SizeChanged(auto_revoke_t, TypedEventHandler<IInspectable, WindowSizeChangedEventArgs const&> const& handler) const;
public event TypedEventHandler<object,WindowSizeChangedEventArgs> SizeChanged;
function onSizeChanged(eventArgs) { /* Your code */ }
window.addEventListener("sizechanged", onSizeChanged);
window.removeEventListener("sizechanged", onSizeChanged);
- or -
window.onsizechanged = onSizeChanged;
Public Custom Event SizeChanged As TypedEventHandler(Of Object, WindowSizeChangedEventArgs)

Event Type

TypedEventHandler<Object,WindowSizeChangedEventArgs>

TypedEventHandler<IInspectable,WindowSizeChangedEventArgs>

Remarks

This event occurs whenever there are changes in the Bounds values for the window. This might be because the user resizes your app or changes the display orientation while the app is maximized. Another trigger is if the user moves your app to a new display that has a different resolution.

Handle the SizeChanged event for managing things in your app UI, like moving elements around when the window size changes. XAML uses effective pixels (epx), not actual physical pixels. Effective pixels are a virtual unit of measurement, and they're used to express layout dimensions and spacing, independent of screen density. The Bounds Height and Width values are the same as the WindowSizeChangedEventArgs Height and Width values, so you can use either in the event handler.

For more info, see Windowing overview for WinUI and Windows App SDK.

If you attach a handler for SizeChanged at the Page level within a handler for the FrameworkElement.Loaded event, you should detach the handler in a FrameworkElement.Unloaded event handler from that Page. The Window instance remains active between page navigations and should only have a handler active for the most current page code.

Orientation

You may want to detect that the window has changed from landscape to portrait orientation or vice versa. The window orientation might influence how you want the individual controls within the app to appear. For example, you might want to display data lists in a ListView for portrait orientation, but in a GridView for landscape orientation. Typically you would compare the ratio of Width to Height in order to determine the orientation based on the Window Bounds, and you'd do this whenever Window.SizeChanged occurs. Exactly how you interpret Width/Height ratios is up to you.

Minimum and maximum size

Don't use the SizeChanged handler to enforce the minimum or maximum size that your app can be resized to. Instead, use these OverlappedPresenter properties:

However, your logic for changing the visual states should be able to load a state that's designed for the minimum width you intend, and you'd typically use the Bounds values and Window.SizeChanged handling to detect when the app window is using minimum width.

For more info on how to use Window.SizeChanged to detect changes in the app window environment and load the appropriate visual states for your app, see Responsive layouts with XAML.

Other size changed events

There are several other events that you can use to detect size changes.

AppWindow

The AppWindow class has a Changed event with the DidSizeChange value for the event args.

Unlike the XAML Window class, AppWindow uses the Window Coordinate System, where the basic unit of measurement is physical device pixels. So use the the AppWindow APIs for windowing actions, like resizing the window or moving it in relation to something else on the screen.

FrameworkElement

There's another event named SizeChanged that exists on FrameworkElement derived types (Window is not a FrameworkElement type). FrameworkElement.SizeChanged events might occur in many of the same circumstances that cause Window.SizeChanged to occur. An app window size change can cause the root visual element (typically a Page or panel) to change its size. This sets off a cascade of layout invalidations for any sub-elements that use adaptive layout to fill available space. Each element that has new dimensions because of a layout pass will fire its own FrameworkElement.SizeChanged event.

Applies to

See also