CODEWITHSUNDEEP
c#windowsxamluwp
Pulkit Mehta
Pulkit Mehta

Reputation: 117

Rounding the corners of UWP Flyout

I am using a Flyout control in my UWP app like:

<Flyout Placement="Full"/>

This opens a rectangular Flyout. I want to round the corners of this flyout. Is there any way through which this can be achieved?

Upvotes: 0

Views: 657

Answers (2)

Rajib_119
Rajib_119

Reputation: 81

Use CornerRadius property and set IsDefaultShadowEnabled property's value is 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>

Upvotes: 1

Vignesh
Vignesh

Reputation: 1882

You can modify default FlyoutPresenterStyle of the flyout to set CornerRadius to the Border Element in the style.

Border .... CornerRadius="20"

enter image description here

 <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>

Upvotes: 3

Related Questions