Question

我正在研究小型wpf应用程序，我可以说这是我的第一个wpf应用程序从最开始。我在这里遇到问题，因为我想将两个标签粘在一起（见下图），因为当我在较小或较大的显示器上运行应用程序时，它们会相距太远，而我想做的就是将它们保持在一起时间和verticaly居中，这就是为什么我创建网格以及为什么我把堆栈面板放在里面，所以也许我可以将verticalalignment ='center'应用于堆栈面板并且内容将居中或者其他什么？

我不确定这段代码是否正常，所以请大家评论一下，我想提高我的技能 WPF，所以可以自由地告诉我另一个解决方案或其他什么，也许我写了太多的代码或smth？

无论如何，我怎么能把这两个实验室粘在一起，让它们一直保持在彼此附近，并且让它们始终在不同尺寸的显示器上居中。

非常感谢你们，干杯！

我的代码：

<Window x:Class="xTouchPOS.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen" WindowState="Maximized" WindowStyle="None">
    <Grid>
   <!-- Definition of my Grid which contains 2 columns and 3 rows. -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3.5*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" MinHeight="65"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="0.143*" />
        </Grid.RowDefinitions>
         <!-- Added this rectangle to colour header of my Grid. -->
        <Rectangle Grid.ColumnSpan="3">
            <Rectangle.Fill>
                <SolidColorBrush Color="#0091EA"></SolidColorBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!-- Added this grid and stackpanel inside this grid to place date and time, but how to glue them together text and value  -->
        <Grid Grid.Column="1" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Orientation="Vertical">
            <Label x:Name="lblTimeText"  Content="Time"  Margin="0,0,0,0"  FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
            <Label x:Name="lblTime" Content="labelTime" Grid.Column="0" Margin="0"  FontSize="18" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  />
        </StackPanel>

        <StackPanel Grid.Column="1" Orientation="Vertical">
            <Label Name="lblDateText" Content="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial" />
            <Label Name="lblDate"  Content="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  />
        </StackPanel>

        </Grid>
    </Grid>
</Window>

背后的代码：

 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            lblDate.Content = DateTime.Now.Date.ToString("MM/dd/yyyy");
            lblTime.Content = DateTime.Now.ToString("HH:mm:ss");
        }
    }

Answer 1

如果您将标签更改为TextBlocks，我认为您将获得所需内容。您需要更改列定义。

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <!-- Definition of my Grid which contains 2 columns and 3 rows. -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1.75*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" MinHeight="65"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="0.143*" />
        </Grid.RowDefinitions>
        <!-- Added this rectangle to colour header of my Grid. -->
        <Rectangle Grid.ColumnSpan="3">
            <Rectangle.Fill>
                <SolidColorBrush Color="#0091EA"></SolidColorBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!-- Added this grid and stackpanel inside this grid to place date and time, but how to glue them together text and value  -->
        <Grid Grid.Column="1" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Center">
                <TextBlock x:Name="lblTimeText"  Text="Time"  Margin="0,0,0,0"  FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
                <TextBlock x:Name="lblTime" Text="labelTime" Grid.Column="0" Margin="0"  FontSize="18" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  />
            </StackPanel>

            <StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Center">
                <TextBlock Name="lblDateText" Text="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial" />
                <TextBlock Name="lblDate"  Text="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  />
            </StackPanel>

        </Grid>
    </Grid>
</Window>

<强>替代如果你想减少你的XAML，这将得到相同的结果。它还会将两个堆栈面板锁定在右上角。用这个块替换你的第二个网格

 <DockPanel Grid.Row="0" Grid.ColumnSpan="2">      
            <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Right" DockPanel.Dock="Right" Margin="5,0">
                <TextBlock Name="lblDateText" Text="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial" />
                <TextBlock Name="lblDate"  Text="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  />
            </StackPanel>
            <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Right" DockPanel.Dock="Right" Margin="5,0">
                <TextBlock x:Name="lblTimeText"  Text="Time"  Margin="0,0,0,0"  FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
                <TextBlock x:Name="lblTime" Text="labelTime" Grid.Column="0" Margin="0"  FontSize="18" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  />
            </StackPanel>
        </DockPanel>

Answer 2

使用Orientation =＆＃34; Horizontal＆＃34;

添加其他stackPanel

<StackPanel Grid.Column="0" Orientation="Horizontal" >
     <StackPanel Orientation="Vertical">
        <Label x:Name="lblTimeText"  Content="Time"  Margin="0,0,0,0"  FontSize="15" Foreground="White" HorizontalAlignment="Left" FontFamily="Arial" VerticalAlignment="Bottom" />
        <Label x:Name="lblTime" Content="labelTime" Grid.Column="0" Margin="0"  FontSize="18" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  />
    </StackPanel>

    <StackPanel  Orientation="Vertical">
        <Label Name="lblDateText" Content="Date" Margin="0" FontSize="15" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial" />
        <Label Name="lblDate"  Content="labelaDate" Margin="0" FontSize="18" Foreground="White" HorizontalAlignment="Left"  FontFamily="Arial"  />
    </StackPanel>

其他解决方案：您可以使用run

        <TextBlock Grid.Column="1">
                 <TextBlock TextWrapping="Wrap" >
                      <Run x:Name="lblTimeText" />
                      <Run x:Name="lblTime"/>
                    </TextBlock>
            </TextBlock>

如何将2个标签粘合在一起WPF

2 个答案: