TextBlock を回転させて、Margin でレイアウトする

  • Article

元ネタ。

https://ch3cooh.hatenablog.jp/entry/20130719/1374161266

説明は後にして、とりあえずこれでできそう。

ただ、実は完全な可変長になっていないので気になるところ。

<Grid Background="Red" HorizontalAlignment="Right"
        VerticalAlignment="Center" Margin="0,0,20,0"
        RenderTransformOrigin="0.5,0.5"
        Width="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"
        >
    <Grid.RenderTransform>
        <CompositeTransform Rotation="270" />
    </Grid.RenderTransform>    
         <TextBlock x:Name="textBlock" Foreground="White"
             FontSize="24"
            Text="ここには可変長のテキストが入る" Margin="-300,0"
                    HorizontalAlignment="Center" />   
< /Grid>

テキストを回転させて、Margin で配置する場合、

  1. TextBlock のサイズをベースにMarginで配置
  2. TextBlock を回転

となるため、思ったように配置ができない。TextBlock のサイズをベースに配置するのでその間に1つコンテナを置く。それがGrid。これを回転する。

<Grid Background="Red" HorizontalAlignment="Right"

90度(270度）回転しても大丈夫なように正方形にする。幅に合わせた正方形を書く方法と、高さに合わせてた正方形を書く方法がある。これは高さに合わせた小さい正方形を書く方法。

image

ちなみに、この正方形を作るのに、Grid自身の幅を高さにバインドしている。こうすると中のコンテンツとバインドしなくていいので自由度が増す。

Width="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Mode=Self}}"

ただ、小さいGridに大きなテキストを書くとはみ出した分を描画してくれない。

image

そこで、十分なMarginをTextBlockに設定する。Margin="-300,0" こうするとそのMargin分は描画してくれる。

image

Marginを設定するというのは微妙だがまぁ、大きい値にしてもそれほど悪さはしないから良いかと。