uwp - UWP：AutoSuggestBox CornerRaidus 不起作用

Question

我正在尝试像这样制作带有圆角的 AutoSuggestBox。 所以我使用下面的样式来实现它。

    <Style TargetType="AutoSuggestBox" x:Key="BasicSearchBoxStyle">
        <Setter Property="BorderBrush" Value="{StaticResource LineColor}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="QueryIcon" Value="Find"/>
        <Setter Property="CornerRadius" Value="20"/>
    </Style>

但是，这没有任何效果，AutoSuggestBox 仍然是一个矩形。

我究竟做错了什么？

标签： uwpuwp-xaml

Answer 1

在默认样式中AutoSuggestBox，有一个TextBox里面。事实上，TextBox并没有绑定对应的属性，所以设置AutoSuggestBox.CornerRadius不会影响内部的TextBox。

如果不想修改控件模板。AutoSuggestBox暴露TextBoxStyle属性。您可以创建一个TextBoxStyle圆角并分配值。

<Style TargetType="TextBox" BasedOn="{StaticResource AutoSuggestBoxTextBoxStyle}"
       x:Key="CustomSuggestBoxStyle">
    <Setter Property="CornerRadius" Value="20" />
</Style>
<Style TargetType="AutoSuggestBox" x:Key="BasicSearchBoxStyle">
    <Setter Property="BorderBrush" Value="{StaticResource LineColor}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="QueryIcon" Value="Find"/>
    <Setter Property="TextBoxStyle" Value="{StaticResource CustomSuggestBoxStyle}" />
</Style>

用法

<AutoSuggestBox Style="{StaticResource BasicSearchBoxStyle}"/>

---

另一种方式，您可以尝试使用此自定义控件模板：

<Style TargetType="AutoSuggestBox" x:Key="CustomAutoSuggestBoxStyle">
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="BorderBrush" Value="{StaticResource LineColor}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="QueryIcon" Value="Find"/>
    <Setter Property="CornerRadius" Value="20"/>
    <Setter Property="TextBoxStyle" Value="{StaticResource AutoSuggestBoxTextBoxStyle}" />
    <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AutoSuggestBox">
                <Grid x:Name="LayoutRoot">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="Orientation">
                            <VisualState x:Name="Landscape" />
                            <VisualState x:Name="Portrait" />

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBox x:Name="TextBox"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    Style="{TemplateBinding TextBoxStyle}"
                    PlaceholderText="{TemplateBinding PlaceholderText}"
                    Header="{TemplateBinding Header}"
                    Width="{TemplateBinding Width}"
                    Description="{TemplateBinding Description}"
                    ScrollViewer.BringIntoViewOnFocusChange="False"
                    Canvas.ZIndex="0"
                    Margin="0"
                    DesiredCandidateWindowAlignment="BottomEdge"
                    UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}" />

                    <Popup x:Name="SuggestionsPopup">
                        <Border x:Name="SuggestionsContainer">
                            <ListView x:Name="SuggestionsList"
                            Background="{ThemeResource AutoSuggestBoxSuggestionsListBackground}"
                            BorderThickness="{ThemeResource AutoSuggestListBorderThemeThickness}"
                            BorderBrush="{ThemeResource AutoSuggestBoxSuggestionsListBorderBrush}"
                            DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
                            IsItemClickEnabled="True"
                            ItemTemplate="{TemplateBinding ItemTemplate}"
                            ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                            ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
                            MaxHeight="{ThemeResource AutoSuggestListMaxHeight}"
                            Margin="{ThemeResource AutoSuggestListMargin}"
                            Padding="{ThemeResource AutoSuggestListPadding}" />
                        </Border>
                    </Popup>

                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>