如何应用TextBox控件模板？

我正在尝试简化一些代码并提高可维护性。

我最初正在寻找一种使文本框向左对齐的方法，它可以收缩和扩展到最大值，而无需在达到最大值后在网格单元内居中。

所以我开始编写一些这样的代码......

<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）

但不幸的是，这只产生看起来像这样的东西......

（图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）

这会产生这个...

（图3）

正如您所看到的，嵌套网格填充了整个 200 宽的空间，但文本框填充了左侧 100，并在右侧留下了空白空间。 （如果该窗口可调整大小，它将适当缩小和扩大）

我想应用以下方法代码清单3样式或控件模板，因此我可以将其一揽子应用于适用于这种情况的文本框。

在完美的情况下，我会做类似的事情......

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

（代码清单4）

并达到相同的结果Figure 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 声明中显式设置列宽，但如果它可以是自动的，那就太棒了。

您需要在模板中使用 TextBox 而不是 ContentPresenter。您将 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>

这应该可行，但在我看来，有点奇怪..