web-dev-qa-db-fra.com

Couleur de premier plan de la barre de progression

Quelqu'un sait-il comment changer la couleur de premier plan d'une barre de progression WPF? Il semble toujours se confondre avec le vert.

24
Morvader

Malheureusement, il est codé en dur dans le style par défaut:

<Trigger Property="IsIndeterminate"
     Value="false">
<Setter TargetName="Animation"
    Property="Background"
    Value="#80B5FFA9"/>

Vous pouvez créer votre propre style à partir du XAML d'origine ou essayer de remplacer l'arrière-plan dans l'événement Loaded, par exemple:

private void ProgressBar_Loaded(object sender, RoutedEventArgs e)
{
    var p = (ProgressBar)sender;
    p.ApplyTemplate();

    ((Panel)p.Template.FindName("Animation", p)).Background = Brushes.Red;
}

mais ce n'est pas fiable

16
Marat Khasanov

essayez avec

   <ProgressBar Height="25" IsIndeterminate="True" Width="150" Foreground="Red" ></ProgressBar>

Si cela ne fonctionne pas comme vous le souhaitiez, vous devez modifier le style ou le modèle de contrôle de la barre de progression.

Pour ce faire, vous pouvez utiliser Expression Blend de Microsoft ou obtenir une copie du modèle existant et le modifier.

18
Kishore Kumar

Pourquoi ne pas emprunter un chemin de faible résistance et utiliser la populaire bibliothèque MahApps ?

  1. Obtenez la bibliothèque MahApps: https://www.nuget.org/packages/MahApps.Metro
  2. Configurez l'espace de noms: xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"

  3. Ajoutez le 'MetroProgressBar'

                    <controls:MetroProgressBar Height="40"
                                           Background="{StaticResource GrayBrush2}"
                                           BorderBrush="{StaticResource GrayBrush8}"
                                           BorderThickness="3"
                                           Foreground="{StaticResource GrayBrush8}"
                                           IsIndeterminate="False"
                                           Value="{Binding CurrentProgressInfo.ProgressPercent}" />
    
  4. Réglez le "premier plan" sur votre couleur préférée

5
Gordon Slysz

Marat Khasanov a souligné que la teinte verte indésirable provient de l'objet nommé "Animation" dans le modèle de contrôle. Une autre approche simple consiste donc à masquer cet objet. Cela désactivera également l'effet d'animation "lueur", que je considérais comme un atout mais que vous pourriez voir comme un tueur de deal. J'ai implémenté cela via un gestionnaire pour l'événement Loaded comme indiqué ci-dessous.

Cela a été inspiré par ne réponse à une autre question . La même mise en garde s'applique: s'ils modifient le modèle de contrôle, cela pourrait ne plus fonctionner.

    public void ProgressBar_Loaded(object sender, RoutedEventArgs e)
    {
        var progressBar = sender as ProgressBar;
        if (progressBar == null) return;

        var animation = progressBar.Template.FindName("Animation", progressBar) as FrameworkElement;
        if (animation != null)
            animation.Visibility = Visibility.Collapsed;

    }
3
Tony Pulokas

J'ai rencontré un problème similaire lorsque les paramètres visuels de Windows ont été optimisés pour de meilleures performances (Panneau de configuration -> Système -> Paramètres système avancés -> Avancé -> Performances -> Paramètres -> Effets visuels -> Ajuster pour de meilleures performances). La barre de progression avait l'air bien dans les paramètres normaux, mais horrible sous "meilleures performances". Je viens de changer ForeGround en "LightGreen".

Voici ce que j'ai vu sur ForeColor par défaut dans des conditions normales

enter image description here

Voici ce que j'ai vu une fois ajusté pour de meilleures performances

enter image description here

Voici le changement

//before
<ProgressBar Name="Progress" Grid.Column="0" Value="{Binding ProgressValue}" HorizontalAlignment="Stretch"/>

//after
<ProgressBar Foreground="LightGreen" Name="Progress" Grid.Column="0" Value="{Binding ProgressValue}" HorizontalAlignment="Stretch"/>

Voici ce que j'ai vu après avoir été ajusté pour de meilleures performances

enter image description here

Quelques détails supplémentaires: http://justmycode.blogspot.com.au/2012/08/the-case-of-strangely-coloured.html

1
Evgeny

