Horizo​​ntalAlignmentストレッチが正常に動作しない

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がグリッドの幅全体に伸縮するのではなく、入力したテキストの幅に縮小することです。どうすれば修正できますか？

あなたはControlTemplateのPasswordBoxのルートグリッドのHorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"を削除する必要があります。

... 
<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のストレッチを行います。

とテキストの中央揃えを実現するために、あなたはScrollViewerにHorizontalAlignment="Center"を追加する必要があります。

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

そしてここにはあります結果：