{"id":256,"date":"2024-07-29T08:00:00","date_gmt":"2024-07-29T12:00:00","guid":{"rendered":"https:\/\/stepinto.vision\/?p=256"},"modified":"2026-01-12T08:04:56","modified_gmt":"2026-01-12T13:04:56","slug":"how-to-control-the-size-of-windows-in-visionos","status":"publish","type":"post","link":"https:\/\/stepinto.vision\/example-code\/how-to-control-the-size-of-windows-in-visionos\/","title":{"rendered":"How to control the size of windows in visionOS"},"content":{"rendered":"\n<p>Discover four methods to size windows in visionOS. Examples include defaultSize, contentSize with windowResizability and frame, and fixed size.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting default size<\/h2>\n\n\n\n<p>Windows in visionOS open with an initial size of 1280&#215;720. If we want to adjust this size we can use the <code>defaultSize<\/code> scene modifier.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(1 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 0, 0, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>WindowGroup(id: \"YellowFlower\") {\n    YellowFlowerView()\n}\n.defaultSize(CGSize(width: 600, height: 600))<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #795E26\">WindowGroup<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">id<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;YellowFlower&quot;<\/span><span style=\"color: #000000\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #795E26\">YellowFlowerView<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">defaultSize<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">CGSize<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">width<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">600<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">height<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">600<\/span><span style=\"color: #000000\">))<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Now, when we open the Yellow Flower window, it&#8217;s initial size will by 600&#215;600. The user can adjust the size of this window with the drag bars. Our SwiftUI views will adapt to the new size.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" data-attachment-id=\"258\" data-permalink=\"https:\/\/stepinto.vision\/example-code\/how-to-control-the-size-of-windows-in-visionos\/attachment\/wg-2024-07-29-01\/\" data-orig-file=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?fit=2732%2C2048&amp;ssl=1\" data-orig-size=\"2732,2048\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wg-2024.07.29-01\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?fit=1024%2C768&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?resize=1024%2C768&#038;ssl=1\" alt=\"A visionOS window with a default size of 600 by 600\" class=\"wp-image-258\" srcset=\"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?resize=1024%2C768&amp;ssl=1 1024w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?resize=300%2C225&amp;ssl=1 300w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?resize=768%2C576&amp;ssl=1 768w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?resize=1536%2C1151&amp;ssl=1 1536w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?resize=2048%2C1535&amp;ssl=1 2048w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?resize=1200%2C900&amp;ssl=1 1200w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?resize=800%2C600&amp;ssl=1 800w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?resize=600%2C450&amp;ssl=1 600w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?resize=400%2C300&amp;ssl=1 400w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?resize=200%2C150&amp;ssl=1 200w, https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?w=2580&amp;ssl=1 2580w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Content Size<\/h2>\n\n\n\n<p>What if we want our window to be sized for view content instead? We can do this by adding a frame modifier to the view, then using <code>.contentSize<\/code> for the <code>windowResizability<\/code> scene modifier.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(1 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 0, 0, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>WindowGroup(id: \"YellowFlower\") {\n    YellowFlowerView()\n        .frame(minWidth: 500, maxWidth: 700, minHeight: 500, maxHeight: 700)\n}\n.windowResizability(.contentSize)\n.defaultSize(CGSize(width: 600, height: 600))<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #795E26\">WindowGroup<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">id<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;YellowFlower&quot;<\/span><span style=\"color: #000000\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #795E26\">YellowFlowerView<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">frame<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">minWidth<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">500<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">maxWidth<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">700<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">minHeight<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">500<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">maxHeight<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">700<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">windowResizability<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">contentSize<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">defaultSize<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">CGSize<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">width<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">600<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">height<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">600<\/span><span style=\"color: #000000\">))<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>I still like to specify a default size when I use this option. Without it, visionOS will open the window at the largest available size (based on my testing in visionOS 2). We&#8217;ve set the default size to 600&#215;600 and provided a min and max value for the frame.<\/p>\n\n\n\n\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player\" style=\"\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <div class=\"jetpack-video-wrapper\"><iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='720' height='540' src='https:\/\/videopress.com\/embed\/EBjltqgV?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1739540970'><\/script><\/div><\/div>\n\t\t\t\n\t\t\t\n\t\t<\/figure>\n\t\t<div class=\"wp-video-description\" style=\"margin-top: 10px; margin-bottom: 10px; font-style: italic;\"><p>A window with a default size is resized by a user.<\/p>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Fixed Size<\/h2>\n\n\n\n<p>If needed, we can force a fixed-size window by setting the frame width and height.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(1 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 0, 0, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>WindowGroup(id: \"YellowFlower\") {\n    YellowFlowerView()\n        .frame(width: 600, height: 600)\n}\n.windowResizability(.contentSize)\n.defaultSize(CGSize(width: 600, height: 600))<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #795E26\">WindowGroup<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">id<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;YellowFlower&quot;<\/span><span style=\"color: #000000\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #795E26\">YellowFlowerView<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">frame<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">width<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">600<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">height<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">600<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">windowResizability<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">contentSize<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">defaultSize<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">CGSize<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">width<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">600<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">height<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">600<\/span><span style=\"color: #000000\">))<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Fixed-size windows may not be great for dynamic content, but they could be good for utilities or tool panels.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resize window by resizing content<\/h2>\n\n\n\n<p>When using <code>.windowResizability(.contentSize)<\/code> the window size is based on the content size of our views.&nbsp;If we adjust the frame of our content, then the host window will also resize.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#000000;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 0, 0, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>struct RedFlowerView: View {\n    @Environment(\\.dismissWindow) var dismissWindow\n\n    @State private var widthValue: CGFloat = 600\n    @State private var heightValue: CGFloat = 400\n    @State private var toggle: Bool = false\n\n    var body: some View {\n        VStack(spacing: 24) {\n            Text(\"Red Flower \ud83c\udf3a\")\n                .font(.extraLargeTitle2)\n\n            Button(action: {\n                dismissWindow(id: \"RedFlower\")\n            }, label: {\n                Label(\"Close Window\", systemImage: \"xmark.circle\")\n            })\n        }\n        .padding()\n        .frame(width: widthValue, height: heightValue)\n        .onAppear {\n            Timer.scheduledTimer(withTimeInterval: 2.0, repeats: true) { _ in\n                toggle.toggle()\n                withAnimation(.easeInOut(duration: 2.0)) {\n                    widthValue = toggle ? 400 : 600\n                    heightValue = toggle ? 600 : 400\n                }\n            }\n        }\n    }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0000FF\">struct<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">RedFlowerView<\/span><span style=\"color: #000000\">: View {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">@Environment<\/span><span style=\"color: #000000\">(\\.<\/span><span style=\"color: #001080\">dismissWindow<\/span><span style=\"color: #000000\">) <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> dismissWindow<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">@State<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">private<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> widthValue: CGFloat = <\/span><span style=\"color: #098658\">600<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">@State<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">private<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> heightValue: CGFloat = <\/span><span style=\"color: #098658\">400<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">@State<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">private<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> toggle: <\/span><span style=\"color: #267F99\">Bool<\/span><span style=\"color: #000000\"> = <\/span><span style=\"color: #0000FF\">false<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">var<\/span><span style=\"color: #000000\"> body: some View {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        <\/span><span style=\"color: #795E26\">VStack<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">spacing<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">24<\/span><span style=\"color: #000000\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">Text<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Red Flower \ud83c\udf3a&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                .<\/span><span style=\"color: #795E26\">font<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #001080\">extraLargeTitle2<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            <\/span><span style=\"color: #795E26\">Button<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">action<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">dismissWindow<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">id<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;RedFlower&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            }, <\/span><span style=\"color: #795E26\">label<\/span><span style=\"color: #000000\">: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">Label<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #A31515\">&quot;Close Window&quot;<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">systemImage<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #A31515\">&quot;xmark.circle&quot;<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">padding<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #795E26\">frame<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">width<\/span><span style=\"color: #000000\">: widthValue, <\/span><span style=\"color: #795E26\">height<\/span><span style=\"color: #000000\">: heightValue)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        .<\/span><span style=\"color: #001080\">onAppear<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            Timer.<\/span><span style=\"color: #795E26\">scheduledTimer<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">withTimeInterval<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">2.0<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #795E26\">repeats<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #0000FF\">true<\/span><span style=\"color: #000000\">) { <\/span><span style=\"color: #001080\">_<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #AF00DB\">in<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                toggle.<\/span><span style=\"color: #795E26\">toggle<\/span><span style=\"color: #000000\">()<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                <\/span><span style=\"color: #795E26\">withAnimation<\/span><span style=\"color: #000000\">(.<\/span><span style=\"color: #795E26\">easeInOut<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #795E26\">duration<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #098658\">2.0<\/span><span style=\"color: #000000\">)) {<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #000000\">                    widthValue = toggle ? <\/span><span style=\"color: #098658\">400<\/span><span style=\"color: #000000\"> : <\/span><span style=\"color: #098658\">600<\/span><\/span>\n<span class=\"line cbp-line-highlight\"><span style=\"color: #000000\">                    heightValue = toggle ? <\/span><span style=\"color: #098658\">600<\/span><span style=\"color: #000000\"> : <\/span><span style=\"color: #098658\">400<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">                }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player\" style=\"\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <div class=\"jetpack-video-wrapper\"><iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='720' height='540' src='https:\/\/videopress.com\/embed\/aiuo1dbI?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1739540970'><\/script><\/div><\/div>\n\t\t\t\n\t\t\t\n\t\t<\/figure>\n\t\t<div class=\"wp-video-description\" style=\"margin-top: 10px; margin-bottom: 10px; font-style: italic;\"><p>A new window is opened and resized programmatically<\/p>\n<\/div>\n\n\n<p class=\"has-theme-palette-8-background-color has-background\">Sample code is available in Garden02 in <a href=\"https:\/\/github.com\/radicalappdev\/Step-Into-Example-Projects\">Step Into Example Projects<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover four methods to size windows in visionOS. Examples include defaultSize, contentSize with windowResizability and frame, and fixed size.<\/p>\n","protected":false},"author":93705089,"featured_media":258,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","advanced_seo_description":"Discover four methods to size windows in visionOS. Examples include defaultSize, contentSize with windowResizability and frame, and fixed size.","jetpack_seo_html_title":"Master Window Sizing in visionOS with SwiftUI - Step Into Vision","jetpack_seo_noindex":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[1365],"tags":[],"class_list":["post-256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-example-code"],"jetpack_publicize_connections":[],"taxonomy_info":{"category":[{"value":1365,"label":"Example Code"}]},"featured_image_src_large":["https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?fit=1024%2C768&ssl=1",1024,768,true],"author_info":{"display_name":"Joseph Simpson","author_link":"https:\/\/stepinto.vision\/author\/vrhermit\/"},"comment_info":0,"category_info":[{"term_id":1365,"name":"Example Code","slug":"example-code","term_group":0,"term_taxonomy_id":11,"taxonomy":"category","description":"Code snippets and examples of using common APIs throughout visionOS development","parent":0,"count":187,"filter":"raw","cat_ID":1365,"category_count":187,"category_description":"Code snippets and examples of using common APIs throughout visionOS development","cat_name":"Example Code","category_nicename":"example-code","category_parent":0}],"tag_info":false,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/stepinto.vision\/wp-content\/uploads\/2024\/08\/wg-2024.07.29-01.jpeg?fit=2732%2C2048&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/users\/93705089"}],"replies":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/comments?post=256"}],"version-history":[{"count":28,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/256\/revisions"}],"predecessor-version":[{"id":8762,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/posts\/256\/revisions\/8762"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/media\/258"}],"wp:attachment":[{"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/media?parent=256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/categories?post=256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stepinto.vision\/wp-json\/wp\/v2\/tags?post=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}