web-dev-qa-db-ja.com

WPFの画像とテキストを含むボタンテンプレート

内部に画像とテキストを含むボタンを作成したいと思います。たとえば、「フォルダーの参照」や「インポート」などのボタンには、異なる画像とテキストを使用します。オプションの1つは、テンプレートを使用することです。似たような質問を見ました

コントロールテンプレートで画像+テキストボタンを作成しますか？

しかし、依存関係プロパティや他のクラスを使用せずにイメージのソースをバインドできる方法はありますか？

ありがとう

wpftemplatesbindingcustom-controls
12
Archie

いいえ。何をバインドしますかImage.Sourceへ？これにはDependencyPropertyが必要です。もちろん、TextとImageSourceまたはUriの2つのプロパティを含む通常のクラスを定義し、DataTemplateを使用してこのクラスのインスタンスをレンダリングすることもできますが、作成するコードはさらに多くなり、少し「臭い」になります。

依存関係プロパティまたはカスタムクラスを使用したくない理由は何ですか？

3
gehho

それほど複雑である必要はありません。 StackPanelをボタンの中に置くだけの簡単な方法でうまくいきます。

<Button>
  <StackPanel>
    <TextBlock>My text here</TextBlock>
    <Image Source="some.jpg" Stretch="None" />
  </StackPanel>
</Button>

次に、StackPanelを構成して、テキストを表示する場所、配置などを制御できます。

43
Marshal

私はそれらをきれいに並べるためにいくつかのものを追加しました

<Button>
   <StackPanel Orientation="Horizontal">
       <Image Source="/ApplicationName;component/Images/MyImage.ico"/>
       <Label Padding="0">My Button Text</Label>
   </StackPanel>
</Button>
15
Sean
    <Button>
        <StackPanel Orientation="Horizontal">
            <Image Source="Resources/add.png" Stretch="None" />
            <TextBlock Margin="5,0,0,0">Add</TextBlock>
        </StackPanel>
    </Button>
7
mpen
<Button x:Name="MyCoolButton"Width="200" Height="75">
<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Image Source="Pete-Brown-Silverlight-in-Action.png" Margin="5" Grid.Column="0" />
    <StackPanel Grid.Column="1" Margin="5">
        <TextBlock Text="Buy My Book!" FontWeight="Bold" />
        <TextBlock Text="Pete is writing THE Silverlight 4 book" TextWrapping="Wrap" />
    </StackPanel>
</Grid>
5
daniel

Stretch = "Uniform"が画像が元々ボタンのサイズよりも大きい場合に対処するためのSeanの回答に追加しました（私が実行した彼のコメントで言及されているBrainSlugs83の問題）同様に）。 [〜＃〜] msdn [〜＃〜] のストレッチオプションの詳細。

<Button>
    <StackPanel Orientation="Horizontal">
        <Image Source="/ApplicationName;component/Images/MyImage.ico" Stretch="Uniform"/>
        <Label Padding="0">My Button Text</Label>
    </StackPanel>
</Button>

これをBrainSlugs83の下の回答にコメントとして追加したかったのですが、ポイントが不足しているためまだできず、ショーンの回答の編集が拒否されました。

1
userN45290

私にとっては、XCeed WPF Toolkit（フリーウェア）の IconButton がうまく機能します。

0
marsh-wiggle