在Windows商店应用垂直和水平居中文本的TextBlock和PasswordBox [英] Centering text vertically and horizontally in TextBlock and PasswordBox in windows store app

查看：458
本文介绍了在Windows商店应用垂直和水平居中文本的TextBlock和PasswordBox的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想集中在一个TextBlock和PasswordBox文本。



在TextBlock中我用TextAlignment属性水平居中的文本，但它仍接近顶端。如何垂直居中文本？



而在PasswordBox没有财产联想到文本对齐方式，如何实现这一目标？


< DIV CLASS =h2_lin>解决方案

TextAlignment是水平对齐。 。TextBlock的本身并不能支持垂直对齐



我建议把边境周围，让边境做垂直对齐方式：

 < BORDER BorderBrush ={X：空}HEIGHT =50> 
< TextBlock的文本=您的文本VerticalAlignment =中心/> 
< /边框>

或者其他方式将是使用文本块内的高度并设置填充。



有关在密码框中使用 WPF 

 < PasswordBox Horizo​​ntalContentAlignment = 中心VerticalContentAlignment =中心/>



对于的Silverlight 您将需要提取passwordbox实际模板（用混合它允许你编辑模板和复制），那么您就可以使用模板绑定改变各成员（在ContentElement的是边框类型）：

 的Horizo​​ntalAlignment ={TemplateBinding Horizo​​ntalContentAlignment}VerticalAlignment ={TemplateBinding VerticalContentAlignment}

你可以得到该模板也是在这个 MSDN链接< 。/ A>



有关在Silverlight <你的XAML，因为这/ STRONG>更新密码框样式的 passworbox：

 <控件模板X：键=ValidationToolTipTemplate> 
<电网X：名称=根保证金=5,0RenderTransformOrigin =0,0透明度=0> 
< Grid.RenderTransform> 
< TranslateTransform X：NAME =XForm的X = -  25/> 
< /Grid.RenderTransform> 
< VisualStateManager.VisualStateGroups> 
< VisualStateGroup NAME =OpenStates> 
< VisualStateGroup.Transitions> 
将; VisualTransition GeneratedDuration =0/> 
将; VisualTransition若要=打开GeneratedDuration =0：0：0.2> 
<情节提要> 
< D​​oubleAnimation是Storyboard.TargetName =XForm的Storyboard.TargetProperty =X为=0时长=0：0：0.2> 
< D​​oubleAnimation.EasingFunction> 
< BackEase振幅= EasingMode =EaseOut/>3。 
< /DoubleAnimation.EasingFunction> 
< / DoubleAnimation是> 
< D​​oubleAnimation是Storyboard.TargetName =根Storyboard.TargetProperty =不透明度为=1时长=0：0：0.2/> 
< /故事板> 
< / VisualTransition> 
< /VisualStateGroup.Transitions> 
<的VisualState X：NAME =关闭> 
<情节提要> 
< D​​oubleAnimation是Storyboard.TargetName =根Storyboard.TargetProperty =不透明度为=0时长=0/> 
< /故事板> 
< /&的VisualState GT; 
<的VisualState X：名称=打开> 
<情节提要> 
< D​​oubleAnimation是Storyboard.TargetName =XForm的Storyboard.TargetProperty =X为=0时长=0/> 
< D​​oubleAnimation是Storyboard.TargetName =根Storyboard.TargetProperty =不透明度为=1时长=0/> 
< /故事板> 
< /&的VisualState GT; 
< / VisualStateGroup> 
< /VisualStateManager.VisualStateGroups> 
 
< BORDER =保证金4,4，-4，-4背景=＃052A2E31CornerRadius =10/> 
< BORDER =保证金3,3，-3，-3背景=＃152A2E31CornerRadius =4/> 
将;边框保证金=2,2，-2，-2后台=＃252A2E31CornerRadius =3/> 
< BORDER =保证金1,1，-1，-1背景=＃352A2E31CornerRadius =2/> 
 
