locked
ボタンに画像とテキストを表示する方法 RRS feed

  • 質問

  • Style.xamlというResourceファイルに設定したボタンの内容に画面側から画像とテキストを渡して
    表示させたいのですが、画像又はテキストのいずれかであれば表示できますが両方表示する
    方法が見つけられません。
    ご存知の方がいらっしゃいましたら御教示お願いし致します。

    ●Search.xaml
    <Button x:Name="btn2" Style="{StaticResource ButtonStyle}" Content="/Icons/find.png" Text="検索"/>
                                                                                                                                      ~~~~~~~~~~~
    ●Style.xaml
    <Style x:Key="ButtonStyle" TargetType="Button">


      <ContentControl>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
              <Image Height="30" Width="20" Source="{TemplateBinding Content}" Margin="10,0,0,0"/>
              <TextBlock Text="{TemplateBinding Text}" VerticalAlignment="Center"
                                                                   ~~~~
                     FontSize="14" FontWeight="SemiBold"
                     Margin="10,0,0,0"/>
          </StackPanel>
      </ContentControl>

    </Style>
    宜しくお願いします。

    2009年12月8日 2:01

回答

  • ボタンのControlTemplateをContentControlで具体的に実装せずに、ContentPresenterを配置して画面側よりButtonのContentににImageとTextBlockをStackPanelに入れて設定するのではどうでしょうか?
    ControlTemplate内でContentを具体的に書いては汎用的に使えないボタンになってしまうので。

    ●Search.xaml

    <Button x:Name="btn2" Style={"StaticResource ButtonStyle}">
        <StackPanel>
            <Image Height="30" Width="20" Source="/Icons/find.png" />
            <TextBlock VerticalAlignment="Center" FontSize="14" FontWeight="SemiBold" Margin="10,0,0,0" Text="検索" />
        </StackPanel>
    </Button>


    ●Style.xaml

    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <!-- レイアウトはご自由に -->
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />               
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    ★良い回答には回答済みマークを付けよう! kazuto Blog : http://blogs.wankuma.com/kzt/
    • 回答としてマーク bbholic 2009年12月9日 2:42
    2009年12月8日 11:24

すべての返信

  • ボタンのControlTemplateをContentControlで具体的に実装せずに、ContentPresenterを配置して画面側よりButtonのContentににImageとTextBlockをStackPanelに入れて設定するのではどうでしょうか?
    ControlTemplate内でContentを具体的に書いては汎用的に使えないボタンになってしまうので。

    ●Search.xaml

    <Button x:Name="btn2" Style={"StaticResource ButtonStyle}">
        <StackPanel>
            <Image Height="30" Width="20" Source="/Icons/find.png" />
            <TextBlock VerticalAlignment="Center" FontSize="14" FontWeight="SemiBold" Margin="10,0,0,0" Text="検索" />
        </StackPanel>
    </Button>


    ●Style.xaml

    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <!-- レイアウトはご自由に -->
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />               
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    ★良い回答には回答済みマークを付けよう! kazuto Blog : http://blogs.wankuma.com/kzt/
    • 回答としてマーク bbholic 2009年12月9日 2:42
    2009年12月8日 11:24
  • ありがとうございます。

    そうですね。やはり汎用的に使用する場合はご回答頂いた内容がベストですね。

    また今後ともお世話になることもあると思いますが宜しくお願い致します。

    2009年12月9日 2:46