- A+
所属分类：.NET技术
WPF中的控件不再具有固定的形象，仅仅是算法内容或数据内容的载体，你可以把控件看成为一组操作穿上了一套衣服，换一个控件就相当于换另外一套衣服。本文主要用WPF的控件模板自定义一个温度计，简述WPF的控件模板的用法，仅供学习分享使用，如有不足之处，还请指正。
模板分类
WPF引入模板，将数据和算法的内容与形式解耦，模板主要分为两大类：
- 控件模板：是算法内容的体现形式，一个控件怎样组织内部结构才能更符合业务逻辑，让用户操作起来更舒服，控件模板决定了控件“长成什么样子”。
- 数据模板：是数据内容的表现形式，一条数据显示成什么样子，是简单的文本，还是直观的图表，由数据模板决定。
示例截图
本例主要用过ProgressBar控件，设计成温度计的样式，如下所示：
示例步骤
- 创建控件模板副本，生成样式资源
- 修改默认资源样式，添加对应内容。
- 绑定数据到文本框
关于如何创建模板副本，可参考前面相关文章。
示例源码
1. 窗口布局
本例使用了两个进度条，分别展示不同样式的温度计，UI代码如下所示：
1 <Grid> 2 <Grid.RowDefinitions> 3 <RowDefinition Height="*"></RowDefinition> 4 <RowDefinition Height="Auto"></RowDefinition> 5 </Grid.RowDefinitions> 6 <Grid.ColumnDefinitions> 7 <ColumnDefinition Width="*"></ColumnDefinition> 8 <ColumnDefinition Width="Auto" MinWidth="80"></ColumnDefinition> 9 <ColumnDefinition Width="*"></ColumnDefinition> 10 <ColumnDefinition Width="Auto" MinWidth="80"></ColumnDefinition> 11 </Grid.ColumnDefinitions> 12 <ProgressBar x:Name="temp" HorizontalAlignment="Right" Grid.Column="0" IsIndeterminate="False" Orientation="Vertical" Background="LightGreen" Foreground="LightPink" Margin="5" VerticalAlignment="Bottom" Maximum="350" Minimum="0" Value="150" Width="100" Height="350" Style="{DynamicResource ProgressBarStyle1}" /> 13 <StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Center"> 14 <TextBlock Text="最小值" Margin="3" Padding="3"></TextBlock> 15 <TextBox Text="{Binding ElementName=temp ,Path= Minimum,StringFormat={}{0}°C}" Width="50" Margin="3" Padding="3"></TextBox> 16 <TextBlock Text="最大值" Margin="3" Padding="3"></TextBlock> 17 <TextBox Text="{Binding ElementName=temp ,Path= Maximum,StringFormat={}{0}°C}" Width="50" Margin="3" Padding="3"></TextBox> 18 <TextBlock Text="当前值" Margin="3" Padding="3"></TextBlock> 19 <TextBox Text="{Binding ElementName=temp ,Path= Value,StringFormat={}{0}°C}" Width="50" Margin="3" Padding="3"></TextBox> 20 </StackPanel> 21 22 <ProgressBar Grid.Row="0" Grid.Column="2" x:Name="temp1" HorizontalAlignment="Right" IsIndeterminate="False" Orientation="Vertical" Background="LightCoral" Foreground="Goldenrod" Margin="5" VerticalAlignment="Bottom" Maximum="350" Minimum="0" Value="180" Width="100" Height="350" Style="{DynamicResource ProgressBarStyle1}" /> 23 <StackPanel Grid.Row="0" Grid.Column="3" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Center"> 24 <TextBlock Text="最小值" Margin="3" Padding="3"></TextBlock> 25 <TextBox Text="{Binding ElementName=temp1 ,Path= Minimum,StringFormat={}{0}°C}" Width="50" Margin="3" Padding="3"></TextBox> 26 <TextBlock Text="最大值" Margin="3" Padding="3"></TextBlock> 27 <TextBox Text="{Binding ElementName=temp1 ,Path= Maximum,StringFormat={}{0}°C}" Width="50" Margin="3" Padding="3"></TextBox> 28 <TextBlock Text="当前值" Margin="3" Padding="3"></TextBlock> 29 <TextBox Text="{Binding ElementName=temp1 ,Path= Value,StringFormat={}{0}°C}" Width="50" Margin="3" Padding="3"></TextBox> 30 </StackPanel> 31 <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" Text="WPF自定义温度计" HorizontalAlignment="Center" FontSize="30" Foreground="LightBlue"></TextBlock> 32 </Grid>
注意：默认情况下，进度条是水平方向的，本例为了模拟温度计，需要设置成垂直方向。
2. 模板样式
ControlTemplate，主要用于设置模板，其中默认生成模板中定义x:Name的内容不可以删除，否则会报错【如：x:Name="TemplateRoot"，x:Name="PART_Indicator"等】。具体如下所示：
1 <Window.Resources> 2 <local:WidthToMarginConvert x:Key="WidthToMargin" rate="3"/> 3 <local:TempToStringConvert x:Key="tempformat"></local:TempToStringConvert> 4 <SolidColorBrush x:Key="ProgressBar.Progress" Color="#FF06B025"/> 5 <SolidColorBrush x:Key="ProgressBar.Background" Color="#FFE6E6E6"/> 6 <SolidColorBrush x:Key="ProgressBar.Border" Color="#FFBCBCBC"/> 7 <Style x:Key="ProgressBarStyle1" TargetType="{x:Type ProgressBar}"> 8 <Setter Property="Foreground" Value="{StaticResource ProgressBar.Progress}"/> 9 <Setter Property="Background" Value="{StaticResource ProgressBar.Background}"/> 10 <Setter Property="BorderBrush" Value="{StaticResource ProgressBar.Border}"/> 11 <Setter Property="BorderThickness" Value="1"/> 12 <Setter Property="Template"> 13 <Setter.Value> 14 <ControlTemplate TargetType="{x:Type ProgressBar}"> 15 <Grid x:Name="TemplateRoot"> 16 17 <VisualStateManager.VisualStateGroups> 18 <VisualStateGroup x:Name="CommonStates"> 19 <VisualState x:Name="Determinate"/> 20 <VisualState x:Name="Indeterminate"> 21 <Storyboard RepeatBehavior="Forever"> 22 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Animation"> 23 <EasingDoubleKeyFrame KeyTime="0" Value="0.25"/> 24 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25"/> 25 <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.25"/> 26 </DoubleAnimationUsingKeyFrames> 27 <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="Animation"> 28 <EasingPointKeyFrame KeyTime="0" Value="-0.5,0.5"/> 29 <EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/> 30 <EasingPointKeyFrame KeyTime="0:0:2" Value="1.5,0.5"/> 31 </PointAnimationUsingKeyFrames> 32 </Storyboard> 33 </VisualState> 34 </VisualStateGroup> 35 </VisualStateManager.VisualStateGroups> 36 <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0 50 50 0"/> 37 <Border Background="AliceBlue" Width="280" Height="30" CornerRadius="0 15 15 0"></Border> 38 <Rectangle x:Name="PART_Track"/> 39 <Grid x:Name="PART_Indicator" ClipToBounds="true" HorizontalAlignment="Left" Margin="38 0 0 0" Height="6"> 40 41 <Rectangle x:Name="Indicator" Fill="Black" Opacity="0.8" /> 42 <Rectangle x:Name="Animation" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5"> 43 <Rectangle.RenderTransform> 44 <TransformGroup> 45 <ScaleTransform/> 46 <SkewTransform/> 47 <RotateTransform/> 48 <TranslateTransform/> 49 </TransformGroup> 50 </Rectangle.RenderTransform> 51 </Rectangle> 52 53 </Grid> 54 55 56 <Ellipse Width="40" HorizontalAlignment="Left" Margin="0 0 0 0" Height="40" Fill="{TemplateBinding Foreground}" ></Ellipse> 57 <Ellipse Width="10" HorizontalAlignment="Left" Margin="15 0 0 0" Height="10" Fill="White" ></Ellipse> 58 <TextBlock Text="{TemplateBinding Value, Converter={StaticResource tempformat}}" Foreground="Black" Width="40" Height="20" Padding="3" Margin="{TemplateBinding Value, Converter={StaticResource WidthToMargin}}" > 59 60 <TextBlock.RenderTransform> 61 <RotateTransform Angle="90"></RotateTransform> 62 </TextBlock.RenderTransform> 63 </TextBlock> 64 <Canvas x:Name="tick" > 65 <Path Canvas.Left="0" Canvas.Top="0" Stroke="Black" Data="M40 0 L40 5 M50 0 L50 5 M60 0 L60 5 M70 0 L70 5 M80 0 L80 5 M90 0 L90 5 M100 0 L100 5"></Path> 66 <Path Canvas.Left="0" Canvas.Top="0" Stroke="Black" Data="M110 0 L110 5 M120 0 L120 5 M130 0 L130 5 M140 0 L140 5 M150 0 L150 5 M160 0 L160 5 M170 0 L170 5 M180 0 L180 5 M190 0 L190 5 M200 0 L200 5"></Path> 67 <Path Canvas.Left="0" Canvas.Top="0" Stroke="Black" Data="M210 0 L210 5 M220 0 L220 5 M230 0 L230 5 M240 0 L240 5 M250 0 L250 5 M260 0 L260 5 M270 0 L270 5 M280 0 L280 5 M290 0 L290 5 M300 0 L300 5 "></Path> 68 69 70 <Path Canvas.Left="0" Canvas.Bottom="0" Stroke="Black" Data="M40 0 L40 5 M50 0 L50 5 M60 0 L60 5 M70 0 L70 5 M80 0 L80 5 M90 0 L90 5 M100 0 L100 5"></Path> 71 <Path Canvas.Left="0" Canvas.Bottom="0" Stroke="Black" Data="M110 0 L110 5 M120 0 L120 5 M130 0 L130 5 M140 0 L140 5 M150 0 L150 5 M160 0 L160 5 M170 0 L170 5 M180 0 L180 5 M190 0 L190 5 M200 0 L200 5"></Path> 72 <Path Canvas.Left="0" Canvas.Bottom="0" Stroke="Black" Data="M210 0 L210 5 M220 0 L220 5 M230 0 L230 5 M240 0 L240 5 M250 0 L250 5 M260 0 L260 5 M270 0 L270 5 M280 0 L280 5 M290 0 L290 5 M300 0 L300 5 "></Path> 73 74 75 </Canvas> 76 </Grid> 77 <ControlTemplate.Triggers> 78 <Trigger Property="Orientation" Value="Vertical"> 79 <Setter Property="LayoutTransform" TargetName="TemplateRoot"> 80 <Setter.Value> 81 <RotateTransform Angle="-90"/> 82 </Setter.Value> 83 </Setter> 84 </Trigger> 85 <Trigger Property="IsIndeterminate" Value="true"> 86 <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/> 87 </Trigger> 88 </ControlTemplate.Triggers> 89 </ControlTemplate> 90 </Setter.Value> 91 </Setter> 92 </Style> 93 </Window.Resources>
3. 数据转换
在模板数据绑定的过程中，有些数据需要进行格式化【如：数字转换成带单位的字符串，数值转换成Margin类型等】，所以需要定义数据转换类，如下所示：
1 public class WidthToMarginConvert : IValueConverter 2 { 3 public Double rate { get; set; } 4 5 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 6 { 7 Double width = (Double)value; 8 Double pwidth = width * rate; 9 pwidth = pwidth < 300 ? pwidth : 300; 10 return new Thickness(pwidth, 0, 0, 0); 11 } 12 13 //没有用到 14 public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 15 { 16 throw new NotImplementedException(); 17 } 18 } 19 20 public class TempToStringConvert : IValueConverter 21 { 22 23 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 24 { 25 return string.Format("{0}°C", value.ToString()); 26 } 27 28 //没有用到 29 public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 30 { 31 throw new NotImplementedException(); 32 } 33 }
备注
以上就是自定义温度计的全部内容，旨在抛砖引玉，共同学习，一起进步。