<边框背景=＃FFDC000CCornerRadius =2/> 
< BORDER CornerRadius =2> 
< TextBlock的
 UseLayoutRounding =false的
前景=白保证金=8,4,8,4了maxWidth =250TextWrapping =自动换行文本={绑定（Validation.Errors）[0] .ErrorContent}/> 
< /边框> 
< /网格和GT; 
< /控件模板> 
<风格的TargetType =PasswordBox> 
< setter属性=了borderThicknessVALUE =1/> 
< setter属性=背景VALUE =＃FFFFFFFF/> 
< setter属性=前景VALUE =＃FF000000/> 
< setter属性=填充VALUE =2/> 
< setter属性=BorderBrush> 
< Setter.Value> 
<一个LinearGradientBrush终点=0.5,1StartPoint可以=0.5,0> 
将;渐变停止颜色=＃FFA3AEB9偏移=0/> 
<渐变停止颜色=＃FF8399A9偏移量=0.375/> 
<渐变停止颜色=＃FF718597偏移量=0.375/> 
将;渐变停止颜色=＃FF617584偏移=1/> 
< /一个LinearGradientBrush> 
< /Setter.Value> 
< /二传手> 
< setter属性=模板> 
< Setter.Value> 
<的ControlTemplate的TargetType =PasswordBox> 
<电网X：NAME =rootElement的> 
< VisualStateManager.VisualStateGroups> 
< VisualStateGroup X：NAME =CommonStates> 
<的VisualState X：名称=正常/> 
<的VisualState X：NAME =鼠标悬停> 
<情节提要> 
< ColorAnimation Storyboard.TargetName =MouseOverBorderStoryboard.TargetProperty =（Border.BorderBrush）（SolidColorBrush.Color）。为了=＃FF99C1E2时间=0/> 
< /故事板> 
< /&的VisualState GT; 
<的VisualState X：名称=已禁用> 
<情节提要> 
< D​​oubleAnimation是Storyboard.TargetName =DisabledVisualElementStoryboard.TargetProperty =不透明度为=1时长=0/> 
< /故事板> 
< /&的VisualState GT; 
< / VisualStateGroup> 
< VisualStateGroup X：NAME =FocusStates> 
<的VisualState X：NAME =聚焦> 
<情节提要> 
< D​​oubleAnimation是Storyboard.TargetName =FocusVisualElementStoryboard.TargetProperty =不透明度为=1时长=0/> 
< /故事板> 
< /&的VisualState GT; 
<的VisualState X：NAME =没有重点的> 
<情节提要> 
< D​​oubleAnimation是Storyboard.TargetName =FocusVisualElementStoryboard.TargetProperty =不透明度为=0时长=0/> 
< /故事板> 
< /&的VisualState GT; 
< / VisualStateGroup> 
< VisualStateGroup X：NAME =ValidationStates> 
<的VisualState X：NAME =有效/> 
<的VisualState X：NAME =InvalidUnfocused> 
<情节提要> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =ValidationErrorElementStoryboard.TargetProperty =能见度> 
将; DiscreteObjectKeyFrame KeyTime =0> 
< D​​iscreteObjectKeyFrame.Value> 
<能见度和GT;可见的LT; /能见度和GT; 
< /DiscreteObjectKeyFrame.Value> 
< / DiscreteObjectKeyFrame> 
< / ObjectAnimationUsingKeyFrames> 
< /故事板> 
< /&的VisualState GT; 
<的VisualState X：NAME =InvalidFocused> 
<情节提要> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =ValidationErrorElementStoryboard.TargetProperty =能见度> 
将; DiscreteObjectKeyFrame KeyTime =0> 
< D​​iscreteObjectKeyFrame.Value> 
<能见度和GT;可见的LT; /能见度和GT; 
< /DiscreteObjectKeyFrame.Value> 
< / DiscreteObjectKeyFrame> 
< / ObjectAnimationUsingKeyFrames> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =validationTooltipStoryboard.TargetProperty =ISOPEN> 
将; DiscreteObjectKeyFrame KeyTime =0> 
< D​​iscreteObjectKeyFrame.Value> 
< SYS：布尔>真< / SYS：布尔> 
< /DiscreteObjectKeyFrame.Value> 
< / DiscreteObjectKeyFrame> 
< / ObjectAnimationUsingKeyFrames> 
< /故事板> 
< /&的VisualState GT; 
< / VisualStateGroup> 
< /VisualStateManager.VisualStateGroups> 
 
