WinUI 3中InfoBar隐藏后仍保留边距，如何消除该边距？

问题原因 #

InfoBar的IsOpen属性仅控制其内部内容的显示/隐藏，但控件本身仍会留在布局流中，因此设置的Margin会持续占用空间，导致隐藏后仍有空白。

解决方案 #

有两种常用方法可以解决这个问题，根据你的布局需求选择：

方案1：隐藏时完全移除控件布局空间

通过将Visibility与IsOpen绑定，当IsOpen为False时将控件设为Collapsed，这样控件会完全从布局中移除，Margin自然不再生效。

首先添加一个布尔值转可见性的转换器：

public class BooleanToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (value is bool isOpen && isOpen) ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return value is Visibility visibility && visibility == Visibility.Visible;
    }
}

在页面资源中注册转换器：

<Page.Resources>
    <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Page.Resources>

修改InfoBar的绑定：

<Grid Width="400">
    <StackPanel>
        <TextBlock>Message</TextBlock>
        <InfoBar IsOpen="{x:Bind IsInfoBarOpen, Mode=TwoWay}" 
                 Severity="Error" 
                 Margin="0,50,0,0" 
                 Message="MessageMessageMessage"
                 Visibility="{x:Bind IsInfoBarOpen, Converter={StaticResource BooleanToVisibilityConverter}}"/>
        <TextBlock>Message2</TextBlock>
    </StackPanel>
</Grid>

（注：IsInfoBarOpen是你代码中用于控制InfoBar显示的布尔字段）

方案2：隐藏时仅清除Margin

如果需要保留控件的布局占位（比如不想让下方控件上移），可以用DataTrigger动态修改Margin，当IsOpen为False时将Margin设为0：

<Grid Width="400">
    <StackPanel>
        <TextBlock>Message</TextBlock>
        <InfoBar IsOpen="{x:Bind IsInfoBarOpen, Mode=TwoWay}" 
                 Severity="Error" 
                 Message="MessageMessageMessage">
            <InfoBar.Style>
                <Style TargetType="InfoBar">
                    <Setter Property="Margin" Value="0,50,0,0"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{x:Bind IsInfoBarOpen}" Value="False">
                            <Setter Property="Margin" Value="0"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </InfoBar.Style>
        </InfoBar>
        <TextBlock>Message2</TextBlock>
    </StackPanel>
</Grid>

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