Thanks for being a part of WWDC25!

How did we do? We’d love to know your thoughts on this year’s conference. Take the survey here

How to display such a window in a mixed space

I saw this demo on the website. Do you have the address for the demo? If not, how is the following image content implemented? Can you tell me which style of WindowGroup is used to create this custom window, and the buttons to move and close the window are located at the bottom of the menu bar. Thank you, thank [you]

Answered by Vision Pro Engineer in 842569022

Hey @LazyCoder,

Great question! Any window group type can have controls at the bottom of your window. You can do this using either using toolbars or ornaments.

Petite Asteroids is a developer sample we released this week that uses ornaments to place control at the bottom front of the volume:

.ornament(attachmentAnchor: .scene(.bottomFront), ornament: { SettingsOrnamentView() })

Similarly, we also just released Canyon Crosser, which is a volumetric experience that uses this same API to place the hike controls either inside or at the back of the volume depending on the volume size.

.ornament(
    attachmentAnchor: .scene(ornamentPlacement.sceneAnchor),
    contentAlignment: ornamentPlacement.contentAlignment
) {
    if let selectedHike = appModel.selectedHike {
        HikeControls(volumeSize: volumeSize.size, hike: selectedHike)
    }
}

Please let me know if this helps and if you have any additional questions,
Michael

Accepted Answer

Hey @LazyCoder,

Great question! Any window group type can have controls at the bottom of your window. You can do this using either using toolbars or ornaments.

Petite Asteroids is a developer sample we released this week that uses ornaments to place control at the bottom front of the volume:

.ornament(attachmentAnchor: .scene(.bottomFront), ornament: { SettingsOrnamentView() })

Similarly, we also just released Canyon Crosser, which is a volumetric experience that uses this same API to place the hike controls either inside or at the back of the volume depending on the volume size.

.ornament(
    attachmentAnchor: .scene(ornamentPlacement.sceneAnchor),
    contentAlignment: ornamentPlacement.contentAlignment
) {
    if let selectedHike = appModel.selectedHike {
        HikeControls(volumeSize: volumeSize.size, hike: selectedHike)
    }
}

Please let me know if this helps and if you have any additional questions,
Michael

How to display such a window in a mixed space
 
 
Q