web-dev-qa-db-ja.com

WPFボタンのテキストコンテンツが垂直方向の中央に配置されていない

WPFボタンのテキストコンテンツがテキストの上に不要なスペースで表示される理由はありますか？

StackPanelにボタンがあります。このボタンは単純な閉じるボタンなので、中央に「x」が付いた四角いボタンとして表示したいと思います。パディングをゼロに設定し、Horizo​​ntalContentAlignとVerticalContentAlignの両方をCenterに設定しましたが、ボタンの下部に「x」が表示されます（または、FontSizeが高さに対して大きすぎる場合は切り捨てられます）。これは、ボタンの上部にパディングがあり、テキストが垂直方向のスペース全体を使用できないようにしているようです。

私のXAMLは次のとおりです。

<StackPanel Orientation="Horizontal">
        <Label Content="{Binding GenderFilter.Title}" FontWeight="Bold" Width="60" />
        <Button Padding="0" Width="15" Height="15" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="12">x</Button>
        <Label Content="{Binding GenderFilterExpander.SelectedValue}" />
</StackPanel>

ボタンのVerticalContentAlignプロパティをStretchまたはTopに設定しても、問題はまったく同じです。ボタンがそれ自体を決定するようにHeightプロパティとWeightプロパティを削除すると、コントロールは正方形ではなく直立した長方形として表示され、「x」はまだ中央に配置されません。

更新：ボタンとコンテンツの両方が完全に中央に配置されている間、ボタンは、高いパディングが適用されているかのように、必要以上に大きく表示されています。

私のリソーススタイルの定義は次のとおりです。

<Style x:Key="ClearFilterButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="0" />
    <Setter Property="Width" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=ActualHeight}" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Content" Value="X" />
    <Setter Property="FontSize" Value="8" />
</Style>

ボタン自体は次のように定義されます。

<Expander.Header>
    <StackPanel Orientation="Horizontal">
            <Label Content="{Binding GenderFilter.Title}" FontWeight="Bold" Width="60" />
            <Button Style="{StaticResource ClearFilterButtonStyle}"
                                    Visibility="{Binding GenderFilterExpander.ClearFilterVisibility}" />
            <Label Content="{Binding GenderFilterExpander.SelectedValue}"
                                   Visibility="{Binding GenderFilterExpander.SelectedValueVisibility}" />
    </StackPanel>
</Expander.Header>

DockPanel内のGroupBox内のStackPanel内にあるExpander。

デザインビューでは、ボタンのサイズは正しく、Xのみが含まれていますが、実行時にボタンが拡大されます。どうすれば修正できますか？

wpfxamlwpf-controls
19
Val M

私の推測では、この問題は、指定した高さと、実際に適切にレンダリングするために必要なスペースとの間に矛盾があるために発生します。

これを解決するためにできること：

  • ボタンのPaddingプロパティで遊んでください。これは、テキストとボタンの境界線の間のスペースを制御します。
  • フォントサイズを小さくします。
  • ボタンに明示的な高さを設定しないでください。少なくとも、必要なフォントサイズとパディングに対応するのに十分な高さをボタンに指定してください。

また、Heinziがコメントで述べているように、もちろん大文字のXを使用する必要があります。

ちなみに、ボタンが必要なサイズになるようにしながら、ボタンを適切な正方形にしたい場合に使用できるトリックを次に示します。

<Button Padding="0" 
    Width="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=ActualHeight}" 
    HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
    FontSize="12" Content="X" />

これにより、ボタンで必要な高さを効果的に決定し、幅をその計算値に設定できます。

11
Isak Savo

小文字の「x」でこれを実現する簡単な方法は、コンテンツとしてTextBlockを使用し、その上限を使用することです。

<Button Command="{Binding myCommand}">
    <TextBlock Text="x" Margin="0,-3,0,0"/>
</Button>
18
BlazingFrog