XAML WPF居中文本在拉伸标签固定宽度

bvn4nwqk 于 2023-08-01 发布在其他

关注(0)|答案(3)|浏览(110)

我的目标很简单，但是我想不出来。对不起的泰特尔，但不能想出一个更好的解释...
我有一个用户控件的标签，显示的当前时间（连接到一个计时器与1秒的时间间隔）。标签是其父标签的宽度，文本居中对齐。格式为DateTime.ToString（“HH：mm：ss”），FontFamily和大小可由用户调整。到目前为止没有什么奇怪的…但是，文本居中对齐，因此当时间为12：34：02时，像素宽度与12：34：11不同。（当然取决于字体）这会导致标签跳转（因为它会自动居中）
下面的代码就是一个例子。canvas用于在其上绘制内容，viewbox用于在其父级中自动调整大小。
代码：

<Grid>
    <Viewbox>
        <Canvas Name="canv" Height="300" Width="300">
            <StackPanel Name="stckpnlDateTime">

                <Label Name="lblDateOrText" 
                       Grid.Column="0"
                       Grid.Row="0"
                       Content = "------" 
                       FontSize="25"
                       Foreground="GhostWhite"
                       HorizontalContentAlignment="Center"
                       VerticalAlignment="Bottom"
                       FontFamily="Arial"
                       Width="Auto"/>

                <Label Name="lblTime"
                       Grid.Column="0"
                       Grid.Row="1"
                       Content = "-- : -- : --"
                       FontSize="25"
                       Foreground="GhostWhite"
                       HorizontalContentAlignment="Center"
                       VerticalAlignment="Top"
                       FontFamily="DS-Digital"
                       Width="Auto"/>
            </StackPanel>                
        </Canvas>
    </Viewbox>
</Grid>

Private Sub SystemTime_Tick(sender As Object, e As EventArgs) Handles tmrSystemTime.Tick
    lblTime.Content = Now.ToString("HH : mm : ss")
End Sub

字符串
所以我尝试了一种不同的方法，创建一个有10列和8个标签的网格，每个字符一个，并将标签拉伸到其父单元格。这将工作并将字符保持在固定位置。但是最后一列的宽度比其他列小...在这张图中，你可以看到我的意思，第二个紫色的列就是我的意思。Example alignment
代码：

<UserControl.Resources>
    <Style x:Key="LabelStyle" TargetType="Label">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontFamily" Value="DS-Digital" />
        <Setter Property="FontSize" Value="40"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Right"/>
        <Setter Property="Background" Value="Green" />
    </Style>
</UserControl.Resources>

<Grid HorizontalAlignment="Stretch">
    <Viewbox HorizontalAlignment="Stretch">
        <Canvas Name="canv" Height="300" Width="300" HorizontalAlignment="Stretch">
            <StackPanel Name="stckpnlDateTime" HorizontalAlignment="Stretch">                    
                <Label Name="lblDateOrText" 
                       Grid.Column="0"
                       Grid.Row="0"
                       Content = "" 
                       FontSize="25"
                       Foreground="GhostWhite"
                       HorizontalContentAlignment="Center"
                       VerticalAlignment="Bottom"
                       FontFamily="Arial"
                       Width="Auto"/>

                <Grid Name="GridTimeLabel" HorizontalAlignment="Stretch"  Width="Auto" Grid.Column="0" Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>

                    <Label Background="Purple" Grid.Column="0" Grid.Row="0"/>
                    <Label Name="lblTime1" Grid.Column="1" Grid.Row="0" Style="{StaticResource LabelStyle}" Content="-"/>
                    <Label Name="lblTime2" Grid.Column="2" Grid.Row="0" Style="{StaticResource LabelStyle}" Content="-"/>
                    <Label Name="lblTime3" Grid.Column="3" Grid.Row="0" Style="{StaticResource LabelStyle}" Content=":"/>
                    <Label Name="lblTime4" Grid.Column="4" Grid.Row="0" Style="{StaticResource LabelStyle}" Content="-"/>
                    <Label Name="lblTime5" Grid.Column="5" Grid.Row="0" Style="{StaticResource LabelStyle}" Content="-"/>
                    <Label Name="lblTime6" Grid.Column="6" Grid.Row="0" Style="{StaticResource LabelStyle}" Content=":"/>
                    <Label Name="lblTime7" Grid.Column="7" Grid.Row="0" Style="{StaticResource LabelStyle}" Content="-"/>
                    <Label Name="lblTime8" Grid.Column="8" Grid.Row="0" Style="{StaticResource LabelStyle}" Content="-"/>
                    <Label Background="Purple" Grid.Column="9" Grid.Row="0"/>
                </Grid>                 
            </StackPanel>                
        </Canvas>
    </Viewbox>
