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

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

 
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.2、使用Snoop 监控MainBorder ，发现只有手动设置 最外层的  MainBorder 的 Height 属性才能修改整个控件的高度，而在超出MaxHeight ，则按MaxHeight 显示，小于MinHeight 则按 MinHeight显示

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

 
于是我们可以把  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、效果如下图：

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

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