Utilisez le style et personnalisez selon vos besoins

                        </Border>

                    </DockPanel>
                </Border>
                    <Border Background="White" Margin="40,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
                    <Border Background="White" Margin="80,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
                    <Border Background="White" Margin="120,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
                    <Border Background="White" Margin="160,0,0,0" Width="1.5" HorizontalAlignment="Left"></Border>
                </Grid>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>
0
user1360355

J'ai trouvé plutôt utile de remplacer tout le style. Vous pouvez extraire les styles de modèle de contrôle de tout contrôle avec

var yourcontrol = new ProgressBar();
// the control needs to load before it has a template.
yourcontrol.Loaded += (sender,e) => {
    var str = new System.Text.StringBuilder();
    using (var writer = new System.IO.StringWriter(str))
        System.Windows.Markup.XamlWriter.Save(yourcontrol .Template, writer);
    System.Diagnostics.Debug.Write(str);
};
// add it to your main grid, or some control thats loaded on screen.
gridMain.Children.Add(yourcontrol);

Le style de progression (avec une mise en forme) se présente comme suit:

<ControlTemplate x:Key="templateprogress"
                     TargetType="ProgressBar">
        <Grid Name="TemplateRoot"
              SnapsToDevicePixels="True">
            <Grid.Resources>

                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1"
                                     x:Key="brushMagic1">
                    <GradientStop Color="#50FFFFFF"
                                  Offset="0.5385" />
                    <GradientStop Color="#00FFFFFF"
                                  Offset="0.5385" />
                </LinearGradientBrush>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1"
                                     x:Key="brushMagic2">
                    <GradientStop Color="#80FFFFFF"
                                  Offset="0.05" />
                    <GradientStop Color="#00FFFFFF"
                                  Offset="0.25" />
                </LinearGradientBrush>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="1,0"
                                     x:Key="brushGlowRect">
                    <GradientStop Color="#00FFFFFF"
                                  Offset="0" />
                    <GradientStop Color="#60FFFFFF"
                                  Offset="0.4" />
                    <GradientStop Color="#60FFFFFF"
                                  Offset="0.6" />
                    <GradientStop Color="#00FFFFFF"
                                  Offset="1" />
                </LinearGradientBrush>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="1,0"
                                     x:Key="brushLeftDark">
                    <GradientStop Color="#0C000000"
                                  Offset="0" />
                    <GradientStop Color="#20000000"
                                  Offset="0.3" />
                    <GradientStop Color="#00000000"
                                  Offset="1" />
                </LinearGradientBrush>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="1,0"
                                     x:Key="brushRightDark">
                    <GradientStop Color="#00000000"
                                  Offset="0" />
                    <GradientStop Color="#20000000"
                                  Offset="0.7" />
                    <GradientStop Color="#0C000000"
                                  Offset="1" />
                </LinearGradientBrush>
                <RadialGradientBrush RadiusX="1"
                                     RadiusY="1"
                                     x:Key="brushRadialLeftLight"
                                     RelativeTransform="1,0,0,1,0.5,0.5">
                    <GradientStop Color="#60FFFFC4"
                                  Offset="0" />
                    <GradientStop Color="#00FFFFC4"
                                  Offset="1" />
                </RadialGradientBrush>
                <LinearGradientBrush StartPoint="0,1"
                                     EndPoint="0,0"
                                     x:Key="brushCenterLight">
                    <GradientStop Color="#60FFFFC4"
                                  Offset="0" />
                    <GradientStop Color="#00FFFFC4"
                                  Offset="1" />
                </LinearGradientBrush>
                <RadialGradientBrush RadiusX="1"
                                     RadiusY="1"
                                     x:Key="brushRadial1"
                                     RelativeTransform="1,0,0,1,-0.5,0.5">
                    <GradientStop Color="#60FFFFC4"
                                  Offset="0" />
                    <GradientStop Color="#00FFFFC4"
                                  Offset="1" />
                </RadialGradientBrush>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1"
                                     x:Key="brushHighlight1">
                    <GradientStop Color="#90FFFFFF"
                                  Offset="0.5385" />
                    <GradientStop Color="#00FFFFFF"
                                  Offset="0.5385" />
                </LinearGradientBrush>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1"
                                     x:Key="brushHighlight2">
                    <GradientStop Color="#80FFFFFF"
                                  Offset="0.05" />
                    <GradientStop Color="#00FFFFFF"
                                  Offset="0.25" />
                </LinearGradientBrush>
            </Grid.Resources>
            <Rectangle RadiusX="2"
                       RadiusY="2"
                       Fill="{TemplateBinding Panel.Background}" />
            <Border CornerRadius="2,2,2,2"
                    Margin="1,1,1,1"
                    Background="{StaticResource ResourceKey=brushMagic1}" />
            <Border BorderThickness="1,0,1,1"
                    BorderBrush="#80FFFFFF"
                    Margin="1,1,1,1"
                    Background="{StaticResource ResourceKey=brushMagic2}" />
            <Rectangle Name="PART_Track"
                       Margin="1,1,1,1" />
            <Decorator Name="PART_Indicator"
                       Margin="1,1,1,1"
                       HorizontalAlignment="Left">
                <Grid Name="Foreground">
                    <Rectangle Fill="{TemplateBinding TextElement.Foreground}"
                               Name="Indicator" />
                    <Grid Name="Animation"
                          ClipToBounds="True">
                        <Rectangle Name="PART_GlowRect"
                                   Width="100"
                                   Margin="-100,0,0,0"
                                   HorizontalAlignment="Left"
                                   Fill="{StaticResource ResourceKey=brushGlowRect}" />
                    </Grid>
                    <Grid Name="Overlay">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MaxWidth="15" />
                            <ColumnDefinition Width="0.1*" />
                            <ColumnDefinition MaxWidth="15" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Rectangle RadiusX="1"
                                   RadiusY="1"
                                   Name="LeftDark"
                                   Margin="1,1,0,1"
                                   Grid.RowSpan="2"
                                   Fill="{StaticResource ResourceKey=brushLeftDark}" />
                        <Rectangle RadiusX="1"
                                   RadiusY="1"
                                   Name="RightDark"
                                   Margin="0,1,1,1"
                                   Grid.Column="2"
                                   Grid.RowSpan="2"
                                   Fill="{StaticResource ResourceKey=brushRightDark}" />
                        <Rectangle Name="LeftLight"
                                   Grid.Column="0"
                                   Grid.Row="2"
                                   Fill="{StaticResource ResourceKey=brushRadialLeftLight}" />
                        <Rectangle Name="CenterLight"
                                   Grid.Column="1"
                                   Grid.Row="2"
                                   Fill="{StaticResource ResourceKey=brushCenterLight}" />
                        <Rectangle Name="RightLight"
                                   Grid.Column="2"
                                   Grid.Row="2"
                                   Fill="{StaticResource ResourceKey=brushRadial1}" />
                        <Border Name="Highlight1"
                                Grid.ColumnSpan="3"
                                Grid.RowSpan="2"
                                Background="{StaticResource ResourceKey=brushHighlight1}" />
                        <Border Name="Highlight2"
                                Grid.ColumnSpan="3"
                                Grid.RowSpan="2"
                                Background="{StaticResource ResourceKey=brushHighlight2}" />
                    </Grid>
                </Grid>
            </Decorator>
            <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                    CornerRadius="2,2,2,2"
                    BorderBrush="{TemplateBinding Border.BorderBrush}" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="ProgressBar.Orientation"
                     Value="Vertical">
                <Setter Property="FrameworkElement.LayoutTransform"
                        TargetName="TemplateRoot">
                    <Setter.Value>
                        <RotateTransform Angle="-90" />
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="ProgressBar.IsIndeterminate"
                     Value="True">
                <Setter Property="UIElement.Visibility"
                        TargetName="LeftDark"
                        Value="Collapsed" />
                <Setter Property="UIElement.Visibility"
                        TargetName="RightDark"
                        Value="Collapsed" />
                <Setter Property="UIElement.Visibility"
                        TargetName="LeftLight"
                        Value="Collapsed" />
                <Setter Property="UIElement.Visibility"
                        TargetName="CenterLight"
                        Value="Collapsed" />

                <Setter Property="UIElement.Visibility"
                        TargetName="RightLight"
                        Value="Collapsed" />
                <Setter Property="UIElement.Visibility"
                        TargetName="Indicator"
                        Value="Collapsed" />
            </Trigger>
            <Trigger Property="ProgressBar.IsIndeterminate"
                     Value="False">
                <Setter Property="Panel.Background"
                        TargetName="Animation"
                        Value="#80B5FFA9" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <Style TargetType="ProgressBar">
        <Setter Property="Template"
                Value="{StaticResource ResourceKey=templateprogress}" />
    </Style>
0
Gauthier