1
0

TextBlockPage.xaml 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <UserControl xmlns="https://github.com/avaloniaui"
  2. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3. x:Class="ControlCatalog.Pages.TextBlockPage">
  4. <StackPanel>
  5. <TextBlock Classes="h1">TextBlock</TextBlock>
  6. <TextBlock Classes="h2">A control that can display text</TextBlock>
  7. <StackPanel
  8. Orientation="Horizontal"
  9. Spacing="16"
  10. HorizontalAlignment="Center"
  11. Margin="0,16,0,0">
  12. <StackPanel.Styles>
  13. <Style Selector="Border">
  14. <Setter Property="BorderThickness" Value="1"/>
  15. <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
  16. <Setter Property="Padding" Value="2"/>
  17. </Style>
  18. </StackPanel.Styles>
  19. <Border>
  20. <StackPanel Width="200" Spacing="8">
  21. <TextBlock TextTrimming="CharacterEllipsis" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/>
  22. <TextBlock TextTrimming="WordEllipsis" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/>
  23. <TextBlock Text="Left aligned text" TextAlignment="Left" />
  24. <TextBlock Text="Center aligned text" TextAlignment="Center" />
  25. <TextBlock Text="Right aligned text" TextAlignment="Right" />
  26. </StackPanel>
  27. </Border>
  28. <Border>
  29. <StackPanel Width="200" Spacing="8">
  30. <TextBlock
  31. TextWrapping="Wrap"
  32. Text="Multiline TextBlock with TextWrapping.&#xD;&#xD;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est." />
  33. </StackPanel>
  34. </Border>
  35. <Border>
  36. <StackPanel Width="200" Spacing="8">
  37. <TextBlock Text="Custom font regular" FontWeight="Normal" FontStyle="Normal" FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"/>
  38. <TextBlock Text="Custom font bold" FontWeight="Bold" FontStyle="Normal" FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"/>
  39. <TextBlock Text="Custom font italic" FontWeight="Normal" FontStyle="Italic" FontFamily="/Assets/Fonts/SourceSansPro-Italic.ttf#Source Sans Pro"/>
  40. <TextBlock Text="Custom font italic bold" FontWeight="Bold" FontStyle="Italic" FontFamily="/Assets/Fonts/SourceSansPro-*.ttf#Source Sans Pro"/>
  41. </StackPanel>
  42. </Border>
  43. </StackPanel>
  44. <StackPanel
  45. Orientation="Horizontal"
  46. Spacing="16"
  47. HorizontalAlignment="Center"
  48. Margin="0,16,0,0">
  49. <StackPanel.Styles>
  50. <Style Selector="Border">
  51. <Setter Property="BorderThickness" Value="1"/>
  52. <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}"/>
  53. <Setter Property="Padding" Value="2"/>
  54. </Style>
  55. </StackPanel.Styles>
  56. <Border>
  57. <StackPanel Width="200" Spacing="8">
  58. <TextBlock TextDecorations="Underline" Text="Underline"/>
  59. <TextBlock TextDecorations="Strikethrough" Text="Strikethrough"/>
  60. <TextBlock TextDecorations="Overline" Text="Overline" />
  61. <TextBlock TextDecorations="Baseline" Text="Baseline"/>
  62. <TextBlock Text="Custom TextDecorations">
  63. <TextBlock.TextDecorations>
  64. <TextDecorationCollection>
  65. <TextDecoration
  66. Location="Overline"
  67. PenThicknessUnit="Pixel">
  68. <TextDecoration.Pen>
  69. <Pen Thickness="2">
  70. <Pen.Brush>
  71. <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
  72. <LinearGradientBrush.GradientStops>
  73. <GradientStop Offset="0" Color="Red"/>
  74. <GradientStop Offset="1" Color="Green"/>
  75. </LinearGradientBrush.GradientStops>
  76. </LinearGradientBrush>
  77. </Pen.Brush>
  78. </Pen>
  79. </TextDecoration.Pen>
  80. </TextDecoration>
  81. <TextDecoration
  82. Location="Strikethrough"
  83. PenThicknessUnit="Pixel">
  84. <TextDecoration.Pen>
  85. <Pen Thickness="1">
  86. <Pen.Brush>
  87. <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
  88. <LinearGradientBrush.GradientStops>
  89. <GradientStop Offset="0" Color="Green"/>
  90. <GradientStop Offset="1" Color="Blue"/>
  91. </LinearGradientBrush.GradientStops>
  92. </LinearGradientBrush>
  93. </Pen.Brush>
  94. </Pen>
  95. </TextDecoration.Pen>
  96. </TextDecoration>
  97. <TextDecoration
  98. Location="Underline"
  99. PenThicknessUnit="Pixel">
  100. <TextDecoration.Pen>
  101. <Pen Thickness="2">
  102. <Pen.Brush>
  103. <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
  104. <LinearGradientBrush.GradientStops>
  105. <GradientStop Offset="0" Color="Blue"/>
  106. <GradientStop Offset="1" Color="Red"/>
  107. </LinearGradientBrush.GradientStops>
  108. </LinearGradientBrush>
  109. </Pen.Brush>
  110. </Pen>
  111. </TextDecoration.Pen>
  112. </TextDecoration>
  113. </TextDecorationCollection>
  114. </TextBlock.TextDecorations>
  115. </TextBlock>
  116. </StackPanel>
  117. </Border>
  118. <Border>
  119. <StackPanel Width="200" Spacing="8">
  120. <TextBlock Text="🏻 👌🏻"/>
  121. <TextBlock Text="🏼 👌🏼" />
  122. <TextBlock Text="🏽 👌🏽"/>
  123. <TextBlock Text="🏾 👌🏾"/>
  124. <TextBlock Text="🏿 👌🏿"/>
  125. </StackPanel>
  126. </Border>
  127. <Border>
  128. <StackPanel Width="200" Spacing="8">
  129. <TextBlock Text="👪 👨‍👩‍👧 👨‍👩‍👧‍👦"/>
  130. </StackPanel>
  131. </Border>
  132. </StackPanel>
  133. </StackPanel>
  134. </UserControl>