WPF/XAML同じ長さのテキストを保持しながら異なる長さのテキストを含む2つのラベルのレイアウトフォントスケーリング

Question

私は2つのラベルを配置しています。

ラベル1枚のラベル2

各ラベルの内容は常に異なるものになる、最も頻繁に2以上の文字を持っていますラベルが、私は、ウィンドウのサイズが変更されるように、コンテンツが拡大したいと私はラベルのフォントサイズをしたいです1とラベル2は一貫性を保ちます。

長すぎると、ラベル2の内容が切り取られても問題ありません。私は2つの列を持つグリッドを使用してみましたし、ViewBoxを内側にラベルを配置した

：これで

<Viewbox Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"> 
    <Label Margin="0,0,0,0" Content="{Binding Path=Suburb}"/> 
</Viewbox> 

問題は、位置が右になることはありませんされ、フォントサイズが一貫していません。

これを達成するための最適なレイアウト方法は何ですか？バインドでフォントサイズを同期できますか？私はLabel 2のFontSizeプロパティをLabel 1のFontSizeにバインドしようとしましたが、実際にフォントがどれくらい大きくても小さくても毎回12を返すので動作しません（実際のFontSizeは計算されていないと仮定していますラベルはViewBox内にあります）。

提案がありますか？

おかげ

Answer 1

以下のようTextBlockを使用しませんどんなサイズにしてもそれをスケールすることができます。 2番目のTextBlockにはMaxWidthを指定できます。サイズはピクセル単位で制限されます。

DockPanelの代わりに、ColumnDefinitionsと異なるGridを使用しても同じ効果を得ることができます。

重要なことは、それらがすべて同じであることです。Viewbox（結果として、FontSizeは同期されませんが、それに含まれるすべてのビジュアルスケーリングが実行されます）。

Answer 2

次のマークアップはOKのようだ：

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Viewbox> 
     <Label Content="Label 1" Width="{Binding ActualWidth, ElementName=label2}"/> 
    </Viewbox> 
    <Viewbox Grid.Column="1"> 
     <Label Name="label2" Content="Label 2 Label 2 Label 2"/> 
    </Viewbox> 
</Grid> 

Answer 3

イム「ウィンドウのサイズが変更とコンテンツの規模」と「フォントサイズが一貫して」何の100％確実ではないactuall手段が、私は利用可能なスペースに応じてトリミングする各ラベルをしたいと思います。第二の標識がViewboxので、トリミングしない飽きないだろうと

<Viewbox VerticalAlignment="Top"> 
    <DockPanel> 
    <TextBlock Text="Second" DockPanel.Dock="Right" /> 
    <TextBlock Text="First" /> 
    </DockPanel> 
</Viewbox> 

注コンテンツをレンダリングすることが可能になる：

、なぜあなたは、次のアプローチを使用することができます

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 
    <TextBlock Text="{Binding Path=Suburb}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Margin="0,0,5,0" /> 
    <TextBlock Text="{Binding Path=Area}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Grid.Column="1"/> 
</Grid> 

Answer 4

この質問は古いですが、これを行うより正確な方法の1つは、の実行を使用することです。

実行は、TextBlock内のテキストのセクションです。

<TextBlock Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"> 
    <Run Text="{Binding Suburb}" /> 
    <Run Text="{Binding Area}" /> 
</TextBlock> 

あなたは、間に隙間なく背中合わせに2つのランを持っていると思った場合、あなたはこのような何かをするだろうので、TextBlockの中のすべてが空白に敏感であることに注意してください：

<TextBlock Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"> 
    <Run Text="Foo" /><Run Text="bar" /> 
    <!-- Prints 'Foobar' --> 
</TextBlock> 

を

HTMLと同じように、タグ間に空白があると、その要素の間にページ上に1つのスペースが表示されます。このルールは、の内のTextBlockにのみ適用され、XAMLページ全体には適用されません。