如何为文本框添加样式效果

Posted

技术标签:

【中文标题】如何为文本框添加样式效果【英文标题】:how to add effect for text box to style 【发布时间】:2011-07-06 15:45:27 【问题描述】:

我正在尝试为样式添加一种效果以重用它,但由于某种原因它不起作用...

<Style x:Key="NumericTextBoxStyle" TargetType="x:Type TextBox">
    <Style.Resources>
        <TextBox.Effect x:Key="EffectStyle">
            <DropShadowEffect BlurRadius="56" 
                              Direction="392" 
                              Color="#FF872E2E" 
                              RenderingBias="Quality"/>
       </TextBox.Effect>
    </Style.Resources>

    <Setter Property="Height" Value="25"/>
    <Setter Property="Width" Value="120"/>
    <Setter Property="HorizontalAlignment" Value="Right"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="TextAlignment" Value="Center"/>
</Style>

但是如何添加样式部分? (还有我如何声明效果?)

谢谢

【问题讨论】:

【参考方案1】:

尝试将 Effect 添加为 Setter

<Style x:Key="NumericTextBoxStyle" TargetType="x:Type TextBox">
    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect BlurRadius="56"
                              Direction="392"
                              Color="#FF872E2E"
                              RenderingBias="Quality"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Height" Value="25"/>
    <Setter Property="Width" Value="120"/>
    <Setter Property="HorizontalAlignment" Value="Right"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="TextAlignment" Value="Center"/>
</Style>

或者,如果您想将效果作为样式中的资源,您可以这样做

<Style x:Key="NumericTextBoxStyle" TargetType="x:Type TextBox">
    <Style.Resources>
        <DropShadowEffect x:Key="dropShadowEffect"
                          BlurRadius="56"
                          Direction="392"
                          Color="#FF872E2E"
                          RenderingBias="Quality"/>
    </Style.Resources>
    <Setter Property="Effect" Value="StaticResource dropShadowEffect"/>
    <!--...-->
</Style>

【讨论】:

在展示时使用静态样式资源效果很好!【参考方案2】:

您还可以将效果设为全局资源,以便与其他样式/控件一起使用:

<Grid>
    <Grid.Resources>
        <DropShadowEffect x:Key="dropShadowEffect" BlurRadius="56" 
                            Direction="392" 
                            Color="#FF872E2E" 
                            RenderingBias="Quality"/>

        <Style x:Key="NumericTextBoxStyle" TargetType="x:Type TextBox">
            <Setter Property="Effect" Value="StaticResource dropShadowEffect" />
            <Setter Property="Height" Value="25"/>
            <Setter Property="Width" Value="120"/>
        </Style>
    </Grid.Resources>

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

    <TextBox Style="StaticResource NumericTextBoxStyle" />
    <TextBox Style="StaticResource NumericTextBoxStyle" Grid.Row="1" />

    <ComboBox Effect="StaticResource dropShadowEffect" Grid.Row="2" />
</Grid>

【讨论】:

以上是关于如何为文本框添加样式效果的主要内容,如果未能解决你的问题,请参考以下文章

如何为文本框设置数据类型[重复]

如何为列表框中的每个项目设置不同的工具提示文本?

如何为“选择”框制作占位符?

如何为 Google Places API 自动完成文本框设置默认值

如何为特定的 <td> 赋予背景颜色?为此,我必须在第三个文本框中输入位置编号(使用 java 脚本)

移动端输入框只有输入文本后才能点击效果