显示非矩形 TextBlock

发布于 2024-12-01 11:22:28 字数 344 浏览 2 评论 0原文

我想在三角形区域中显示文本。但我不知道如何更改 TextBlock 的形状，以便文本显示在三角形区域而不是常规矩形区域中。

这是我的 UserControl 的简化代码：

<Grid >
    <Image Height="100" Width="100" />   <!-- Some triangular image -->
    <TextBlock Height="100" Width="100" Text="This text should fill up the triangualr image area"/>
</Grid>

原文

I want to display text in a triangular area. But I cannot figure out how to change the shape of the TextBlock so that text is displayed in triangular region instead of the regular rectangular region.

Here is the simplified code of my UserControl:

<Grid >
    <Image Height="100" Width="100" />   <!-- Some triangular image -->
    <TextBlock Height="100" Width="100" Text="This text should fill up the triangualr image area"/>
</Grid>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

み青杉依旧 2024-12-08 11:22:28

这是一种过度杀伤的解决方案，但如果遵循类似的方法，内部网格的内容将按三角形排列：

 <Grid>
   <Image Height="200" Width="200" />
   <Grid Width="200">
        <Grid.RowDefinitions>
             <RowDefinition />
             <RowDefinition />
             <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
             <ColumnDefinition />
             <ColumnDefinition />
             <ColumnDefinition />
             <ColumnDefinition />
             <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="1" Text="Line 1" HorizontalAlignment="Center"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="This is Line 2." HorizontalAlignment="Center"/>
        <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" Text="This is Line 3. Wud be longest." HorizontalAlignment="Center"/>
   </Grid>
 </Grid>

供您参考，网格的构造如下：

参考图像

设置背景三角形图像&我想这就足够了。

Well kind of an overkill solution but the contents of the inner grid will be triangular in arrangement if something similar is followed:

 <Grid>
   <Image Height="200" Width="200" />
   <Grid Width="200">
        <Grid.RowDefinitions>
             <RowDefinition />
             <RowDefinition />
             <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
             <ColumnDefinition />
             <ColumnDefinition />
             <ColumnDefinition />
             <ColumnDefinition />
             <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="1" Text="Line 1" HorizontalAlignment="Center"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="This is Line 2." HorizontalAlignment="Center"/>
        <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" Text="This is Line 3. Wud be longest." HorizontalAlignment="Center"/>
   </Grid>
 </Grid>

For your reference, The grid is constructed as follows :

Refrence image

Set the background triangular image & I suppose that suffices.

回复收藏 0 原文

一身仙ぐ女味 2024-12-08 11:22:28

您需要覆盖文本框的模板

我建议获取 Blend 的副本，提取从那里获取文本框的模板，并修改它以满足您的需要。

如果您无法获得 Blend，我建议您向我展示模板，这是一个 WPF 工具，显示大多数 WPF 控件的默认模板

回复收藏 0 原文

南烟 2024-12-08 11:22:28

只需像这样覆盖文本框的模板，

<ControlTemplate TargetType="Textbox">
    <Path ... define your triangle here>               
</ControlTemplate>

然后将文本框的 Enter 属性设置为 true 即可。也对齐续。霍。和垂直。代数。这样它就位于三角形的中间。确保使文本框背景透明，这样它就不会覆盖三角形边界。

另外，如果您不想超出范围，请将内容演示器放在视图框中。

您还可以查看 Clip 属性。

Just overwrite the template of the textbox, like this

<ControlTemplate TargetType="Textbox">
    <Path ... define your triangle here>               
</ControlTemplate>

and then set the enter property on the textbox to true. also align cont. hor. and vert. alg. that way it is centered in the middle of the triangle. make sure you make the textbox background transparent so it doesn't overwrite the triangle bounds.

also if you don't want to go outside the bounds, put the content presenter inside a viewbox.

you can also look into the clip property.

回复收藏 0 原文

~没有更多了~