绕过UWP飞出的角落

Question

我在UWP应用中使用了Flyout控件，例如：

<Flyout Placement="Full"/>

这将打开一个矩形的弹出窗口。我想在这次弹出会上碰碰运气。有什么方法可以实现？

Answer 1

您可以修改弹出按钮的默认FlyoutPresenterStyle，以将CornerRadius设置为样式中的Border元素。

  

边界.... 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>

Answer 2

使用 CornerRadius 属性并将 IsDefaultShadowEnabled 属性的值设置为 false

<Flyout>
     <Flyout.FlyoutPresenterStyle>
         <Style TargetType="FlyoutPresenter">
                <Setter Property="CornerRadius" Value="50" />
                <Setter Property="IsDefaultShadowEnabled" Value="False"/>
                 <Setter Property="Background" Value="Red" />
          </Style>
      </Flyout.FlyoutPresenterStyle>
      <Grid Height="150" Width="300"></Grid>
</Flyout>