如何让VisualBrush在Xaml中填充其容器?

时间:2013-02-13 23:26:41

标签: wpf xaml

我有用于搜索的文本框,我想在其中包含提示文本,提示用户搜索以及放大镜图标。我使用VisualBrush样式,我想要最左边的标签和最右边的图像,但是我无法获得VisualBrush的内容来填充整个文本框。根据我在AlignmentX上设置VisualBrush的方式,它们要么在左边粘在一起,要么在右边粘在一起。我尝试过使用StackPanelDockPanelGrid,但没有一个会填充整个文本框,让我在文本框的两端有元素。

<VisualBrush x:Key="CueBannerBrush"
             AlignmentX="Left"
             AlignmentY="Center"
             Stretch="None">
  <VisualBrush.Visual>
    <DockPanel HorizontalAlignment="Stretch">
      <Label Content="Begin typing to search"
             Foreground="LightGray"
             DockPanel.Dock="Left" />
      <Image Source="/WPF;component/Icons/32/Modern3D/objects/magnifier.png"
             Height="20"
             DockPanel.Dock="Right" />
    </DockPanel>
  </VisualBrush.Visual>
</VisualBrush>

生成此输出:

enter image description here

有关如何让画笔的孩子填充整个文本框并将提示文本与放大镜图标分开的任何建议?

1 个答案:

答案 0 :(得分:3)

您可以将其换成Grid,并为每个项目创建正确的列大小(标签,图片) 然后,您可以将VisualBrush width绑定到Texbox ActualWidth

<VisualBrush x:Key="CueBannerBrush"
             AlignmentX="Left"
             AlignmentY="Center"
             Stretch="None">
  <VisualBrush.Visual>
    <Grid Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=TextBox}}">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="163*" />
        <ColumnDefinition Width="26" />
      </Grid.ColumnDefinitions>
      <Label Content="Begin typing to search"
             Foreground="LightGray"
             Grid.Column="0" />
      <Image Source="http://icons.iconarchive.com/icons/awicons/vista-artistic/24/search-icon.png"
             Height="20"
             Grid.Column="1" />
    </Grid>
  </VisualBrush.Visual>
</VisualBrush>

结果:

enter image description here