Avalonia Flyout宽度超500失效，如何禁用滚动条？

一、突破Flyout宽度限制并禁用默认滚动条 #

Avalonia的Flyout默认内置了ScrollViewer，并且对宽度有默认的500像素限制，这就是直接设置FlyoutPresenter的Width/MinWidth超过500失效的核心原因。要解决这个问题，需要重写Flyout的控件模板，调整默认的滚动容器设置：

方案1：完全移除默认滚动条 #

通过自定义Style覆盖Flyout的Template，直接去掉内置的ScrollViewer，让FlyoutPresenter的宽度设置完全生效：

<Window.Styles>
    <Style Selector="Flyout">
        <Setter Property="Template">
            <ControlTemplate>
                <Popup PlacementTarget="{TemplateBinding PlacementTarget}"
                       Placement="{TemplateBinding Placement}"
                       IsOpen="{TemplateBinding IsOpen}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <!-- 直接展示内容，无默认滚动容器 -->
                        <ContentPresenter Content="{TemplateBinding Content}" />
                    </Border>
                </Popup>
            </ControlTemplate>
        </Setter>
    </Style>
</Window.Styles>

方案2：仅禁用水平滚动，保留垂直滚动 #

如果需要保留垂直方向的滚动能力，只禁用水平滚动，可以修改模板里的ScrollViewer属性：

<Window.Styles>
    <Style Selector="Flyout">
        <Setter Property="Template">
            <ControlTemplate>
                <Popup PlacementTarget="{TemplateBinding PlacementTarget}"
                       Placement="{TemplateBinding Placement}"
                       IsOpen="{TemplateBinding IsOpen}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                                      VerticalScrollBarVisibility="Auto">
                            <ContentPresenter Content="{TemplateBinding Content}" />
                        </ScrollViewer>
                    </Border>
                </Popup>
            </ControlTemplate>
        </Setter>
    </Style>
</Window.Styles>

二、在Flyout中使用附加滚动条 #

不要依赖Flyout的默认滚动容器，应该把自定义滚动条加到FlyoutPresenter内部的内容外层，这样可以精确控制哪些内容需要滚动：

<DropDownButton>
   <TextBlock Text="Test" />
   <DropDownButton.Flyout>
      <Flyout>
         <FlyoutPresenter Background="Red" Width="1000" Height="600">
             <!-- 给内部内容添加自定义滚动条 -->
             <ScrollViewer HorizontalScrollBarVisibility="Auto"
                           VerticalScrollBarVisibility="Auto">
                 <!-- 这里放置需要滚动的实际内容 -->
                 <StackPanel Width="1200" Height="800">
                     <TextBlock Text="超出FlyoutPresenter宽度的内容" />
                     <!-- 更多长/宽内容 -->
                 </StackPanel>
             </ScrollViewer>
         </FlyoutPresenter>
      </Flyout>
    </DropDownButton.Flyout>
</DropDownButton>

这种方式下，滚动条只会作用于ScrollViewer包裹的内容，而整个Flyout的宽度由FlyoutPresenter的设置决定。

内容的提问来源于stack exchange，提问作者tcs