5

一部のコードを簡素化し、保守性を向上させようとしています。

私は当初、最大値に達した後、グリッド セル内の中央に配置することなく、最大値まで縮小および拡大できるテキスト ボックスを左に揃える方法を探していました。

だから私はこのようなコードを書き始めました...

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
    <TextBox Text="Some text"
             VerticalAlignment="Center"
             HorizontalAlignment="Stretch"
             Margin="10"
             MaxWidth="150" />
</Grid>

(コード リスト 1)

そして、それはこのようなものをもたらします...

グリッド中央のテキスト ボックス

（図1）

ご覧のとおり、これにより TextBox が最大幅で中央に配置されますが、グリッド セルの中央に配置されます。

それで、テキストボックスの水平方向の配置をそのように変更したとしたら...

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
    <TextBox  Text="Some text"
              VerticalAlignment="Center"
              HorizontalAlignment="Left"
              Margin="10"
              MaxWidth="100" />
</Grid>

(コード リスト 2)

しかし、残念ながら、それはこのようなものしか得られません...

小さすぎる TextBox 左揃え

(図 2)

繰り返しますが、これは正しくありません。右側にすべての空白があるにもかかわらず、テキスト ボックスが最大幅の 100 まで拡張されていないためです。

最終的に、ネストされたグリッド内に TextBox を配置すると、目的の効果が得られることがわかりました。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"
                              MaxWidth="120" />
            <ColumnDefinition Width="0*" />
        </Grid.ColumnDefinitions>
        <TextBox Text="Some text"
             VerticalAlignment="Center"
             HorizontalAlignment="Stretch"
             Margin="10"
             MaxWidth="100" />
    </Grid>
</Grid>

(コード リスト 3)

これは...

正しい見た目の TextBox

(図3)

ご覧のとおり、入れ子になったグリッドは幅 200 のスペース全体を埋めますが、テキスト ボックスは左側の 100 を埋め、右側の空きスペースを残します。(このウィンドウのサイズを変更できる場合は、適切に縮小および拡大されます)

コード リスト 3のメソッドをスタイルまたはコントロール テンプレートに適用したいので、この状況が適用可能な TextBox に一括適用できます。

完璧なシナリオでは、次のようなことをします...

<TextBox Text="Some text"
         VerticalAlignment="Center"
         HorizontalAlignment="Stretch"
         Margin="10"
         MaxWidth="100"
         Style="{StaticResource ExpandingTextBox}" />

(コード リスト 4)

そして、図 3と同じ結果が得られます。

私は次のことを試しました...

<Style TargetType="{x:Type TextBox}"
       x:Key="ExpandingTextBox">
    <Setter Property="OverridesDefaultStyle"
            Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"
                                          MaxWidth="170" />
                        <ColumnDefinition Width="0*" />
                    </Grid.ColumnDefinitions>
                    <ContentPresenter/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

(コード リスト 5)

しかし、それだけでテキスト ボックスがフォームから消えてしまいます。私はこのようなテンプレートを書くのが苦手なので、ちょっと途方に暮れています。

また、ネストされた列の幅 = MaxWidth + 2 x Margin であることに気付きました。TextBox 宣言で列幅を明示的に設定してもかまいませんが、自動化できれば素晴らしいことです。

4

2 に答える 2

9

テンプレート内に ContentPresenter の代わりに TextBox が必要です。TextBox の既定のテンプレートを、テキスト入力用の領域がなくなったものに置き換えました。このようにしてみてください：

 <Style TargetType="{x:Type TextBox}" x:Key="ExpandingTextBox">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*"
                                      MaxWidth="170" />
                            <ColumnDefinition Width="0*" />
                        </Grid.ColumnDefinitions>
                        <TextBox  Text="{TemplateBinding Text}"
                                  VerticalAlignment="Center"
                                  HorizontalAlignment="Stretch"
                                  Margin="10"
                                  MaxWidth="100"
                         />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

これはうまくいくはずですが、私は少し奇妙です..

于 2013-04-25T22:56:15.580 に答える