码迷,mamicode.com
首页 > 其他好文 > 详细

温度计

时间:2015-01-04 18:58:44      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:

 <ControlTemplate x:Key="templateThermometer"
                 TargetType="{x:Type ProgressBar}">

            <!-- Define two brushes for the thermometer liquid -->
            <ControlTemplate.Resources>
                <LinearGradientBrush x:Key="brushStem"
                             StartPoint="0 0" EndPoint="0 1" >
                    <GradientStop Offset="0" Color="Red" />
                    <GradientStop Offset="0.3" Color="Pink" />
                    <GradientStop Offset="1" Color="Red" />
                </LinearGradientBrush>

                <RadialGradientBrush x:Key="brushBowl"
                             GradientOrigin="0.3 0.3">
                    <GradientStop Offset="0" Color="Pink" />
                    <GradientStop Offset="1" Color="Red" />
                </RadialGradientBrush>
            </ControlTemplate.Resources>

            <!-- Two-row Grid divides thermometer into stem and bowl -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <!-- Second grid divides stem area in three columns -->
                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="25*" />
                        <ColumnDefinition Width="50*" />
                        <ColumnDefinition Width="25*" />
                    </Grid.ColumnDefinitions>

                    <!-- This border displays the stem -->
                    <Border Grid.Column="1" BorderBrush="SteelBlue" 
                    BorderThickness="3 3 3 0"
                    CornerRadius="6 6 0 0" >
                        <Grid x:Name="Root">
                            <!-- Track and Indicator elements -->
                            <Rectangle Name="PART_Track"/>
                            <Border CornerRadius="0 6 6 0" Name="PART_Indicator" HorizontalAlignment="Left" Background="{StaticResource brushStem}"/>
                        </Grid>

                    </Border>
                </Grid>

                <!-- The bowl outline goes in the main Grid second row -->
                <Ellipse Grid.Row="1"
                 Width="{TemplateBinding Width}"
                 Height="{TemplateBinding Width}"
                 Stroke="SteelBlue" StrokeThickness="3" />

                <!-- Another grid goes in the same cell -->
                <Grid Grid.Row="1" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50*" />
                        <RowDefinition Height="50*" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="25*" />
                        <ColumnDefinition Width="50*" />
                        <ColumnDefinition Width="25*" />
                    </Grid.ColumnDefinitions>

                    <!-- This is to close up the gap between bowl and stem -->
                    <Border Grid.Row="0" Grid.Column="1"
                    BorderBrush="SteelBlue"
                    BorderThickness="3 0 3 0"
                    Background="{StaticResource brushStem}" />
                </Grid>

                <!-- Another ellipse to fill up the bowl -->
                <Ellipse Grid.Row="1"
                 Width="{TemplateBinding Width}"
                 Height="{TemplateBinding Width}"
                 Stroke="Transparent" StrokeThickness="6"
                 Fill="{StaticResource brushBowl}" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="LayoutTransform" TargetName="Root">
                        <Setter.Value>
                            <RotateTransform Angle="-90"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
 <ControlTemplate x:Key="templateThermometer"
                 TargetType="{x:Type ProgressBar}">

            <!-- Define two brushes for the thermometer liquid -->
            <ControlTemplate.Resources>
                <LinearGradientBrush x:Key="brushStem"
                             StartPoint="0 0" EndPoint="0 1" >
                    <GradientStop Offset="0" Color="Red" />
                    <GradientStop Offset="0.3" Color="Pink" />
                    <GradientStop Offset="1" Color="Red" />
                </LinearGradientBrush>

                <RadialGradientBrush x:Key="brushBowl"
                             GradientOrigin="0.3 0.3">
                    <GradientStop Offset="0" Color="Pink" />
                    <GradientStop Offset="1" Color="Red" />
                </RadialGradientBrush>
            </ControlTemplate.Resources>

            <!-- Two-row Grid divides thermometer into stem and bowl -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <!-- Second grid divides stem area in three columns -->
                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="25*" />
                        <ColumnDefinition Width="50*" />
                        <ColumnDefinition Width="25*" />
                    </Grid.ColumnDefinitions>

                    <!-- This border displays the stem -->
                    <Border Grid.Column="1" BorderBrush="SteelBlue" 
                    BorderThickness="3 3 3 0"
                    CornerRadius="6 6 0 0" >
                        <Grid x:Name="Root">
                            <!-- Track and Indicator elements -->
                            <Rectangle Name="PART_Track"/>
                            <Border CornerRadius="0 6 6 0" Name="PART_Indicator" HorizontalAlignment="Left" Background="{StaticResource brushStem}"/>
                        </Grid>

                    </Border>
                </Grid>

                <!-- The bowl outline goes in the main Grid second row -->
                <Ellipse Grid.Row="1"
                 Width="{TemplateBinding Width}"
                 Height="{TemplateBinding Width}"
                 Stroke="SteelBlue" StrokeThickness="3" />

                <!-- Another grid goes in the same cell -->
                <Grid Grid.Row="1" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50*" />
                        <RowDefinition Height="50*" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="25*" />
                        <ColumnDefinition Width="50*" />
                        <ColumnDefinition Width="25*" />
                    </Grid.ColumnDefinitions>

                    <!-- This is to close up the gap between bowl and stem -->
                    <Border Grid.Row="0" Grid.Column="1"
                    BorderBrush="SteelBlue"
                    BorderThickness="3 0 3 0"
                    Background="{StaticResource brushStem}" />
                </Grid>

                <!-- Another ellipse to fill up the bowl -->
                <Ellipse Grid.Row="1"
                 Width="{TemplateBinding Width}"
                 Height="{TemplateBinding Width}"
                 Stroke="Transparent" StrokeThickness="6"
                 Fill="{StaticResource brushBowl}" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="LayoutTransform" TargetName="Root">
                        <Setter.Value>
                            <RotateTransform Angle="-90"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

 

温度计

标签:

原文地址:http://www.cnblogs.com/XzcBlog/p/4201692.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!