登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›WPF 实现支持动态调整高度的文本显示控件 ...

WPF 实现支持动态调整高度的文本显示控件

句惫 2025-8-15 20:12:33
1、需求：有个应用在做升级的时候，显示版本信息时候，宽度的一样的情况下，需要动态高度，即是有一个最小的高度，最大的高度，超出最大高度则显示滑动条显示。
如下图所所示：
1.png

 
2、明确需求后，开始动工：
　　2.1、创建一个Border，设置  MaxHeight="503" MinHeight="207"
  1. <Window x:Class="autoHeightControl.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:autoHeightControl"
  7.         mc:Ignorable="d"
  8.         Title="MainWindow" Height="450" Width="800">
  9.    
  11.     <Grid>
  12.         <Border
  13.                  Width="360"
  14.                  MaxHeight="503"
  15.                  MinHeight="207"
  16.                  Padding="30,10,30,20"
  17.                   Background="Gray"
  18.                   CornerRadius="10"
  19.                  x:Name="MainBorder"
  20.                  >
  22.             <Grid>
  23.                 <Grid.RowDefinitions>
  24.                     <RowDefinition Height="Auto" />
  25.                     <RowDefinition Height="Auto" />
  26.                     <RowDefinition Height="*"/>
  27.                     <RowDefinition Height="Auto" />
  28.                 </Grid.RowDefinitions>
  29.                 <TextBlock
  30.                           x:Name="ThemeTextBlock"
  31.                           Grid.Row="0"
  32.                           Margin="0,20,0,0"
  33.                           HorizontalAlignment="Left"
  34.                           FontSize="20"
  35.                           FontWeight="Bold"
  36.                           Text="发现新版本!" />
  37.                
  38.                 <Grid Grid.Row="1">
  39.                     <TextBlock  Text="新版本信息" TextWrapping="WrapWithOverflow" Margin="0 16 0 8"   FontSize="16"
  40.                 FontWeight="SemiBold"></TextBlock>
  41.                 </Grid>
  43.                
  44.           <strong>      <Grid Grid.Row="2">
  45.                     <ScrollViewer x:Name="Viewer"
  46.              Margin="0,10"
  47.              CanContentScroll="False"
  48.              HorizontalScrollBarVisibility="Disabled"
  49.              VerticalScrollBarVisibility="Auto"
  50.              PanningMode="VerticalOnly">
  51.                        
  52.                         <TextBlock x:Name="textContentBlock"  TextWrapping="Wrap" Margin="0,0,10,10" FontSize="14"
  53.                                 Text="发哈尽快老师的发发哈扣篮大赛好发的发哈尽" />
  54.                     </ScrollViewer>
  55.                 </Grid></strong>
  56. <br><br><br>
  57.                
  58.                 <Grid Grid.Row="3">
  59.                     <StackPanel
  60.          Margin="0,10,0,0"
  61.          HorizontalAlignment="Right"
  62.          VerticalAlignment="Center"
  63.          Orientation="Horizontal">
  64.                         <Button
  65.                                  HorizontalAlignment="Left"
  66.              Background="#E7E7E7"
  67.              Content="稍后再说"
  68.              Foreground="#000000"
  69.                          />
  70.                         <Button
  71.              Margin="10,0"
  72.              HorizontalAlignment="Right"
  73.              Background="#0052D9"
  74.              Content="立即升级"
  75.              Foreground="#ffffff"/>
  76.                     </StackPanel>
  77.                 </Grid>
  78.             </Grid>
  79.         </Border>
  80.     </Grid>
  81. </Window>
复制代码
发现整个控件的高度，不会随着  textContentBlock 的内容大小自动适应高度，而是以最大的高度：503px 显示，如下图所示：
2.png

 　　2.2、使用Snoop 监控MainBorder ，发现只有手动设置 最外层的  MainBorder 的 Height 属性才能修改整个控件的高度，而在超出MaxHeight ，则按MaxHeight 显示，小于MinHeight 则按 MinHeight显示
3.gif

 
　　2.3、这样思路就转移到如何动态设置 MainBorder  的高度了。
由于 textContentBlock 外层套了一层 ScrollViewer，我们可以使用 ScrollViewer的 ExtentHeight 动态获取文本的高度
4.gif

 
于是我们可以把  MainBorder 的高度 Height 与 ScrollViewer 的 ExtentHeight  关联起来
 
 
3、解决方法
　　3.1、新增一个 高度转换器
  1. public class HeightToHeightConverter : IValueConverter
  2. {
  3.      public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  4.      {
  5.          return (double)value + 207;
  6.      }
  8.      public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  9.      {
  10.          throw new NotImplementedException();
  11.      }
  12. }
