WPF TextBox带圆和Label样式设置

一、引言

在现代桌面应用界面设计中，圆角元素已成为视觉语言的重要组成部分。从Windows 11的Fluent Design到Material Design，圆角矩形以其柔和、友好的视觉特性，取代了传统的尖锐直角，成为提升用户体验的关键细节。TextBox作为数据输入的核心控件，配合Label的标签引导，其圆角样式设计直接影响表单的整体美感与可用性。

二、代码实现

<Style
        x:Key="TextBoxFilletStyle"
        BasedOn="{x:Null}"
        TargetType="{x:Type TextBox}">
        <!--  x:Key="QueryTextBoxStyle"此属性是必须的，Style通过Key来绑定  -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <!--  定义一个Border实现TextBox的边框样式的改变  -->
                    <Border
                        x:Name="border"
                        HorizontalAlignment="Left"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="0"
                        CornerRadius="3"
                        SnapsToDevicePixels="True">
                        <!--  定义一个Grid把TextBox分为两列  -->
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="15" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>
                            <!--  在第一列定义一个Border，用来实现圆  -->
                            <Border
                                Width="15"
                                Height="15"
                                Background="#004739"
                                CornerRadius="15" />
                            <!--  第二列定义一个Label，用来显示文字  -->
                            <Label
                                Grid.Column="1"
                                Margin="5,2,0,0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                Background="Transparent"
                                Content="{TemplateBinding Tag}"
                                FontWeight="Bold"
                                Foreground="#004739" />
                            <!--  ScrollViewer此标签必须有，不然TextBox里的内容无法显示  -->
                            <ScrollViewer
                                x:Name="PART_ContentHost"
                                Grid.Column="0"
                                VerticalAlignment="Center"
                                Focusable="False"
                                HorizontalScrollBarVisibility="Hidden"
                                VerticalScrollBarVisibility="Hidden" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="IsReadOnly" Value="true" />
        <Setter Property="Margin" Value="10,0,0,0" />
        <Setter Property="MinWidth" Value="110" />
        <Setter Property="MaxWidth" Value="300" />
    </Style>