Добавление поля для всплывающей кнопки в UWP

Question

Я добавляю всплывающую подсказку к кнопке, которая выровнена по правому краю экрана.

Когда расположение выпадающего меню расположено снизу, всплывающая подсказка находится на одном уровне с боковой стороной страницы.,

Я хотел бы указать поле или интервал

Спасибо за помощь

Я попытался изменитьстиль презентации во всплывающем окне с полями, но это не повлияло на всплывающее окно.

<Flyout x:Name="NextActionFlyout" Opened="Flyout_Opened" Closed="FlyoutClosed">
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="FlyoutPresenter">
                                <Border Margin="-20,0,0,0"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}">
                                    <ScrollViewer
                                            x:Name="ScrollViewer"
                                            AutomationProperties.AccessibilityView="Raw"
                                            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                            ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                        <ContentPresenter
                                                Margin="{TemplateBinding Padding}"
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                Content="{TemplateBinding Content}"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                ContentTransitions="{TemplateBinding ContentTransitions}" />
                                    </ScrollViewer>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Flyout.FlyoutPresenterStyle>
</Flyout>

Answer 1

Когда расположение выпадающего меню расположено внизу, всплывающее окно расположено заподлицо с краем страницы.

Я не увидел ваш полный код XAML, но сВ моем тестировании эта ситуация («всплывающее окно сбоку от страницы») является относительной.То, что вы установили <Border Margin="-20,0,0,0" в стиле Flyout, правильно.Это действительно работает.

Вы можете увидеть следующий скриншот:

Если вы не установите поле для Border, она не распространяется на кнопку.

При каких обстоятельствах это вызывает явление, которое вы упомянули?Когда я изменю размер окна на minWidth, оно будет всплывающим рядом со стороной страницы.

Но если вы установите <Border Margin="20,0,0,0", слева будет пробел.

Мой код XAML следующий:

<Grid>
    <Button Content="Flyout">
        <Button.Flyout>
            <Flyout Placement="Bottom">
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="FlyoutPresenter">
                                    <Border Margin="20,0,0,0"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}">
                                        <ScrollViewer
                                        x:Name="ScrollViewer"
                                        AutomationProperties.AccessibilityView="Raw"
                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                        ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                            <ContentPresenter
                                            Margin="{TemplateBinding Padding}"
                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                            Content="{TemplateBinding Content}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            ContentTransitions="{TemplateBinding ContentTransitions}" />
                                        </ScrollViewer>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <Grid Width="500" Height="500" Background="LightBlue">
                </Grid>
            </Flyout>
        </Button.Flyout>
    </Button>
</Grid>