Remove the Chevron arrow for AppBarButton.Flyout in UWP

Question

Remove the Chevron arrow for AppBarButton.Flyout in UWP

Please let me know how can i remove the arrow that's coming by default when a Flyout is attached to AppBarButton in UWP(Version 1809)

Answer 1

To remove the chevron arrow I use FlyoutBase.AttachedFlyout in place of AppBarButton.Flyout, and I open the flyout with the AppBarButton.Click event handler.

<AppBarButton Click="AppBarButton_OnClick">
  <FlyoutBase.AttachedFlyout>
    <Flyout x:Name="RulesFlyout">
      <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
          <Setter Property="Background" Value="#E6E6E6"/>
        </Style>
      </Flyout.FlyoutPresenterStyle>
      <StackPanel>
        <StackPanel Margin="0,5,0,0">
          <SymbolIcon Symbol="Cancel" Foreground="#7B7B7B" IsTapEnabled="True" PointerPressed="SymbolIcon_PointerPressed" MaxHeight="10" MinHeight="10" HorizontalAlignment="Right" VerticalAlignment="Top" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"/>
          <TextBlock Text="Rules" FontSize="12" HorizontalAlignment="Left" FontWeight="SemiBold" FontFamily="Segoe UI" Margin="0,-15,0,-50"/>
        </StackPanel>
      </StackPanel>
    </Flyout>
  </FlyoutBase.AttachedFlyout>
</AppBarButton>

and

private async void AppBarButton_OnClick(object sender, RoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

Answer 2

<Page.TopAppBar>
<CommandBar Background="#F3F3F3" DefaultLabelPosition="Right" Name="MainPageCommandBar" x:FieldModifier="public">
<CommandBar.PrimaryCommands>
<AppBarButton Name="Rules" Label="Rules" Width="115" FontSize="12" x:FieldModifier="public" FontWeight="Normal" FontFamily="Segoe UI" Click="Rules_Click" BorderThickness="0" BorderBrush="Transparent" Visibility="Visible">
<AppBarButton.Resources>
<muxc:TeachingTip x:Name="RulesTip" AllowFocusOnInteraction="True" Width="auto"
Title="Rules" Background="#F8F8F8"
Target="{x:Bind Rules}">
<muxc:TeachingTip.Content>
<TextBlock x:Name="RulesTxt1" Grid.Column="1" TextAlignment="Left" TextWrapping="Wrap" FontSize="11.5" FontFamily="Segoe UI" Text="Click here to view the detailed retention rules applicable to the currently active rule set (tab)."/>
</muxc:TeachingTip.Content>
</muxc:TeachingTip>

                    </ResourceDictionary>
                </AppBarButton.Resources>
                <Image Source="Assets\Rules.png" Stretch="UniformToFill" />
                <AppBarButton.Flyout>
                    <Flyout x:Name="RulesFlyout" >
                        <Flyout.FlyoutPresenterStyle>
                            <Style TargetType="FlyoutPresenter">
                                <Setter Property="Background" Value="#E6E6E6"/>
                            </Style>
                        </Flyout.FlyoutPresenterStyle>
                        <StackPanel>
                            <StackPanel Margin="0,5,0,0">
                                <SymbolIcon Symbol="Cancel" Foreground="#7B7B7B" IsTapEnabled="True" PointerPressed="SymbolIcon_PointerPressed" MaxHeight="10" MinHeight="10" HorizontalAlignment="Right" VerticalAlignment="Top"  PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"/>
                                <TextBlock Text="Rules" FontSize="12" HorizontalAlignment="Left" FontWeight="SemiBold" FontFamily="Segoe UI" Margin="0,-15,0,-50" />
                            </StackPanel>
                        </StackPanel>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.TopAppBar>