TextBlockPage.xaml 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <UserControl x:Class="ControlCatalog.Pages.TextBlockPage"
  2. xmlns="https://github.com/avaloniaui"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  4. <StackPanel>
  5. <TextBlock Classes="h2">A control that can display text</TextBlock>
  6. <WrapPanel MaxWidth="680"
  7. Margin="-10,0"
  8. HorizontalAlignment="Center">
  9. <WrapPanel.Styles>
  10. <Style Selector="Border">
  11. <Setter Property="BorderThickness" Value="1" />
  12. <Setter Property="BorderBrush" Value="{DynamicResource CatalogBaseMediumColor}" />
  13. <Setter Property="Padding" Value="2" />
  14. <Setter Property="Margin" Value="10" />
  15. <Setter Property="Width" Value="200" />
  16. </Style>
  17. </WrapPanel.Styles>
  18. <Border>
  19. <StackPanel Spacing="8">
  20. <TextBlock Margin="0,0,10,0"
  21. Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  22. TextTrimming="CharacterEllipsis" />
  23. <TextBlock Margin="0,0,10,0"
  24. Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  25. TextTrimming="WordEllipsis" />
  26. <TextBlock Text="Left aligned text" TextAlignment="Left" />
  27. <TextBlock Text="Center aligned text" TextAlignment="Center" />
  28. <TextBlock Text="Right aligned text" TextAlignment="Right" />
  29. </StackPanel>
  30. </Border>
  31. <Border>
  32. <StackPanel Spacing="8">
  33. <TextBlock 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." TextWrapping="Wrap" />
  34. </StackPanel>
  35. </Border>
  36. <Border>
  37. <StackPanel Spacing="8">
  38. <TextBlock FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"
  39. FontStyle="Normal"
  40. FontWeight="Normal"
  41. Text="Custom font regular" />
  42. <TextBlock FontFamily="avares://ControlCatalog/Assets/Fonts#Source Sans Pro"
  43. FontStyle="Normal"
  44. FontWeight="Bold"
  45. Text="Custom font bold" />
  46. <TextBlock FontFamily="/Assets/Fonts/SourceSansPro-Italic.ttf#Source Sans Pro"
  47. FontStyle="Italic"
  48. FontWeight="Normal"
  49. Text="Custom font italic" />
  50. <TextBlock FontFamily="/Assets/Fonts/SourceSansPro-*.ttf#Source Sans Pro"
  51. FontStyle="Italic"
  52. FontWeight="Bold"
  53. Text="Custom font italic bold" />
  54. </StackPanel>
  55. </Border>
  56. <Border>
  57. <StackPanel Spacing="8">
  58. <TextBlock Text="Underline" TextDecorations="Underline" />
  59. <TextBlock Text="Strikethrough" TextDecorations="Strikethrough" />
  60. <TextBlock Text="Overline" TextDecorations="Overline" />
  61. <TextBlock Text="Baseline" TextDecorations="Baseline" />
  62. <TextBlock Text="Custom TextDecorations">
  63. <TextBlock.TextDecorations>
  64. <TextDecorationCollection>
  65. <TextDecoration Location="Overline"
  66. StrokeThickness="2"
  67. StrokeThicknessUnit="Pixel">
  68. <TextDecoration.Stroke>
  69. <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
  70. <LinearGradientBrush.GradientStops>
  71. <GradientStop Offset="0" Color="Red" />
  72. <GradientStop Offset="1" Color="Green" />
  73. </LinearGradientBrush.GradientStops>
  74. </LinearGradientBrush>
  75. </TextDecoration.Stroke>
  76. </TextDecoration>
  77. <TextDecoration Location="Strikethrough"
  78. StrokeThickness="1"
  79. StrokeThicknessUnit="Pixel">
  80. <TextDecoration.Stroke>
  81. <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
  82. <LinearGradientBrush.GradientStops>
  83. <GradientStop Offset="0" Color="Green" />
  84. <GradientStop Offset="1" Color="Blue" />
  85. </LinearGradientBrush.GradientStops>
  86. </LinearGradientBrush>
  87. </TextDecoration.Stroke>
  88. </TextDecoration>
  89. <TextDecoration Location="Underline"
  90. StrokeThickness="2"
  91. StrokeThicknessUnit="Pixel">
  92. <TextDecoration.Stroke>
  93. <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
  94. <LinearGradientBrush.GradientStops>
  95. <GradientStop Offset="0" Color="Blue" />
  96. <GradientStop Offset="1" Color="Red" />
  97. </LinearGradientBrush.GradientStops>
  98. </LinearGradientBrush>
  99. </TextDecoration.Stroke>
  100. </TextDecoration>
  101. </TextDecorationCollection>
  102. </TextBlock.TextDecorations>
  103. </TextBlock>
  104. </StackPanel>
  105. </Border>
  106. <Border>
  107. <StackPanel Spacing="8">
  108. <TextBlock Text="🏻 👌🏻" />
  109. <TextBlock Text="🏼 👌🏼" />
  110. <TextBlock Text="🏽 👌🏽" />
  111. <TextBlock Text="🏾 👌🏾" />
  112. <TextBlock Text="🏿 👌🏿" />
  113. </StackPanel>
  114. </Border>
  115. <Border>
  116. <StackPanel Spacing="8">
  117. <TextBlock Text="👪 👨‍👩‍👧 👨‍👩‍👧‍👦" />
  118. </StackPanel>
  119. </Border>
  120. <Border>
  121. <SelectableTextBlock Margin="10" TextWrapping="Wrap">
  122. This <Span FontWeight="Bold">is</Span> a
  123. <Span Background="Silver" Foreground="Maroon">TextBlock</Span>
  124. with <Span TextDecorations="Underline">several</Span>
  125. <Span FontStyle="Italic">Span</Span> elements,
  126. <Span Foreground="Blue">
  127. using a <Bold>variety</Bold> of <Italic>styles</Italic>
  128. </Span>.
  129. </SelectableTextBlock>
  130. </Border>
  131. </WrapPanel>
  132. </StackPanel>
  133. </UserControl>