</Grid>

型
长话短说，我是stuk...希望有人能给我指出正确的方向

xaml

来源：https://stackoverflow.com/questions/37853552/wpf-centered-text-in-stretched-label-fixed-width

3条答案

按热度按时间

wi3ka0sx1#

我有两个方法。
第一种方法：更改为等宽字体，这将确保无论你在它扔什么时间值，宽度将是恒定的。但是你可能找不到一个好的/合适的字体使用这种方法，虽然。
第二种方法：如果你没有使用MVVM，试试这个（C#代码，我不太习惯VB.net）：

// Code-behind
public override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    var label = this.lblTime;
    label.Text = "00:00:00";
    label.Measure(); // Force it to measure
    label.Width = label.DesiredSize.Width;
}

字符串
这将强制宽度保持恒定。根据字体的不同，您需要手动设置占用最多空间的时间值。
此外，为了确保它正常工作，您可能需要将标签 Package 在网格中。使Grid有3列，在第1列（中间列）中设置标签，并将columndefinition的宽度依次设置为*、auto和*。

赞(0）回复(0）举报 2023-08-01

vxqlmq5t2#

“画布”的宽度为300。在我看来，可用的像素不到300像素。这就是为什么最后一列较小的原因。

赞(0）回复(0）举报 2023-08-01

7ajki6be3#

@Jai，谢谢你给我指了.Measure()潜艇的方向。在摆弄了一下之后，我最终选择了3列网格，用新内容测量标签的大小，设置标签的大小。这将导致“列”重新对齐，从而将标签保持在适当位置。
代码：（为测试创建了新的WPF程序，颜色是为了看孩子和父母之间的区别）

<Grid Background="Tomato">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Label Name="lblTime"
                   Grid.Column="1"
                   Grid.Row="0"
                   Content = "-- : -- : --"
                   FontSize="50"
                   Foreground="Black"
                   Background="Beige"
                   HorizontalContentAlignment="Left"
                   VerticalAlignment="Center"
                   FontFamily="DS-Digital"/>
</Grid>

字符串
它背后的代码：
类MainWindow

''' <summary>
''' Timer for updating the time Clock
''' </summary>
Dim WithEvents tmrSystemTime As New DispatcherTimer With {.Interval = TimeSpan.FromSeconds(1)} 'Set Timer interval on every second.

Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Add any initialization after the InitializeComponent() call.
    tmrSystemTime.Start()
End Sub

Private Sub SystemTime_Tick(sender As Object, e As EventArgs) Handles tmrSystemTime.Tick
    'Set the time in the label
    lblTime.Content = Now.ToString("HH : mm : ss")

    'Measure and set the size of the label
    MeasureSizeTimeLabel()
End Sub

''' <summary>
''' Measure the Max Size of the label with a specific Format
''' </summary>
Private Sub MeasureSizeTimeLabel()

    'Store the Max size of the Time Label in this variable
    Dim MaxClockSize As Size

    'Measure the Max size of the clock label and use this width
    'lblTime.Content = "00 : 00 : 00"
    lblTime.Measure(New Size(Double.PositiveInfinity, Double.PositiveInfinity))
    MaxClockSize = lblTime.DesiredSize

    'Now Set the size of the label
    lblTime.Width = MaxClockSize.Width
    lblTime.Height = MaxClockSize.Height
End Sub

型
感谢大家的帮助，感谢您的努力和时间！：—）

赞(0）回复(0）举报 2023-08-01

我来回答

XAML WPF居中文本在拉伸标签固定宽度

3条答案

相关问题

热门标签

最新问答