Блог

Я пытаюсь сделать 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 по-прежнему имеет прямоугольную форму.

Что я делаю не так?

В стиле по умолчанию AutoSuggestBox есть TextBox inside . Фактически, параметр TextBox не привязан к соответствующим свойствам, поэтому настройка AutoSuggestBox.CornerRadius не повлияет на внутренние TextBox .

Если вы не хотите изменять шаблон элемента управления. AutoSuggestBox предоставляет TextBoxStyle свойство. Вы можете создать a 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>