Question

我已经覆盖了PasswordBox的默认样式，以实现文本的居中对齐。以下是我的代码：

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

现在，问题是，PasswordBox缩小到输入文本的宽度，而不是拉伸到网格的整个宽度。我该如何解决？

Answer 1

现在，问题是，PasswordBox缩小到输入文本的宽度，而不是拉伸到网格的整个宽度。我该如何解决？

您需要移除HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"密码框的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延伸到整个网格。

要实现文本的中心对齐，您需要将HorizontalAlignment="Center"添加到ScrollViewer：

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

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

<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无法按预期工作

1 个答案:

Horizo​​ntalAlignment Stretch无法按预期工作

1 个答案:

HorizontalAlignment Stretch无法按预期工作