先看效果圖咯：

前面的文章中，button樣式告一段落。接下來分享幾個TextBox樣式。

後續持續更新中~

程式碼都在git上同步。有需要的可以下載檢視。專案地址在之前的文章中都有寫哦。

依舊是老規矩，話不多說，上程式碼咯。

首先要做搜尋框當然要有一個搜尋的圖示啦，幸運的是，fontawesome裡面有的~

在Fonts.xaml裡面加上這個 圖示資源

 <system:String x:Key="FontAwesomeSearch">&#xf002;</system:String>

顯示出來就是上面這個。

在Texts.xaml裡面寫樣式，程式碼如下 ：

<Style x:Key="SearchTextBox" TargetType="TextBox">
        <Setter Property="FontSize" Value="{StaticResource FontSizeRegular}"/>
        <Setter Property="Width" Value="150"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="Foreground" Value="White"/>
 

        <Setter Property="CaretBrush" Value="White"/>
        <Setter Property="Text" Value="66"/>
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBoxBase}">
                    <Grid>
                        <
 
Border x:Name="border" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="20">
                            <Grid>
                                <ScrollViewer x:Name="PART_ContentHost" 
                                              HorizontalAlignment="Left"
                                              VerticalAlignment="Center"
                                              Width="100"
                                              Margin="10 0 0 0"
                                              Focusable="False"
                                              HorizontalScrollBarVisibility="Hidden" 
                                              VerticalScrollBarVisibility="Hidden"/>
                                <Button Style="{StaticResource IconGrowButton}"
                                        Content="{StaticResource FontAwesomeSearch}" 
                                        HorizontalAlignment="Right"/>
                            </Grid>
                        </Border>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="True">

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

效果是這樣滴：

哈哈，成功了。再寫一個textbox樣式

程式碼如下 :

<Style TargetType="{x:Type TextBox}" x:Key="LineTextBox">
        <Setter Property="FontSize" Value="{StaticResource FontSizeLarge}"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="Margin" Value="0 5 0 5"/>
        <Setter Property="BorderBrush" Value="#007Add"/>
        <Setter Property="BorderThickness" Value="0 0 0 1"/>
        <Setter Property="CaretBrush" Value="White"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="White"/>

        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBoxBase}">
                    <Grid>
                        <Border x:Name="border" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                SnapsToDevicePixels="True">
                            <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                        </Border>

                        <TextBlock IsHitTestVisible="False"
                                   Text="{TemplateBinding Tag}"
                                   x:Name="placeholder"
                                   FontFamily="{TemplateBinding FontFamily}"
                                   Padding="{TemplateBinding Padding}"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                   Foreground="Gray"
                                   >
                            <TextBlock.Style>
                                <Style TargetType="{x:Type TextBlock}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}" Value="">
                                            <Setter Property="Visibility" Value="Visible" />
                                        </DataTrigger>
                                    </Style.Triggers>
</Style>
                            </TextBlock.Style>

                        </TextBlock>

                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

效果是這樣滴：

下面就是在MainWindow.xaml中使用樣式~

<TextBox Style="{StaticResource SearchTextBox}"/>
<TextBox Width="200" Style="{StaticResource LineTextBox}"
    Tag="請輸入字元"/>

動態效果見文章頂部動圖~

看到這裡明白了吧，Tag就是水印~