< BORDER X：名称=边框了borderThickness ={TemplateBinding了borderThickness}CornerRadius =1不透明度=1背景={TemplateBinding背景}BorderBrush ={TemplateBinding BorderBrush }> 
< BORDER X：NAME =MouseOverBorder了borderThickness =1BorderBrush =透明> 
< BORDER X：NAME =ContentElement的保证金={TemplateBinding填充}的Horizo​​ntalAlignment ={TemplateBinding Horizo​​ntalContentAlignment}VerticalAlignment ={TemplateBinding VerticalContentAlignment}/> 
< /边框> 
< /边框> 
< BORDER X：NAME =DisabledVisualElement背景=＃A5F7F7F7BorderBrush =＃A5F7F7F7了borderThickness ={TemplateBinding了borderThickness}不透明度=0IsHitTestVisible =FALSE/> 
< BORDER X：NAME =FocusVisualElementBorderBrush =＃FF6DBDD1了borderThickness ={TemplateBinding了borderThickness}保证金=1不透明度=0IsHitTestVisible =FALSE/> 
< BORDER X：NAME =ValidationErrorElement了borderThickness =1CornerRadius =1BorderBrush =＃FFDB000C能见度=折叠> 
< ToolTipService.ToolTip> 
<工具提示X：NAME =validationTooltip模板={StaticResource的ValidationToolTipTemplate}布局=右
 PlacementTarget ={绑定的RelativeSource = {的RelativeSource TemplatedParent}}
的DataContext = {绑定的RelativeSource = {的RelativeSource TemplatedParent}}> 
< ToolTip.Triggers> 
<的EventTrigger RoutedEvent =Canvas.Loaded> 
< EventTrigger.Actions> 
< BeginStoryboard> 
<情节提要> 
< ObjectAnimationUsingKeyFrames Storyboard.TargetName =validationTooltipStoryboard.TargetProperty =IsHitTestVisible> 
将; DiscreteObjectKeyFrame KeyTime =0> 
< D​​iscreteObjectKeyFrame.Value> 
< SYS：布尔>真< / SYS：布尔> 
< /DiscreteObjectKeyFrame.Value> 
< / DiscreteObjectKeyFrame> 
< / ObjectAnimationUsingKeyFrames> 
< /故事板> 
< / BeginStoryboard> 
< /EventTrigger.Actions> 
< /&的EventTrigger GT; 
< /ToolTip.Triggers> 
< /工具提示> 
< /ToolTipService.ToolTip> 
<电网WIDTH =12HEIGHT =12的Horizo​​ntalAlignment =右保证金=1，-4，-4,0VerticalAlignment =评出的背景=透明> 
<路径保证金=1,3,0,0数据=M 1,0 L6,0 2,2 90 0 1 8,2 L8,7 Z补=＃FFDC000C/ > 
<路径保证金=1,3,0,0数据=M 0,0 L2,0大号8,6 L8,8填充=＃FFFFFF/> 
< /网格和GT; 
< /边框> 
< /网格和GT; 
< /控件模板> 
< /Setter.Value> 
< /二传手> 
< /样式和GT;



那么你的PasswordBox可以调整为这样的：

 < PasswordBox Horizo​​ntalContentAlignment =中心VerticalContentAlignment =中心/>


I am trying to center the text in a TextBlock and PasswordBox.

In TextBlock I use TextAlignment Property to center the text horizontally, but it still close to the top. How to center the text vertically?

