为AutoSuggestBox的弹出窗口设置百分比宽度

问题描述

我正在尝试自定义Popup中的AutoSuggestBox。我希望它的宽度是TextBox的百分比。

我想我能做到这一点的唯一方法是使用Grid并相应地设置ColumnDeFinition。问题是，即使Popup的内容达到了我想要的宽度，在剩余的空间中还是有一个暗影：

这是我的XAML：

        <Style x:Key="CustomAutoSuggestBox" targettype="AutoSuggestBox">
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="TextBoxStyle" Value="{StaticResource AutoSuggestBoxTextBoxStyle}" />
            <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate targettype="AutoSuggestBox">
                        <Grid x:Name="LayoutRoot">
                            <Grid.ColumnDeFinitions>
                                <ColumnDeFinition Width="*"/>
                            </Grid.ColumnDeFinitions>
                            <Grid.RowDeFinitions>
                                <RowDeFinition Height="*"/>
                            </Grid.RowDeFinitions>
                            <visualstatemanager.VisualStateGroups>
                                <VisualStateGroup x:Name="Orientation">
                                    <VisualState x:Name="Landscape"/>
                                    <VisualState x:Name="Portrait"/>
                                </VisualStateGroup>
                            </visualstatemanager.VisualStateGroups>
                            <TextBox
                                x:Name="TextBox"
                                ScrollViewer.BringIntoViewOnFocusChange="False"
                                Description="{TemplateBinding Description}"
                                DesiredCandidateWindowAlignment="BottomEdge"
                                Header="{TemplateBinding Header}"
                                Margin="0"
                                PlaceholderText="{TemplateBinding PlaceholderText}"
                                Style="{TemplateBinding TextBoxStyle}"
                                UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}"
                                Width="{TemplateBinding Width}"
                                Canvas.ZIndex="0" />
                            <Popup x:Name="SuggestionsPopup">
                                <Border x:Name="SuggestionsContainer">
                                    <!--The Grid that follows was created just so we
                                        can comply with GUI spec,which states that
                                        the suggestions Box must be 75% of the
                                        search Box.-->
                                    <Grid>
                                        <Grid.ColumnDeFinitions>
                                            <ColumnDeFinition Width="3*" />
                                            <ColumnDeFinition Width="1*" />
                                        </Grid.ColumnDeFinitions>
                                        <ListView
                                            x:Name="SuggestionsList"
                                            Background="{ThemeResource AutoSuggestBoxSuggestionsListBackground}"
                                            BorderThickness="{ThemeResource AutoSuggestListBorderThemeThickness}"
                                            BorderBrush="{ThemeResource AutoSuggestBoxSuggestionsListBorderBrush}"
                                            displayMemberPath="{TemplateBinding displayMemberPath}"
                                            ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
                                            ItemTemplate="{TemplateBinding ItemTemplate}"
                                            IsItemClickEnabled="True"
                                            ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                            MaxHeight="{ThemeResource AutoSuggestListMaxHeight}"
                                            Margin="{ThemeResource AutoSuggestListMargin}"
                                            Padding="{ThemeResource AutoSuggestListPadding}" />
                                    </Grid>
                                </Border>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

我尝试为该模板中Background的每个父级更改属性Popup，但是没有运气。我还尝试将Grid组件移至外部控件，例如Border等。

有人可以帮我吗？

提前谢谢！

解决方法

问题在于，即使Popup的内容占据了我想要的宽度，剩余空间中还是有一个暗影：

请检查Z-depth and shadow文档。

ThemeShadow在应用于Popup中的任何XAML元素时会自动投射阴影。它将在其后面的应用程序背景内容及其下面的任何其他打开的弹出窗口上投射阴影。

如果要禁用它，更好的方法是在已加载的事件中将SuggestionsContainer设置为新的Translation，并使z值足够小。

例如：

private void SuggestionsContainer_Loaded(object sender,RoutedEventArgs e)
{
    var border = sender as Border;
    border.Translation += new Vector3(0,-100);
}