6

Buttonの内部が必要な WPF アプリケーションのコントロールに取り組んでいTextBoxます。にはButton、マウスオーバーで変化する画像が含まれますが、その部分を行う方法は既に知っています。私が問題を抱えているのは、実際には を に含めてButton、TextBox画像と同じくらいのスペースしか占有せず、透明にすることです。以下は、これまでに試したマークアップです。

XAML:

<Grid>
  <TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" Margin="5, 5, 10, 5" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/>
  <Button Background="Transparent" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
    <Button.Content>
      <Image Source="Image.png" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Button.Content>
  </Button>
</Grid>

私はこの質問に従ってきました: wpf でクリアボタン付きのテキストボックスを実装する方法は? 、この記事にもリンクされています: WPF 検索テキスト ボックス。質問で提案された XAML はStyle機能しませんでした。これは、私がアクセスできないために使用しているためだと思います。この記事はあまりにも多くの情報を提供しており、主に、マウスオーバーでのアイコンの検索と削除を切り替えるために必要なトリガーと依存関係プロパティについて説明しています。それで、これを実現する方法について簡単な解決策を見つける手助けを求めています。ありがとうございました！

編集:私は答えのアドバイスに従いました.ボタンを正しくスタイルすることはできますが、テキストボックスに表示されず、表示された場合でもテキストはその下に表示されます. XAML と何が起こっているかの写真を含めました。

XAML:

<Grid Margin="5, 5, 10, 5">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/>
  <Button Background="{Binding Backgound, ElementName=SearchBoxView}" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Click="SearchBoxViewButtonClick" Grid.Column="1">
    <Button.Template>
      <ControlTemplate>
        <Border HorizontalAlignment="Center" VerticalAlignment="Center">
          <Image Source="Image.png" Width="12" Height="12"/>
        </Border>
      </ControlTemplate>
    </Button.Template>
  </Button>
</Grid>

画像：

ボタン付き検索ボックス

4

1 に答える 1

5

Buttonコンテンツの代わりにテンプレートを指定する

<Button>
    <Button.Template>
        <ControlTemplate>
            <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                <Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png" 
                               Width="16" 
                               Height="16"/>
            </Border>
        </ControlTemplate>
     </Button.Template>
</Button>

編集

ところで、あなたの場合、画像はカバーされTextBox、テキストが入力されます。このコントロールを以下のようにグリッドの異なる列に配置することをお勧めします

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>
   <TextBox x:Name="SearchBoxView"
            HorizontalAlignment="Right"
            Width="200" Margin="5, 5, 10, 5"
            FontSize="16"
            KeyUp="SearchBoxKeyDown"
            Text="{Binding SearchText, Mode=TwoWay}"
            Grid.Column="0"/>

   <Button
            Grid.Column="1"
            Background="Transparent"
            HorizontalAlignment="Right"
            HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
           <ControlTemplate>
                <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png" 
                                   Width="16" 
                                   Height="16"/>
                </Border>
            </ControlTemplate>
         </Button.Template>
    </Button>
于 2013-08-14T14:54:57.787 に答える