web-dev-qa-db-ja.com

CheckBoxをそのコンテンツに合わせるにはどうすればよいですか?

WPF CheckBoxの外観により、チェック部分とラベル(コンテンツ)部分の位置がずれます。以下に示すように、チェックはコンテンツの少し上に留まります。

enter image description here

XAMLは次のようになります。

<CheckBox Content="Poorly aligned CheckBox" Margin="9"/>

CheckBoxはグリッドセル内にあります。 XAML CheckBoxのコンテンツとチェック部分を垂直に揃える簡単な方法はありますか?運のないプロパティのさまざまな組み合わせを試しました 同様の質問 を見ましたが、答えはあまりにも複雑です。

前もって感謝します。

編集:この問題は、14に設定したWindow FontSizeが原因でした。問題を再現するには、CheckBox FontSizeを14(またはそれ以上)に設定します。私のプログラムは工場労働者によって遠くから見られるので、ユーザーがWindow FontSizeを増減できるようにします。

37
DeveloperDan

編集-新しい回答:(以前は良くなかった)

私が信じている最良の方法ではありませんが、仕事をすることができます:

<CheckBox>
    <TextBlock Text="Poorly aligned CheckBox" Margin="0,-2,0,0"/>
</CheckBox>

負のマージンを使用してコンテンツをプッシュすると、結果は次のようになります。 enter image description here

23
MichaelS

私はそれが遅すぎることを知っていますが、ここにマージンを設定せずに、より良いソリューションがあります。 TextBlockまたはCheckboxの高さごとにマージンを別々に設定する必要があります。

<CheckBox VerticalAlignment="Center" VerticalContentAlignment="Center">
    <TextBlock Text="Well aligned Checkbox" VerticalAlignment="Center" />
</CheckBox>

更新:

以下の@nmarlerのコメントをチェックする価値があります。

53
Majid

CheckBoxのデフォルトのスタイルは、WPFではそのようには見えません。 XPとWindows 7の両方で完全に整合します。この問題を再現する方法のより良い説明を提供できますか?

あなたが見ているオフセットを得るために私が考えることができる2つのことは、PaddingまたはVerticalContentAlignmentを変更することです。 CheckBoxのデフォルトのVerticalContentAlignment値はTopであり、CheckBoxを持つContentPadding"4,0,0,0"に設定されています。これら2つを変更して、違いが生じるかどうかを確認してください。

ここに比較があります

enter image description here

次のXamlから

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <CheckBox Grid.Row="0"
              Content="Poorly aligned CheckBox" Margin="9" />
    <CheckBox Grid.Row="1"
              Content="Padding=4,4,0,0" Margin="9" Padding="4,4,0,0"/>
    <CheckBox Grid.Row="2"
              Content="Vertical Center" Margin="9"
              VerticalContentAlignment="Center"/>
    <CheckBox Grid.Row="3"
              Content="Vertical Top" Margin="9"
              VerticalContentAlignment="Top"/>
</Grid>
15
Fredrik Hedblad

コンテンツのテキストブロックを作成したり、不要なコードを追加したりすることなく、このための簡単なソリューションがあります。 「VerticalContentAlignment」を使用してください。例:

<CheckBox Content="Sample of Text" VerticalContentAlignment="Center"/>
5
LucasM

空のCheckBoxとコンテンツを、水平方向のStackPanelに個別のコントロールとして配置します。これは、任意のフォントサイズで機能します。

<StackPanel Orientation="Horizontal">
    <CheckBox VerticalAlignment="Center" />
    <TextBlock VerticalAlignment="Center" Text="Option X" />
</StackPanel />
2
Thomas Hetzer

ネガティブトップパディングを適用すると、私のレイアウトでうまく機能します。

<CheckBox Content="Poorly aligned CheckBox" Padding="4,-3,0,0" Margin="9"/>
1
landsteven

私のチェックボックスはうまく配置されているので、あなたのチェックボックスは何が違うのでしょうか。唯一の明らかな違いは、私よりも大きなフォントを使用していることです。これは、次の質問を思い出させます。

TextWrappingを使用したWPF CheckBoxスタイル

あなたの問題は、コンテンツがテキストブロックの場合、チェックボックスが上揃えになり、フォントサイズが大きくなると奇妙に見えるかもしれないことです。私の推測では、代わりにCheckBoxのコンテンツとしてAccessTextを使用してみてください:

<CheckBox Margin="9"><AccessText>Better aligned CheckBox?</AccessText></CheckBox>
0
Qwertie