none
[UWP]Need button flyout width to be as width of the button. RRS feed

  • Question

  • Hi

       I am opening one flyout when when i clicking on the button. Here i need to help is i want that flyout width to be

       same as the button width.

       <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="500"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button HorizontalAlignment="Stretch" Grid.Column="0" x:Name="Btn" Content="PAge" Click="Button_Click">
                <Button.Flyout>
                    <Flyout ScrollViewer.HorizontalScrollBarVisibility="Hidden" Placement="Bottom">
                        <StackPanel HorizontalAlignment="Left" Width="500" Background="Blue" ></StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
        </Grid>

       


    Monday, January 25, 2016 11:27 AM

Answers

  • Hi Sunil.

    I propose to give a name to the Flyout content. In this case StackPanel and in the Click code behind button assign ActualWidth of the button to the Flyout content. Both you can access by a name.

        <Grid>
            <Button
                x:Name="Btn"
                Content="Page"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                Click="Btn_Click">
                <Button.Flyout>
                    <Flyout
                        Placement="Bottom">
                        <Flyout.FlyoutPresenterStyle>
                            <Style
                                TargetType="FlyoutPresenter">
                                <Setter
                                    Property="Background"
                                    Value="Transparent" />
                            </Style>
                        </Flyout.FlyoutPresenterStyle>
                        <StackPanel
                            x:Name="Flyout"
                            Background="Blue">
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
        </Grid>


    private void Btn_Click(object sender, RoutedEventArgs e) {
    /// Add necessary null checks
                    this.Flyout.Width = this.Btn.ActualWidth;
            }

    Hope it helps :)

    Petr


    Microsoft Platform Developer Cloudikka blog

    Monday, January 25, 2016 6:40 PM

All replies

  • Hi Sunil.

    I propose to give a name to the Flyout content. In this case StackPanel and in the Click code behind button assign ActualWidth of the button to the Flyout content. Both you can access by a name.

        <Grid>
            <Button
                x:Name="Btn"
                Content="Page"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                Click="Btn_Click">
                <Button.Flyout>
                    <Flyout
                        Placement="Bottom">
                        <Flyout.FlyoutPresenterStyle>
                            <Style
                                TargetType="FlyoutPresenter">
                                <Setter
                                    Property="Background"
                                    Value="Transparent" />
                            </Style>
                        </Flyout.FlyoutPresenterStyle>
                        <StackPanel
                            x:Name="Flyout"
                            Background="Blue">
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
        </Grid>


    private void Btn_Click(object sender, RoutedEventArgs e) {
    /// Add necessary null checks
                    this.Flyout.Width = this.Btn.ActualWidth;
            }

    Hope it helps :)

    Petr


    Microsoft Platform Developer Cloudikka blog

    Monday, January 25, 2016 6:40 PM
  • Hi

      Thanks for the reply. and I have one more question like, How to make Flyout Content to be dock filled

      to the flyout?

    --Thanks & Regards

    Sunil

    Tuesday, January 26, 2016 3:28 AM
  • @Sunil,

    What kind of dock do you want? UWP can use panels and some related things to change the UI. We may need more details to help you here on this question. By the way, it is better for us to use one question one case. I recommend you reopen a new case and mark "Petr Šrámek"'s answer.

    Best regards,

    Barry


    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.

    Friday, February 5, 2016 5:29 AM
    Moderator