質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • C#

    9215questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • .NET Framework

    543questions

    .NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

  • XAML

    294questions

    XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

XAMLのStackPanel内DataTemplateに設置したボタンにスタイル(文字寄せとボタン同士をくっつける)がうまくあたりません…

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,203

toshi0607

score 49

 概要


ボタンを複数表示させる下記のようなコードで、
・ボタンに表示する文字を中央寄せにしたい(現状:左寄せになる)
・ボタン同士をくっつけたい(現状:数ピクセル離れる)

のですが、それぞれの現状のようになってしまいます…

解決方法のごご教示をお願いします。

<StackPanel Margin="20" VerticalAlignment="Center" DataContext="{Binding Source={StaticResource oHogePage}, Path=Sample}">
        <ListBox ItemsSource="{Binding}" Height="290" Background="#FFECECEC" BorderBrush="{x:Null}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Button Background="White" Width="488" Height="35" FontSize="18" Click="Click_Button" Style="{DynamicResource ButtonListStyle}">
                        <TextBlock Text="{Binding HogeHoge}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Button>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>


また、下記がButtonListStyleの中身です。
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
        <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
        <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
        <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
        <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
        <Style x:Key="ButtonListStyle" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>

            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            <StackPanel Orientation="Horizontal">
                                <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </StackPanel>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="border" Value="DarkGray"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 動作環境

・ .NET Frame Work 4.5 
・Visual Studio2013 


よろしくお願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • daichan

    2015/11/27 13:07

    ButtonのStyleに指定しているButtonListStyleも見せてください。

    キャンセル

  • toshi0607

    2015/11/27 14:22

    追記しました!

    キャンセル

回答 1

checkベストアンサー

+1

こんにちは。

エラー通すためにちょっと崩してしまいましたが、以下のような感じですかね。
<ListBox Height="290" Background="#FFECECEC" BorderBrush="{x:Null}">
    <ListBox.ItemsSource>
        <x:Array Type="sys:String">
            <sys:String>aaa</sys:String>
            <sys:String>bbb</sys:String>
        </x:Array>
    </ListBox.ItemsSource>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Button Background="White" Width="488" Height="35" FontSize="18" 
                    HorizontalContentAlignment="Left" VerticalContentAlignment="Top" Content="aaa" />
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Padding" Value="0" />
            <Setter Property="BorderThickness" Value="0" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

ボタンの中はxxxContentAlignmentで調整できます。(上の例では左上に寄せました)
ListBoxItemのボーダーサイズなどを調整してボタン同士をくっつけてみました。これについては他に最適解があるかも。


<ControlTemplate TargetType="{x:Type Button}">
    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
        <!--<StackPanel Orientation="Horizontal">-->
            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        <!--</StackPanel>-->
    </Border>

ButtonListStyleがStackPanelで詰められているからですね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/11/27 13:22

    ありがとうございます!
    ボタン同士はくっついたのですが、ボタン内のテキストがHorizontalContentAlignment="Center"にしてもボタンの左はしに寄ってしまいますね…

    キャンセル

  • 2015/11/27 13:37

    追記しました

    キャンセル

  • 2015/11/27 14:31

    ContentTemplateが優先されてたんですね…
    ありがとうございました!解決しました!!大変助かりました。

    キャンセル

同じタグがついた質問を見る

  • C#

    9215questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • .NET Framework

    543questions

    .NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

  • XAML

    294questions

    XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

  • トップ
  • C#に関する質問
  • XAMLのStackPanel内DataTemplateに設置したボタンにスタイル(文字寄せとボタン同士をくっつける)がうまくあたりません…