Скругление углов UWP Flyout

Question

Я использую элемент управления Flyout в своем приложении UWP, например:

<Flyout Placement="Full"/>

Это открывает прямоугольный элемент Flyout.Я хочу закруглить углы этого всплывающего окна.Есть ли способ, которым это может быть достигнуто?

Answer 1

Вы можете изменить значение по умолчанию FlyoutPresenterStyle всплывающей подсказки, чтобы установить CornerRadius для элемента границы в стиле.

Граница .... CornerRadius = "20"

 <Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
           <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
           <Setter Property="VerticalContentAlignment" Value="Stretch"/>
           <Setter Property="IsTabStop" Value="False"/>
           <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"/>
           <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}"/>
           <Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}"/>
           <Setter Property="Padding" Value="{ThemeResource FlyoutContentThemePadding}"/>
           <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}"/>
           <Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}"/>
           <Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}"/>
           <Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}"/>
           <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
           <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
           <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
           <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
           <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
           <Setter Property="Template">
              <Setter.Value>
                 <ControlTemplate TargetType="FlyoutPresenter">
                    <Border Background="{TemplateBinding Background}" CornerRadius="20"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}">
                       <ScrollViewer x:Name="ScrollViewer"
                        ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                        AutomationProperties.AccessibilityView="Raw">
                          <ContentPresenter Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                       </ScrollViewer>
                   </Border>
                 </ControlTemplate>
               </Setter.Value>
             </Setter>
         </Style>
      </Flyout.FlyoutPresenterStyle>
   <Grid Background="Red"></Grid>
 </Flyout>