HorizontalAlignment Stretch 无法按预期工作 [英] HorizontalAlignment Stretch does not work as expected

查看：25 发布时间：2021/9/15 20:10:30 xaml uwp

本文介绍了HorizontalAlignment Stretch 无法按预期工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经覆盖了 PasswordBox 的默认样式来实现文本的居中对齐.下面是我的代码:

I have overridden the default style of PasswordBox to achieve the center alignment of the text. Below is the code I have:

<Page.Resources>
        <Style x:Key="PasswordStyle" TargetType="PasswordBox">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="PasswordBox">
                    <Grid Background="White" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                        <Grid.Resources>
                            <Style x:Name="RevealButtonStyle" TargetType="Button">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Button">
                                            <Grid x:Name="ButtonLayoutGrid" BorderBrush="{ThemeResource TextBoxButtonBorderThemeBrush}"
                                                BorderThickness="{TemplateBinding BorderThickness}"
                                                Background="{ThemeResource TextBoxButtonBackgroundThemeBrush}">

                                                <TextBlock 
                                                x:Name="GlyphElement"
                                                Foreground="{ThemeResource SystemControlForegroundChromeBlackMediumBrush}"
                                                VerticalAlignment="Center"
                                                HorizontalAlignment="Center"
                                                FontStyle="Normal"
                                                FontSize="16"
                                                Text="&#xE052;"
                                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                AutomationProperties.AccessibilityView="Raw"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Grid.Resources>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Border 
                        x:Name="BackgroundElement"
                        Grid.Row="1"
                        Background="{TemplateBinding Background}"
                        Margin="{TemplateBinding BorderThickness}"
                        Opacity="{ThemeResource TextControlBackgroundRestOpacity}"
                        Grid.ColumnSpan="2"/>
                        <Border x:Name="BorderElement"
                        Grid.Row="1"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Grid.ColumnSpan="2"/>
                        <ContentPresenter x:Name="HeaderContentPresenter"
                        x:DeferLoadStrategy="Lazy"
                        Visibility="Collapsed"
                        Grid.Row="0"
                        Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                        Margin="0,0,0,8"
                        Grid.ColumnSpan="2"
                        Content="{TemplateBinding Header}"
                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                        FontWeight="Normal" />
                        <ScrollViewer
                        x:Name="ContentElement"
                        Grid.Row="1"
                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                        IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                        IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                        Margin="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}"
                        IsTabStop="False"
                        ZoomMode="Disabled"
                        AutomationProperties.AccessibilityView="Raw"/>
                        <ContentControl x:Name="PlaceholderTextContentPresenter"
                        Grid.Row="1"
                        Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
                        Margin="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}"
                        IsTabStop="False"
                        Grid.ColumnSpan="2"
                        Content="{TemplateBinding PlaceholderText}"
                        IsHitTestVisible="False"/>
                        <Button x:Name="RevealButton"
                        Grid.Row="1"
                        Style="{StaticResource RevealButtonStyle}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Margin="{ThemeResource HelperButtonThemePadding}"
                        IsTabStop="False"
                        Grid.Column="1"
                        Visibility="Collapsed"
                        FontSize="{TemplateBinding FontSize}"
                        VerticalAlignment="Stretch"
                        MinWidth="34" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    </Page.Resources>
    <Grid 
        VerticalAlignment="Center"
        HorizontalAlignment="Stretch"
        Background="White">


        <Grid Background="Aqua" HorizontalAlignment="Stretch">
            <PasswordBox Style="{StaticResource PasswordStyle}"></PasswordBox>
        </Grid>
    </Grid>

现在，问题是，密码框缩小到输入文本的宽度，而不是拉伸到网格的整个宽度.我该如何解决?

Now, the problem is, the PasswordBox shrinks to the width of entered text instead of stretching to the entire width of the Grid. How can I fix it?

推荐答案

现在，问题是，密码框缩小到输入文本的宽度，而不是拉伸到网格的整个宽度.我该如何解决?

Now, the problem is, the PasswordBox shrinks to the width of entered text instead of stretching to the entire width of the Grid. How can I fix it?

您需要删除ControlTemplate的PasswordBox根Grid的HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}":

You need to remove the HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" of PasswordBox's root Grid of ControlTemplate:

