1

検索に使用しているテキストボックスがあり、その中にヒントテキストを入れて、ユーザーに検索を促し、虫眼鏡アイコンを表示したいと考えています。スタイルを使用していてVisualBrush、ラベルを左端に、画像を右端に配置したいのですが、VisualBrushテキスト ボックス全体を埋めるためのコンテンツを取得できません。をどのように設定したかに応じて、それらは左側でくっついている、または右側でくっついてAlignmentXいVisualBrushます。StackPanel、DockPanel、およびを使用してみGridましたが、どれもテキストボックス全体を埋めず、テキストボックスの両端に要素を配置できません。

<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>

次の出力が生成されます。

ここに画像の説明を入力

ブラシの子をテキスト ボックス全体に入力し、ヒント テキストを虫眼鏡アイコンから分離する方法についての提案はありますか?

4

1 に答える 1

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>

結果：

ここに画像の説明を入力してください

于 2013-02-13T23:44:10.627 に答える