走进WPF之自定义温度计

WPF中的控件不再具有固定的形象，仅仅是算法内容或数据内容的载体，你可以把控件看成为一组操作穿上了一套衣服，换一个控件就相当于换另外一套衣服。本文主要用WPF的控件模板自定义一个温度计，简述WPF的控件模板的用法，仅供学习分享使用，如有不足之处，还请指正。

模板分类

WPF引入模板，将数据和算法的内容与形式解耦，模板主要分为两大类：

• 控件模板：是算法内容的体现形式，一个控件怎样组织内部结构才能更符合业务逻辑，让用户操作起来更舒服，控件模板决定了控件“长成什么样子”。
• 数据模板：是数据内容的表现形式，一条数据显示成什么样子，是简单的文本，还是直观的图表，由数据模板决定。

示例截图

本例主要用过ProgressBar控件，设计成温度计的样式，如下所示：

示例步骤

1. 创建控件模板副本，生成样式资源
2. 修改默认资源样式，添加对应内容。
3. 绑定数据到文本框

关于如何创建模板副本，可参考前面相关文章。

示例源码

1. 窗口布局

本例使用了两个进度条，分别展示不同样式的温度计，UI代码如下所示：

   <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto" MinWidth="80"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto" MinWidth="80"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <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}" />
        <StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock Text="最小值" Margin="3" Padding="3"></TextBlock>
            <TextBox Text="{Binding ElementName=temp ,Path= Minimum,StringFormat={}{0}°C}" Width="50"  Margin="3" Padding="3"></TextBox>
            <TextBlock Text="最大值"  Margin="3" Padding="3"></TextBlock>
            <TextBox Text="{Binding ElementName=temp ,Path= Maximum,StringFormat={}{0}°C}" Width="50"  Margin="3" Padding="3"></TextBox>
            <TextBlock Text="当前值" Margin="3" Padding="3"></TextBlock>
            <TextBox Text="{Binding ElementName=temp ,Path= Value,StringFormat={}{0}°C}" Width="50"  Margin="3" Padding="3"></TextBox>
        </StackPanel>

        <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}" />
        <StackPanel Grid.Row="0" Grid.Column="3" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock Text="最小值" Margin="3" Padding="3"></TextBlock>
            <TextBox Text="{Binding ElementName=temp1 ,Path= Minimum,StringFormat={}{0}°C}" Width="50"  Margin="3" Padding="3"></TextBox>
            <TextBlock Text="最大值"  Margin="3" Padding="3"></TextBlock>
            <TextBox Text="{Binding ElementName=temp1 ,Path= Maximum,StringFormat={}{0}°C}" Width="50"  Margin="3" Padding="3"></TextBox>
            <TextBlock Text="当前值" Margin="3" Padding="3"></TextBlock>
            <TextBox Text="{Binding ElementName=temp1 ,Path= Value,StringFormat={}{0}°C}" Width="50"  Margin="3" Padding="3"></TextBox>
        </StackPanel>
        <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" Text="WPF自定义温度计" HorizontalAlignment="Center" FontSize="30" Foreground="LightBlue"></TextBlock>
    </Grid>

注意：默认情况下，进度条是水平方向的，本例为了模拟温度计，需要设置成垂直方向。

2. 模板样式

ControlTemplate，主要用于设置模板，其中默认生成模板中定义x:Name的内容不可以删除，否则会报错【如：x:Name="TemplateRoot"，x:Name="PART_Indicator"等】。具体如下所示：

    <Window.Resources>
        <local:WidthToMarginConvert x:Key="WidthToMargin" rate="3"/>
        <local:TempToStringConvert x:Key="tempformat"></local:TempToStringConvert>
        <SolidColorBrush x:Key="ProgressBar.Progress" Color="#FF06B025"/>
        <SolidColorBrush x:Key="ProgressBar.Background" Color="#FFE6E6E6"/>
        <SolidColorBrush x:Key="ProgressBar.Border" Color="#FFBCBCBC"/>
        <Style x:Key="ProgressBarStyle1" TargetType="{x:Type ProgressBar}">
            <Setter Property="Foreground" Value="{StaticResource ProgressBar.Progress}"/>
            <Setter Property="Background" Value="{StaticResource ProgressBar.Background}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ProgressBar.Border}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid x:Name="TemplateRoot">
                            
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Determinate"/>
                                    <VisualState x:Name="Indeterminate">
                                        <Storyboard RepeatBehavior="Forever">
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Animation">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.25"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="Animation">
                                                <EasingPointKeyFrame KeyTime="0" Value="-0.5,0.5"/>
                                                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/>
                                                <EasingPointKeyFrame KeyTime="0:0:2" Value="1.5,0.5"/>
                                            </PointAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0 50 50 0"/>
                            <Border Background="AliceBlue" Width="280" Height="30" CornerRadius="0 15 15 0"></Border>
                            <Rectangle x:Name="PART_Track"/>
                            <Grid x:Name="PART_Indicator" ClipToBounds="true" HorizontalAlignment="Left" Margin="38 0 0 0" Height="6">
                                
                                <Rectangle x:Name="Indicator" Fill="Black" Opacity="0.8" />
                                <Rectangle x:Name="Animation" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5">
                                    <Rectangle.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform/>
                                        </TransformGroup>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                
                            </Grid>

                            
                            <Ellipse Width="40" HorizontalAlignment="Left" Margin="0 0 0 0" Height="40"  Fill="{TemplateBinding Foreground}" ></Ellipse>
                            <Ellipse Width="10" HorizontalAlignment="Left" Margin="15 0 0 0" Height="10"  Fill="White" ></Ellipse>
                            <TextBlock Text="{TemplateBinding Value, Converter={StaticResource tempformat}}" Foreground="Black"  Width="40" Height="20" Padding="3"  Margin="{TemplateBinding Value, Converter={StaticResource WidthToMargin}}" >
                        
                                <TextBlock.RenderTransform>
                                    <RotateTransform Angle="90"></RotateTransform>
                                </TextBlock.RenderTransform>
                            </TextBlock>
                            <Canvas x:Name="tick" >
                                <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>
                                <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>
                                <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>
                                

                                <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>
                                <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>
                                <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>


                            </Canvas>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Orientation" Value="Vertical">
                                <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                                    <Setter.Value>
                                        <RotateTransform Angle="-90"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsIndeterminate" Value="true">
                                <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

3. 数据转换

在模板数据绑定的过程中，有些数据需要进行格式化【如：数字转换成带单位的字符串，数值转换成Margin类型等】，所以需要定义数据转换类，如下所示：

    public class WidthToMarginConvert : IValueConverter
    {
        public Double rate { get; set; }

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            Double width = (Double)value;
            Double pwidth = width * rate;
            pwidth = pwidth < 300 ? pwidth : 300;
            return new Thickness(pwidth, 0, 0, 0);
        }

        //没有用到
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    public class TempToStringConvert : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return string.Format("{0}°C", value.ToString());
        }

        //没有用到
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

备注

以上就是自定义温度计的全部内容，旨在抛砖引玉，共同学习，一起进步。