...
<Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="PasswordBox">
                <Grid Background="White"> // remove the HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" here.
                    <Grid.Resources>
                        <Style x:Name="RevealButtonStyle" TargetType="Button">
                            <Setter Property="Template">
                                <Setter.Value>
...

这将使 PasswordBox 拉伸到整个网格.

This will make the PasswordBox strech to the entire Grid.

并且要实现文字居中对齐，需要在ScrollViewer中添加HorizontalAlignment="Center":

And to achieve the center alignment of the text, you need to add HorizontalAlignment="Center" to the ScrollViewer:

<ScrollViewer
     HorizontalAlignment="Center" // added HorizontalAlignment="Center"
     x:Name="ContentElement"
     Grid.Row="1"
...

因此固定的 XAML 将如下所示:

So the fixed XAML will look like this:

<Page.Resources>
    <Style x:Key="PasswordStyle" TargetType="PasswordBox">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="PasswordBox">
                    <Grid Background="White">
                        <Grid.Resources>
                            <Style x:Name="RevealButtonStyle" TargetType="Button">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Button">
                                            <Grid x:Name="ButtonLayoutGrid" BorderBrush="{ThemeResource TextBoxButtonBorderThemeBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}"
                                            Background="{ThemeResource TextBoxButtonBackgroundThemeBrush}">

                                                <TextBlock 
                                            x:Name="GlyphElement"
                                            Foreground="{ThemeResource SystemControlForegroundChromeBlackMediumBrush}"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Center"
                                            FontStyle="Normal"
                                            FontSize="16"
                                            Text="&#xE052;"
                                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                            AutomationProperties.AccessibilityView="Raw"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Grid.Resources>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Border 
                    x:Name="BackgroundElement"
                    Grid.Row="1"
                    Background="{TemplateBinding Background}"
                    Margin="{TemplateBinding BorderThickness}"
                    Opacity="{ThemeResource TextControlBackgroundRestOpacity}"
                    Grid.ColumnSpan="2"/>
                        <Border x:Name="BorderElement"
                    Grid.Row="1"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Grid.ColumnSpan="2"/>
                        <ContentPresenter x:Name="HeaderContentPresenter"
                    x:DeferLoadStrategy="Lazy"
                    Visibility="Collapsed"
                    Grid.Row="0"
                    Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                    Margin="0,0,0,8"
                    Grid.ColumnSpan="2"
                    Content="{TemplateBinding Header}"
                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                    FontWeight="Normal" />
                        <ScrollViewer
                    HorizontalAlignment="Center"
                    x:Name="ContentElement"
                    Grid.Row="1"
                    HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                    VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                    IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                    IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                    Margin="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}"
                    IsTabStop="False"
                    ZoomMode="Disabled"
                    AutomationProperties.AccessibilityView="Raw"/>
                        <ContentControl x:Name="PlaceholderTextContentPresenter"
                    Grid.Row="1"
                    Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
                    Margin="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}"
                    IsTabStop="False"
                    Grid.ColumnSpan="2"
                    Content="{TemplateBinding PlaceholderText}"
                    IsHitTestVisible="False"/>
                        <Button x:Name="RevealButton"
                    Grid.Row="1"
                    Style="{StaticResource RevealButtonStyle}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Margin="{ThemeResource HelperButtonThemePadding}"
                    IsTabStop="False"
                    Grid.Column="1"
                    Visibility="Collapsed"
                    FontSize="{TemplateBinding FontSize}"
                    VerticalAlignment="Stretch"
                    MinWidth="34" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<Grid 
    VerticalAlignment="Center"
    HorizontalAlignment="Stretch"
    Background="White">


    <Grid Background="Aqua" HorizontalAlignment="Stretch">
        <PasswordBox Style="{StaticResource PasswordStyle}"></PasswordBox>
    </Grid>
</Grid>

结果如下:

这篇关于HorizontalAlignment Stretch 无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

HorizontalAlignment Stretch 无法按预期工作 [英] HorizontalAlignment Stretch does not work as expected

问题描述

推荐答案

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

Horizo​​ntalAlignment Stretch 无法按预期工作 [英] HorizontalAlignment Stretch does not work as expected

问题描述

推荐答案

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

HorizontalAlignment Stretch 无法按预期工作 [英] HorizontalAlignment Stretch does not work as expected

登录关闭