locked
[UWP] [XAML] Stretching a Flyout to Window Width RRS feed

  • Question

  • I have a flyout that I want to change between the normal size and one that stretches to the width of the window (not full) based on user setting. I can't find a good way to stretch the flyout, by default it uses a small flyout and adds scrollbars if I just change the width of the container. The only thing that I've found that kind of works is a setter for flyoutpresenter min/maxwidth, but it won't be easy to adjust to actual window size on the fly, I assume I need to do the presenter in code. Is there something easy I'm overlooking with a stretch or similar value? Basically I want it to work like "full" placement, only not adjusting the height, only stretching the width.
    Tuesday, May 31, 2016 12:10 AM

Answers

  • I was having issues getting it to work with a popup - binding to the popup width didn't seem to work, to the container inside did, but issues with styles/positioning/etc. Here is what I came up with that seems to work:

            public MainAppBar()
            {
                this.InitializeComponent();
    
                var style = new Style(typeof(FlyoutPresenter));
                style.Setters.Add(new Setter(FlyoutPresenter.MinWidthProperty, Window.Current.CoreWindow.Bounds.Width));
                VolumeFlyout.SetValue(Flyout.FlyoutPresenterStyleProperty, style);
            }
    
    
            private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                var style = new Style(typeof(FlyoutPresenter));
                style.Setters.Add(new Setter(FlyoutPresenter.MinWidthProperty, Window.Current.CoreWindow.Bounds.Width));
                VolumeFlyout.SetValue(Flyout.FlyoutPresenterStyleProperty, style);
            }


    Tuesday, June 7, 2016 7:49 AM

All replies

  • Hi Merlin Software,

    In my experience, you could use Popup control, because Popup has width property, you could bind it to current window’s width.

    Please refer to my following code for details:

    <Popup x:Name="popup" Width="{Binding width}">
                
            </Popup>
    public double width { get; set; }
            public MainPage()
            {
                this.InitializeComponent();
                width = Window.Current.CoreWindow.Bounds.Width;
                this.DataContext = this;
            }
    
            private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                width = Window.Current.CoreWindow.Bounds.Width;
            }

    Best Regards,

    Xavier Eoro


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, June 1, 2016 9:47 AM
  • I was having issues getting it to work with a popup - binding to the popup width didn't seem to work, to the container inside did, but issues with styles/positioning/etc. Here is what I came up with that seems to work:

            public MainAppBar()
            {
                this.InitializeComponent();
    
                var style = new Style(typeof(FlyoutPresenter));
                style.Setters.Add(new Setter(FlyoutPresenter.MinWidthProperty, Window.Current.CoreWindow.Bounds.Width));
                VolumeFlyout.SetValue(Flyout.FlyoutPresenterStyleProperty, style);
            }
    
    
            private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                var style = new Style(typeof(FlyoutPresenter));
                style.Setters.Add(new Setter(FlyoutPresenter.MinWidthProperty, Window.Current.CoreWindow.Bounds.Width));
                VolumeFlyout.SetValue(Flyout.FlyoutPresenterStyleProperty, style);
            }


    Tuesday, June 7, 2016 7:49 AM
  • Hi Merlin Software,

    Thank you for sharing your solution with us.

    Best Regards,

    Xavier Eoro


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, June 8, 2016 11:14 AM