Question

我希望在文本框获得焦点时将图像设置为边框。我知道如何在文本框获得焦点时设置边框颜色，如下所示

<Style  TargetType="{x:Type TextBox}">
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="BorderThickness" Value="2.20" />
                    <Setter Property="BorderBrush"  Value="#f8cb1c" />
                </Trigger>
            </Style.Triggers>
        </Style>

但如何为边框或文本框周围设置图像。

Answer 1

<Style x:Key="TextBoxStyle1" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
                        <Grid>
                            <Image x:Name="imgctrl" Stretch="Fill"/>
                            <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Grid>
                    </Microsoft_Windows_Themes:ListBoxChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="Source" TargetName="imgctrl" Value="5.jpg"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 2

我会隐藏默认的TextBox边框，并将其放在包含所需边框图像的Image之上，并在Image为TextBox时显示<Style x:Key="BorderImageStyle" TargetType="{x:Type Image}"> <Setter Property="IsVisible" Value="False" /> <Style.Triggers> <DataTrigger Binding="{Binding ElementName=SomeTextBox, Path=IsKeyboardFocusWithin}" Value="True"> <Setter Property="IsVisible" Value="True" /> </DataTrigger> </Style> <Grid> <Image x:Name="BorderImage" ... /> <TextBox x:Name="SomeTextBox" BorderThickness="0" Margin="20" ... /> </Grid>选择

{{1}}

在焦点上设置文本框的边框图像

2 个答案: