Útmutató: Átalakítások alkalmazása szövegre

Az átalakítások megváltoztathatják a szöveg megjelenítését az alkalmazásban. Az alábbi példák különböző megjelenítési átalakításokat használnak, amelyek befolyásolják a szöveg megjelenítését egy TextBlock vezérlőelemben.

példa

Az alábbi példa a kétdimenziós x-y sík egy adott pontjára elforgatott szöveget mutatja be.

Az alábbi példakód egy RotateTransform-t használ a szöveg elforgatásához. A 90-es Angle érték 90 fokkal elforgatja az elemet az óramutató járásával megegyező irányban.

<!-- Rotate the text 90 degrees using a RotateTransform. -->
<TextBlock FontFamily="Arial Black" FontSize="64" Foreground="Moccasin" Margin ="80, 10, 0, 0">
  Text Transforms
  <TextBlock.RenderTransform>
    <RotateTransform Angle="90" />
  </TextBlock.RenderTransform>
</TextBlock>

Az alábbi példa bemutatja, hogy a második szövegsor 150% mértékben van skálázva az x tengely mentén, míg a harmadik szövegsor 150% mértékben az y tengely mentén van skálázva.

Az alábbi példakód egy ScaleTransform-et használ a szöveg eredeti méretének méretezéséhez.

<!-- Scale the text using a ScaleTransform. -->
<TextBlock
  Name="textblockScaleMaster" 
  FontSize="32"
  Foreground="SteelBlue"
  Text="Scaled Text"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="1">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.5" ScaleY="1.0" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="2">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.0" ScaleY="1.5" />
  </TextBlock.RenderTransform>
</TextBlock>

Megjegyzés:

A szöveg méretezése nem azonos a szöveg betűméretének növelésével. A betűméretek egymástól függetlenül vannak kiszámítva, hogy a lehető legjobb felbontást biztosíthassák különböző méretekben. A skálázott szöveg viszont megőrzi az eredeti méretű szöveg arányát.

Az alábbi példa az x tengely mentén elferdített szöveget mutatja be.

Az alábbi példakód egy SkewTransform mintát használ a szöveg torzítására. A ferdeség, más néven nyíró olyan átalakítás, amely nem egységes módon feszíti ki a koordináta-teret. Ebben a példában a két szövegsor -30° és 30°-kal ferdén van eltolva az x-koordináta mentén.

<!-- Skew the text using a SkewTransform. -->
<TextBlock
  Name="textblockSkewMaster" 
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="Skewed Text"
  Margin="125, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="-30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="{Binding Path=Text, ElementName=textblockSkewMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="1">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>

Az alábbi példa az x és az y tengely mentén lefordított vagy áthelyezett szöveget mutatja be.

használatával

Az alábbi példakód, egy TranslateTransform-t használ a szöveg eltolására. Ebben a példában az elsődleges szöveg alatti szöveg kissé eltolt másolata árnyékeffektust hoz létre.

<!-- Skew the text using a TranslateTransform. -->
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Black"
  Text="{Binding Path=Text, ElementName=textblockTranslateMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <TranslateTransform X="2" Y="2" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  Name="textblockTranslateMaster" 
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Coral"
  Text="Translated Text"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0"/>

Megjegyzés:

A DropShadowBitmapEffect számos funkciót kínál az árnyékeffektusok biztosításához. További információ: Szöveg létrehozása árnyékkal.

Lásd még

• Animációk alkalmazása a szövegre