2016-12-12 18 views
0

私は小さなwpfアプリケーションで作業しています。これは私の最初のwpfアプリケーション です。 2つのラベルを一緒に接着したいので、私はここに問題があります(下の画像を参照してください)。小さいモニターまたは大きなモニターでアプリを実行すると、お互いに離れすぎてしまいます。私はグリッドを作成した理由と、なぜスタックパネルを内部に置くのかという理由から、verticalalignment = 'center'をスタックパネルに適用してコンテンツを中心に置くなど、2つのラベルを貼り付ける方法WPF

私は WPFについて自分のスキルを向上させたいと思っていますので、コメントしてみてください。別の解決策を教えてもらえますか。

とにかく、私はこの2つのラボをいつも互いに近づけて、モニターの異なるサイズに常に集中させておくために、どのように接着することができますか?

ありがとうたくさんの男、 乾杯!

enter image description here

MY CODE:BEHIND

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

はCODE:

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"); 
     } 
    } 
+0

あなたがしたいですか時間ラベルは静的なサイズと位置ですか? つまり、画面の右側から同じフォントサイズ、同じ距離を使用しますか? –

答えて

0

あなたがテキストブロックにあなたのラベルを変更した場合、私はあなたが探しているものを取得すると思います。列の定義を変更する必要があります。

<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スリムにしたい場合は、これは同じ結果が得られます。 2つのスタックパネルを右上にロックします。

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

はい、私が達成したかったTextBlockに変更した後、残りのコードはどうですか? –

+0

多くのXAMLのように見えます。代わりに使用したいと思う代替案を追加しました – Bryan

0

オリエンテーションで他のStackPanelを追加し、このブロックを使用して第2の格子を交換= "横"

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

その他のソリューション:あなたは、実行に使用することができます

 <TextBlock Grid.Column="1"> 
       <TextBlock TextWrapping="Wrap" > 
         <Run x:Name="lblTimeText" /> 
         <Run x:Name="lblTime"/> 
        </TextBlock> 
      </TextBlock> 
関連する問題