带背景颜色和路径的WPF TextBox(图像)

时间:2014-04-20 21:22:09

标签: wpf xaml wpf-controls

我在WPF应用中获得了TextBoxes的以下样式:

<!-- http://www.thexamlproject.com/ -->
<Style x:Key="LockIcon" TargetType="Path">
    <Setter Property="Height" Value="16" />
    <Setter Property="Width" Value="16" />
    <Setter Property="Stretch" Value="Uniform" />
    <Setter Property="Data" 
            Value="F1 M 80.6667,55.1172L 80.6667,35.3333C 80.6667,15.851 64.815,3.05176e-005 45.3333,3.05176e-005C 25.8509,3.05176e-005 9.99998,15.851 9.99998,35.3333L 9.99998,55.1172L 0,56L 0,129.333L 45.3333,133.333L 90.6667,129.333L 90.6667,56L 80.6667,55.1172 Z M 20.6667,54.1771L 20.6667,35.3333C 20.6667,21.7318 31.7317,10.6667 45.3333,10.6667C 58.9349,10.6667 70,21.7318 70,35.3333L 70,54.1771L 45.3333,52L 20.6667,54.1771 Z " />
</Style>

<VisualBrush x:Key="LockBrush" Stretch="None" AlignmentX="Left">
    <VisualBrush.Visual>
        <Border BorderThickness="4" BorderBrush="Transparent">
            <Path Style="{StaticResource LockIcon}" Fill="Red" />
        </Border>
    </VisualBrush.Visual>
</VisualBrush>

<Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBox}">
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" Value="{StaticResource LockBrush}"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Padding" Value="22,4"/>
        </Trigger>
    </Style.Triggers>
</Style>

我似乎无法找到将VisualBrush图像和背景颜色应用于整个TextBox的好方法。我要么得到奇怪的拉伸问题,要么根本无法填充整个TextBox(控件拉伸和宽度不同,具体取决于渲染视图)。

想法?

2 个答案:

答案 0 :(得分:1)

而不是使用VisualBrush控件模板。

<强> XAML

<Style x:Key="LockIcon"
           TargetType="Path">
      <Setter Property="Height"
              Value="16" />
      <Setter Property="Width"
              Value="16" />
      <Setter Property="Stretch"
              Value="Uniform" />
      <Setter Property="Data"
              Value="F1 M 80.6667,55.1172L 80.6667,35.3333C 80.6667,15.851 64.815,3.05176e-005 45.3333,3.05176e-005C 25.8509,3.05176e-005 9.99998,15.851 9.99998,35.3333L 9.99998,55.1172L 0,56L 0,129.333L 45.3333,133.333L 90.6667,129.333L 90.6667,56L 80.6667,55.1172 Z M 20.6667,54.1771L 20.6667,35.3333C 20.6667,21.7318 31.7317,10.6667 45.3333,10.6667C 58.9349,10.6667 70,21.7318 70,35.3333L 70,54.1771L 45.3333,52L 20.6667,54.1771 Z " />
    </Style>

    <Style TargetType='TextBox'
           x:Key='WithLockIcon'>
      <Setter Property='MinHeight'
              Value='26' />
      <Setter Property="Padding"
              Value="22,4" />
      <Style.Triggers>
        <Trigger Property="IsEnabled"
                 Value="false">
          <!-- Use a control template instead of 
               Background property -->
          <!--<Setter Property="Background"
                  Value="{StaticResource LockBrush}" />-->
          <!--<Setter Property="Padding"
                  Value="22,4" />-->

          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type TextBoxBase}">
                <!-- Set background here!-->
                <Border BorderThickness="4"
                        BorderBrush="Transparent"
                        HorizontalAlignment='Stretch'>
                  <StackPanel Background='#dddddd'
                              Orientation='Horizontal'>
                    <Path Style="{StaticResource LockIcon}"
                          Fill="Red" />
                    <ScrollViewer Margin="0"
                                  x:Name="PART_ContentHost">

                    </ScrollViewer>

                  </StackPanel>
                </Border>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Trigger>

      </Style.Triggers>
    </Style>
  </Window.Resources>
  <StackPanel>
    <TextBox x:Name='textbox1'
             Text='Example Text'
             IsEnabled='False'
             Style='{StaticResource WithLockIcon}' />
    <ToggleButton Checked='ToggleButton_Checked'
                  Unchecked='ToggleButton_Unchecked'
                  Content='Change State' />
  </StackPanel>

答案 1 :(得分:0)

我在类似的情况下实现了相当接近的模拟。

<Window x:Class="VisualBrushMargins.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        Background="{DynamicResource WindowBackground}">
    <Window.Resources>
        <VisualBrush x:Key="WindowBackground" Stretch="UniformToFill">
            <VisualBrush.Visual>
                <Grid>
                    <Border Background="DarkGreen" Width="250" Height="150" />
                    <Canvas Height="130" Width="180" Background="DarkBlue">
                        <Path>
                            <!-- path goes here -->
                        </Path>
                        <Ellipse Width="100" Height="100" Stroke="Red" />
                    </Canvas>
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Window.Resources>
    <Grid/>
</Window>

what it looks like

路径适合画布。不同地调整画布和边框的大小允许添加&#34;边距&#34;到刷子 - 注意它在窗口调整大小时的行为。 (画布的颜色为蓝色用于说明目的 - 实际上它应该是透明的)