C1ProgressBar控件的Value背景色

登录

C1ProgressBar控件的进度bar背景色该如果改变？

fupch198473 · fupch198473

已解决，新问题:怎么将百分比显示在控件中间？

Richard.Ma · Richard.Ma

本帖最后由 Richard.Ma 于 2021-4-13 11:17 编辑

可以通过修改控件模板来实现

然后在模板中这里添加

<ContentPresenter x:Name="contentPresenter" ContentSource="Value" Focusable="False" HorizontalAlignment="Center" VerticalAlignment="Center"/>

复制代码

最终代码如下

<Style x:Key="C1ProgressBarStyle1" TargetType="{x:Type c1:C1ProgressBar}">
<Setter Property="Background" Value="#FFEFF0F1"/>
<Setter Property="Foreground" Value="#FFA0CEE4"/>
<Setter Property="IndeterminateForeground" Value="#FFA0CEE4"/>
<Setter Property="BorderBrush" Value="#FFA4AFBA"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="CornerRadius" Value="2"/>
<Setter Property="Maximum" Value="100"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="MinHeight" Value="5"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type c1:C1ProgressBar}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Updating" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="Determinate"/>
<VisualTransition From="Paused" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" To="Determinate">
<Storyboard>
<DoubleAnimation Duration="0:0:0.25" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ProgressBarIndicator"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="Indeterminate" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Determinate"/>
<VisualState x:Name="Updating"/>
<VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="EllipseGrid"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DeterminateRoot"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Error">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ProgressBarIndicator">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Paused">
<Storyboard>
<DoubleAnimation Duration="0:0:0.25" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ProgressBarIndicator"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="EllipseGrid" Opacity="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<TranslateTransform/>
</Grid.RenderTransform>
<Border x:Name="B1" Grid.Column="8" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform/>
</Border.RenderTransform>
<Ellipse x:Name="E1" Fill="{TemplateBinding IndeterminateForeground}" Height="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource TemplatedParent}}">
<Ellipse.RenderTransform>
<TranslateTransform/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Rectangle Grid.Column="7" Width="{Binding TemplateSettings.EllipseOffset, RelativeSource={RelativeSource TemplatedParent}}"/>
<Border x:Name="B2" Grid.Column="6" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform/>
</Border.RenderTransform>
<Ellipse x:Name="E2" Fill="{TemplateBinding IndeterminateForeground}" Height="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource TemplatedParent}}">
<Ellipse.RenderTransform>
<TranslateTransform/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Rectangle Grid.Column="5" Width="{Binding TemplateSettings.EllipseOffset, RelativeSource={RelativeSource TemplatedParent}}"/>
<Border x:Name="B3" Grid.Column="4" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform/>
</Border.RenderTransform>
<Ellipse x:Name="E3" Fill="{TemplateBinding IndeterminateForeground}" Height="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource TemplatedParent}}">
<Ellipse.RenderTransform>
<TranslateTransform/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Rectangle Grid.Column="3" Width="{Binding TemplateSettings.EllipseOffset, RelativeSource={RelativeSource TemplatedParent}}"/>
<Border x:Name="B4" Grid.Column="2" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform/>
</Border.RenderTransform>
<Ellipse x:Name="E4" Fill="{TemplateBinding IndeterminateForeground}" Height="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource TemplatedParent}}">
<Ellipse.RenderTransform>
<TranslateTransform/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
<Rectangle Grid.Column="1" Width="{Binding TemplateSettings.EllipseOffset, RelativeSource={RelativeSource TemplatedParent}}"/>
<Border x:Name="B5" Grid.Column="0" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TranslateTransform/>
</Border.RenderTransform>
<Ellipse x:Name="E5" Fill="{TemplateBinding IndeterminateForeground}" Height="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource TemplatedParent}}">
<Ellipse.RenderTransform>
<TranslateTransform/>
</Ellipse.RenderTransform>
</Ellipse>
</Border>
</Grid>
<Border x:Name="DeterminateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
<Border x:Name="ProgressBarIndicator" Background="{TemplateBinding Foreground}" CornerRadius="{TemplateBinding CornerRadius}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" Width="{Binding TemplateSettings.IndicatorWidth, RelativeSource={RelativeSource TemplatedParent}}"/>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentSource="Value" Focusable="False" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

复制代码

		自动登录	找回密码
密码			立即注册

[已处理] C1ProgressBar控件的Value背景色

2 个回复

本帖子中包含更多资源

微信认证勋章

讲师达人

SpreadJS 认证

SpreadJS 高级认证

悬赏达人