首页 › XAML 求助中心 › C1ProgressBar控件的Value背景色

fupch198473 发表于 2021-4-13 09:57:30

C1ProgressBar控件的Value背景色

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

fupch198473 发表于 2021-4-13 10:07:52

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

Richard.Ma 发表于 2021-4-13 11:15:50

本帖最后由 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背景色