And in PasswordBox there is no property associate with the text alignment, how to achieve this??

解决方案

TextAlignment is for horizontal alignment. TextBlock itself doesn't suport vertical alignment.

I suggest put a border around it and let border do vertical alignment:

<Border BorderBrush="{x:Null}" Height="50">
    <TextBlock Text="Your text" VerticalAlignment="Center"/>
</Border>

Or other way would be using height and set padding within textblock.

For password box use in WPF:

<PasswordBox HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />

For Silverlight you will need to extract the actual template of passwordbox (use blend it allows you to edit template and copy that) then you can change the members (on ContentElement which is of type Border) with template binding like:

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

You can get the template also at this msdn link.

For passworbox in Silverlight update password box style in your xaml as this:

        <ControlTemplate x:Key="ValidationToolTipTemplate">
        <Grid x:Name="Root" Margin="5,0" RenderTransformOrigin="0,0" Opacity="0">
            <Grid.RenderTransform>
                <TranslateTransform x:Name="xform" X="-25"/>
            </Grid.RenderTransform>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="OpenStates">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0"/>
                        <VisualTransition To="Open" GeneratedDuration="0:0:0.2">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                                    <DoubleAnimation.EasingFunction>
                                        <BackEase Amplitude=".3" EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                                <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
                            </Storyboard>
                        </VisualTransition>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="Closed">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Open">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0"/>
                            <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5"/>
            <Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4"/>
            <Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3"/>
            <Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2"/>

            <Border Background="#FFDC000C" CornerRadius="2"/>
            <Border CornerRadius="2">
                <TextBlock 
              UseLayoutRounding="false" 
              Foreground="White" Margin="8,4,8,4" MaxWidth="250" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}"/>
            </Border>
        </Grid>
    </ControlTemplate>
    <Style TargetType="PasswordBox">
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Background" Value="#FFFFFFFF" />
        <Setter Property="Foreground" Value="#FF000000" />
        <Setter Property="Padding" Value="2" />
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="PasswordBox">
                    <Grid x:Name="RootElement">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF99C1E2" Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ValidationStates">
                                <VisualState x:Name="Valid"/>
                                <VisualState x:Name="InvalidUnfocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" >
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="InvalidFocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" >
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
                                            <DiscreteObjectKeyFrame KeyTime="0" >
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>True</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                            <Border x:Name="MouseOverBorder" BorderThickness="1" BorderBrush="Transparent">
                                <Border x:Name="ContentElement" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Border>
                        <Border x:Name="DisabledVisualElement" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" IsHitTestVisible="False"/>
                        <Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" Margin="1" Opacity="0" IsHitTestVisible="False"/>
                        <Border x:Name="ValidationErrorElement" BorderThickness="1" CornerRadius="1" BorderBrush="#FFDB000C" Visibility="Collapsed">
                            <ToolTipService.ToolTip>
                                <ToolTip x:Name="validationTooltip" Template="{StaticResource ValidationToolTipTemplate}" Placement="Right" 
                                       PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" 
                                       DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                                    <ToolTip.Triggers>
                                        <EventTrigger RoutedEvent="Canvas.Loaded">
                                            <EventTrigger.Actions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsHitTestVisible">
                                                            <DiscreteObjectKeyFrame KeyTime="0" >
                                                                <DiscreteObjectKeyFrame.Value>
                                                                    <sys:Boolean>true</sys:Boolean>
                                                                </DiscreteObjectKeyFrame.Value>
                                                            </DiscreteObjectKeyFrame>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger.Actions>
                                        </EventTrigger>
                                    </ToolTip.Triggers>
                                </ToolTip>
                            </ToolTipService.ToolTip>
                            <Grid Width="12" Height="12" HorizontalAlignment="Right" Margin="1,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
                                <Path Margin="1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C"/>
                                <Path Margin="1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Then your PasswordBox can have alignment as such:

<PasswordBox HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>

这篇关于在Windows商店应用垂直和水平居中文本的TextBlock和PasswordBox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