Question Thème ProgressBar avec décorateur de lignes diagonales


Je veux décorer WPB ProgressBar comme l'image ci-dessous:

Actuel:

ProgressBar without decoration

Décoré:

ProgressBar with decoration

En outre, ces lignes diagonales vierges doivent être déplacées dans l’animation de gauche à droite. Pour le moment, j'ai ce style simple pour l'apparence actuelle:

<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Border x:Name="BorderBackground" CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource ProgressBarBorderBrush}" Background="{StaticResource ProgressBarBackgroundBrush}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate" />
                                <VisualState x:Name="Indeterminate" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="PART_Track" Margin="2" BorderThickness="1" CornerRadius="2" />
                        <Border x:Name="PART_Indicator" Margin="2" BorderThickness="1" CornerRadius="2" HorizontalAlignment="Left" Background="{StaticResource ProgressBarTrackBackgroundBrush}"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Tout le monde peut m'aider à l'obtenir? Je l'ai recherché mais j'ai peut-être raté les mots-clés corrects pour trouver quelque chose comme ça, du moins je vois habituellement (comme dans la barre de progression OS X) que cette "décoration" est généralement utilisée.

Merci d'avance ;).


Modèle de solution avec le code de réponse légèrement modifié:

<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Border x:Name="BorderBackground" CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource ProgressBarBorderBrush}" Background="{StaticResource ProgressBarBackgroundBrush}" Effect="{StaticResource LightStrongDownLinearShadowEffect}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate" />
                                <VisualState x:Name="Indeterminate" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="PART_Track" Margin="2" BorderThickness="1" CornerRadius="2" />
                        <Border x:Name="PART_Indicator" Margin="2" BorderThickness="1" CornerRadius="2" HorizontalAlignment="Left" Background="{StaticResource ProgressBarTrackBackgroundBrush}" ClipToBounds="True">
                            <Border x:Name="DiagonalDecorator" Width="5000">
                                <Border.Background>
                                    <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute">
                                        <DrawingBrush.RelativeTransform>
                                            <TranslateTransform X="0" Y="0" />
                                        </DrawingBrush.RelativeTransform>
                                        <DrawingBrush.Drawing>
                                            <GeometryDrawing Brush="#20FFFFFF" Geometry="M10,0 22,0 12,25 0,22 Z" />
                                        </DrawingBrush.Drawing>
                                    </DrawingBrush>
                                </Border.Background>
                                <Border.Triggers>
                                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="(Border.Background).(DrawingBrush.RelativeTransform).(TranslateTransform.X)" From="0" To=".25" RepeatBehavior="Forever" Duration="0:0:15" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                </Border.Triggers>
                            </Border>
                        </Border>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

11
2017-12-22 14:03


origine


Réponses:


Modifier:

Ce L'article de codeproject.com contient une version de travail de la barre de progression "barber pole". Recherchez l'article pour "CandyCaneProgressPainter".

Réponse précédente:

Ce fait presque exactement ce que vous voulez. Il vous suffit de limiter la visibilité du rectangle au pourcentage souhaité et de modifier le rapport hauteur / largeur.

Les mots-clés que vous voulez sont "storyboard", "animate" et "trigger"

Voici le xaml du lien avec quelques commentaires du lien pour rendre l'animation plus fluide:

 <Rectangle x:Name="pole" Width="100" Height="20" Stroke="Black" StrokeThickness="1">
  <Rectangle.Fill>
   <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute">
    <DrawingBrush.RelativeTransform>
     <TranslateTransform X="0" Y="0" />
    </DrawingBrush.RelativeTransform>
    <DrawingBrush.Drawing>
     <GeometryDrawing Brush="Red" Geometry="M10,0 25,0 15,25 0,25 Z" />    </DrawingBrush.Drawing>
   </DrawingBrush>
  </Rectangle.Fill>
  <Rectangle.Triggers>
   <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    <BeginStoryboard>
     <Storyboard>
      <DoubleAnimation Storyboard.TargetProperty="(Rectangle.Fill).(DrawingBrush.RelativeTransform).(TranslateTransform.X)" From="0" To=".25" RepeatBehavior="Forever" Duration="0:0:1" />
     </Storyboard>
    </BeginStoryboard>
   </EventTrigger>
  </Rectangle.Triggers>
 </Rectangle>