复制代码
 
　　3.2、Mainborder 的高度增加与ScrollViewer 的 ExtentHeight 的绑定
  1. <Window x:Class="autoHeightControl.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:autoHeightControl"
  7.         mc:Ignorable="d"
  8.         Title="MainWindow" Height="450" Width="800">
  9.    
  10.    <Window.Resources>
  11.         <local:HeightToHeightConverter x:Key="HeightToHeightConverter"></local:HeightToHeightConverter>
  12.     </Window.Resources>
  16.     <Grid>
  17.         <Border
  18.                  Width="360"
  19.                  MaxHeight="503"
  20.                  MinHeight="207"<strong>
  21.                  Height="{Binding ElementName=Viewer,Path=ExtentHeight,Converter={StaticResource HeightToHeightConverter}}"</strong>
  22.                     Padding="30,10,30,20"
  23.                   Background="Gray"
  24.                   CornerRadius="10"
  25.                  x:Name="MainBorder"
  26.                  >
  28.             <Grid>
  29.                 <Grid.RowDefinitions>
  30.                     <RowDefinition Height="Auto" />
  31.                     <RowDefinition Height="Auto" />
  32.                     <RowDefinition Height="*"/>
  33.                     <RowDefinition Height="Auto" />
  34.                 </Grid.RowDefinitions>
  35.                 <TextBlock
  36.                           x:Name="ThemeTextBlock"
  37.                           Grid.Row="0"
  38.                           Margin="0,20,0,0"
  39.                           HorizontalAlignment="Left"
  40.                           FontSize="20"
  41.                           FontWeight="Bold"
  42.                           Text="发现新版本!" />
  43.                
  44.                 <Grid Grid.Row="1">
  45.                     <TextBlock  Text="新版本信息" TextWrapping="WrapWithOverflow" Margin="0 16 0 8"   FontSize="16"
  46.                 FontWeight="SemiBold"></TextBlock>
  47.                 </Grid>
  49.                
  50.                 <Grid Grid.Row="2" Background="Red">
  52.                   
  53.                     <ScrollViewer x:Name="Viewer"
  54.                                   Margin="0,10"
  55.                                   CanContentScroll="False"
  56.                                   HorizontalScrollBarVisibility="Disabled"
  57.                                   VerticalScrollBarVisibility="Auto"
  58.                                   PanningMode="VerticalOnly">
  59.                         <TextBlock x:Name="textBlock"  TextWrapping="Wrap" Margin="0,0,10,10" FontSize="14"
  60.                                    Text="快老师的发发哈扣篮大赛好发的发哈尽哈扣篮大赛好发的发哈尽发哈尽快老师的发发哈扣篮大赛好发的发哈尽哈哈扣篮大赛好发的发哈尽发哈尽快老师的发发哈扣篮大赛好发的发哈尽哈扣篮大赛好发的发哈尽发哈尽快老师的发发哈扣篮大赛好发的发哈尽扣篮大赛好发的发哈尽快老师的发发哈扣篮大赛好发的发哈尽哈扣篮大赛好发的发哈尽发哈尽快老师的发发哈扣篮大赛好发的发哈尽哈哈扣篮大赛好发的发哈尽发哈尽快老师的发发哈扣篮大赛好发的发哈尽哈扣篮大赛好发的发哈尽发哈尽快老师的发发哈扣篮大赛好发的发哈尽扣篮大赛好发的发哈尽" />
  62.                     </ScrollViewer>
  63.                 </Grid>
  65.                
  67.                 <Grid Grid.Row="3">
  68.                     <StackPanel
  69.          Margin="0,10,0,0"
  70.          HorizontalAlignment="Right"
  71.          VerticalAlignment="Center"
  72.          Orientation="Horizontal">
  73.                         <Button
  74.                                  HorizontalAlignment="Left"
  75.              Background="#E7E7E7"
  76.              Content="稍后再说"
  77.              Foreground="#000000"
  78.                          />
  80.                         <Button
  81.              Margin="10,0"
  82.              HorizontalAlignment="Right"
  83.              Background="#0052D9"
  84.              Content="立即升级"
  85.              Foreground="#ffffff"/>
  86.                     </StackPanel>
  87.                 </Grid>
  88.             </Grid>
  89.         </Border>
  90.     </Grid>
  91. </Window>
复制代码
　　3.3、效果如下图：
5.gif

 
参考资料：
ScrollViewer.ExtentHeight 属性 (System.Windows.Controls) | Microsoft Learn
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
句惫
2025-8-15 20:12:33

0

粉丝关注

16

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