none
任务管理器中的CPU那种背景为蓝色格子的进度条是怎么实现的 RRS feed

  • 问题

  • 试验了一下,自己的思路如下。

    背景用一张亮色的蓝格子图,然后是面放上一个Grid,Grid设置为两列,第一列设置成自动宽度,其中添加一个背景色为透明的Path。第二列添加一个背景色为50%的黑色,列宽设置为1*,这样可以通过设置第一个Path的宽度来达到效果。但是这样每次都要计算第一个Path的宽度。

    直接用ProgressBar不知道怎么实现。因为ProgressBar得PART_Track部件为整个进度条的宽度。而PART_Indicator为当前进度的宽度。如此就不能采用PART_Track为50%黑,PART_Indicator为透明的办法了,因为这样还是全部都是50%黑。


    BestWishes


    • 已编辑 xyzdumpling 2012年10月22日 5:07 错别字
    2012年10月22日 2:35

答案

  • 修改了一下ProgressBar的Template做到了。

    <LinearGradientBrush x:Key="ProgressBarBackground" EndPoint="1,0" StartPoint="0,0">
    			<GradientStop Color="#BABABA" Offset="0"/>
    			<GradientStop Color="#C7C7C7" Offset="0.5"/>
    			<GradientStop Color="#BABABA" Offset="1"/>
    		</LinearGradientBrush>
    		<LinearGradientBrush x:Key="ProgressBarBorderBrush" EndPoint="0,1" StartPoint="0,0">
    			<GradientStop Color="#B2B2B2" Offset="0"/>
    			<GradientStop Color="#8C8C8C" Offset="1"/>
    		</LinearGradientBrush>
    		
    		<Style x:Key="ProgressBarStyle" TargetType="{x:Type ProgressBar}">
    			<Setter Property="Foreground" Value="#01D328"/>
    			<Setter Property="Background" Value="{StaticResource ProgressBarBackground}"/>
    			<Setter Property="BorderBrush" Value="{StaticResource ProgressBarBorderBrush}"/>
    			<Setter Property="BorderThickness" Value="1"/>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="{x:Type ProgressBar}">
    						<Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">
    							<Rectangle x:Name="PART_Track" Margin="0,0,0,0" Grid.Column="0" Fill="#00000000"/>
    							<Grid HorizontalAlignment="Stretch" Width="Auto">
    								<Grid.ColumnDefinitions>
    									<ColumnDefinition Width="Auto"/>
    									<ColumnDefinition/>
    								</Grid.ColumnDefinitions>
    								<Decorator x:Name="PART_Indicator" HorizontalAlignment="Stretch" Margin="0">
    									<Grid x:Name="Foreground">
    										<Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}"/>
    									</Grid>
    								</Decorator>
    								<Rectangle Fill="#99000000" HorizontalAlignment="Stretch" Width="Auto" Grid.Column="1"/>
    							</Grid>
    						</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>
    							<Trigger Property="IsIndeterminate" Value="false"/>
    						</ControlTemplate.Triggers>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>

    原理和自己做两个Rectangle一样。


    BestWishes

    • 已标记为答案 xyzdumpling 2012年10月22日 3:48
    2012年10月22日 3:47