J'imagine que les saccades se produisent si vous supprimez la valeur "width", mais si la valeur est remise, elle tourne en douceur. Bizarre.

En fait, en fait, il a fallu quelques ajustements avec les multiples du nombre règles la largeur dans ce cas, l'animation peut être un .1 ou un .05 si par exemple vous avez une largeur de 5000 .... maintenant ça marche bien!


4
2017-12-22 15:33



Dans votre bordure PART_Indicator, intégrez un chemin composé des formes pour créer les lignes diagonales. Vous allez devoir simuler l’effet Marquee pour obtenir les lignes diagonales de défilement, sauf si vous souhaitez utiliser un plugin jquery ou une autre alternative.

Cependant, ce que vous POUVEZ faire avec du xaml pur est de créer des chemins de lignes diagonaux, en faire beaucoup pour en faire une ligne très longue. Comme ils sont intégrés dans la bordure de l'indicateur, ils ne sont visibles que dans celui-ci.

Créez maintenant une nouvelle animation de storyboard et utilisez un comportement ControlStoryboardAction pour le déclencher et le configurer pour qu'il se répète. Saisissez le tracé composé des lignes diagonales et choisissez une image clé sur votre ligne de temps à partir de l'image de départ, puis faites glisser le chemin composé des lignes diagonales sur un côté ou définissez une grande marge à gauche. . L'idée est son canular visuel. Vos lignes diagonales agiront simplement comme un storyboard d'animation qui imite uniquement l'animation de sélection. Donc, ces lignes se déplaceront toujours dans la barre et, espérons-le, il y en aura assez, l'animation ne se répète pas avant que le contenu ne soit chargé. J'espère que cela fait sens haha. Cela demande quelques ajustements, mais vous pouvez aboutir à une solution décente. Bonne chance!


3
2017-12-22 15:27



Ce post est assez ancien, mais je viens de faire face au même problème et j'ai une bonne solution que j'aimerais partager:

  <SolidColorBrush x:Key="ProgressBarBackgroundBrush" Color="Gray" />
  <SolidColorBrush x:Key="ProgressBarTrackBackgroundBrush" Color="#105295" />
  <Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <controls:RoundBorder x:Name="BorderBackground" CornerRadius="3" BorderThickness="0"
                        BorderBrush="{StaticResource ProgressBarBorderBrush}"
                        Background="{StaticResource ProgressBarBackgroundBrush}">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Determinate" />
                                        <VisualState x:Name="Indeterminate" />
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="PART_Track" Margin="0" BorderThickness="0" CornerRadius="3"  />
                                <Border x:Name="PART_Indicator" Margin="0" BorderThickness="0" CornerRadius="3" HorizontalAlignment="Left"
                                Background="{StaticResource ProgressBarTrackBackgroundBrush}" ClipToBounds="True">
                                    <Border x:Name="DiagonalDecorator" Width="5000">
                                        <Border.Background>
                                            <DrawingBrush  TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,36,34"  ViewportUnits="Absolute">
                                                <DrawingBrush.RelativeTransform>
                                                    <TranslateTransform X="0" Y="0" />
                                                </DrawingBrush.RelativeTransform>
                                                <DrawingBrush.Drawing>
                                                    <GeometryDrawing Brush="#156dc7" Geometry="M0,0 18,0 36,34 18,34 Z" />
                                                </DrawingBrush.Drawing>
                                            </DrawingBrush>
                                        </Border.Background>
                                        <Border.Triggers>
                                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetProperty="(Border.Background).(DrawingBrush.RelativeTransform).(TranslateTransform.X)"
                                                    From="0" To=".36" RepeatBehavior="Forever" Duration="0:0:18" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Border.Triggers>
                                    </Border>
                                </Border>
                            </Grid>
                        </controls:RoundBorder >
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

1
2018-01-06 10:30