WPF - crea il modello ProgressBar dal file PSD

Sto iniziando la mia avventura con WPF e dopo aver creato la mia prima applicazione voglio ridimensionarla un po '. Ho trovato UI template e utilizzando Blend per VS2013 ho importato PSD nel mio progetto.WPF - crea il modello ProgressBar dal file PSD

Ecco come ProgressBar appare in PSD:

e qui è quello che appare quando importato Miscela:

E qui è il codice:

<Canvas x:Name="Progress1" ClipToBounds="True" HorizontalAlignment="Left" Height="52" UseLayoutRounding="False" VerticalAlignment="Top" Width="493" Margin="0,307.5,0,-53.5"> 
     <Canvas x:Name="Loading" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493"> 
      <Path x:Name="Base2" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493" StrokeThickness="2"> 
       <Path.Stroke> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="#FFC18A13" Offset="1"/> 
         <GradientStop Color="#FFDC9A0C" Offset="0.339"/> 
        </LinearGradientBrush> 
       </Path.Stroke> 
       <Path.Fill> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="#FFE4882D" Offset="0"/> 
         <GradientStop Color="#FFF5CA09" Offset="1"/> 
        </LinearGradientBrush> 
       </Path.Fill> 
      </Path> 
      <Path x:Name="Bg" Data="F1M16.361,2.603C16.361,2.603 133.014,3.416 247.396,3.478 311.817,3.513 376.242,2.615 416.922,1.936 446.114,1.448 458.772,2.411 458.772,2.411 462.592,2.411 469.449,4.823 471.077,9.484 473.896,17.557 472.201,20.776 471.202,25.468 470.232,30.02 467.977,31.719 459.43,33.25 450.883,34.782 424.628,32.594 376,32.594 298.703,32.594 184.467,31.065 105.75,30.911 54.767,30.812 18.683,32.063 17.185,32.063 9.403,32.063 6.954,28.298 5.436,25.402 4.335,23.303 1.86,15.809 6.797,8.253 9.308,4.41 12.541,2.603 16.361,2.603z" Fill="#FFA77235" Height="36" Canvas.Left="9" Canvas.Top="8" Width="475"/> 
      <Path x:Name="Progress" Data="F1M19.986,2.29C19.986,2.29 50.058,4.582 104.021,2.936 154.279,1.403 214.797,4.02 264,4.02 310.844,4.02 341.117,2.457 347.659,2.936 354.201,3.415 356.173,5.804 357.743,10.484 359.313,15.162 360.055,20.568 357.202,26.468 355.175,30.658 353.597,31.417 347.492,33.396 345.484,34.047 309.622,34.937 262.208,34.943 217.536,34.948 162.63,33.886 116.105,33.683 61.905,33.446 19.087,34.063 17.185,34.063 9.403,34.063 6.016,31.048 4.498,28.152 3.397,26.053 1.86,15.809 6.797,8.253 9.308,4.41 16.166,2.29 19.986,2.29z" Height="36" Canvas.Left="8" Canvas.Top="7" Width="362"> 
       <Path.Fill> 
        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
         <GradientStop Color="#FF5DFF4E" Offset="0.409"/> 
         <GradientStop Color="#FF159308" Offset="1"/> 
        </LinearGradientBrush> 
       </Path.Fill> 
      </Path> 
     </Canvas> 
    </Canvas>

Il mio problema è come posso convertire quella tela in ProgressBar Template.

Sulla base del tutorial sono riuscito a creare il modello, ma non c'erano i rettangoli. Ho provato a utilizzare i percorsi ma non riesco ad allinearli correttamente.

Come è possibile creare un modello che utilizza Path come PART_Track e PART_Indicator e come posso aggiungere del testo a tale barra di avanzamento?

Immagino questo come 3 strati: sfondo componente (arancione), sfondo progresso (marrone) e barra di avanzamento (verde). Forse dovrei usare due livelli: barra di avanzamento e sfondo con tratto?

Questo è il mio primo modello, quindi mi piacerebbe farlo al meglio.

Impossibile trovare la domanda simile su SO (tranne snail progressbar, ma la soluzione è basata sulle immagini anziché sui percorsi).

fonte

2015-09-09 Misiu

Ho visto circa 3 domande esattamente uguali a questo nell'ultimo mese .. –

@GlenThomas potresti pubblicare un collegamento a loro? Sono sempre pronto a trovare soluzioni prima di fare una nuova domanda – Misiu

Non riesco a trovarle ora ... Sebbene tu abbia costruito qualcosa che assomiglia ad una barra di avanzamento, è statico e facendo cambiare il percorso di riempimento in base al valore di avanzamento essere estremamente difficile Sarebbe meglio iniziare con il modello di controllo predefinito per una barra di avanzamento e regolarlo per apparire come vuoi. –

Ti darò un'idea su come potresti rendere la barra di avanzamento del lavoro da quel modello.

In primo luogo, creare personalizzato WPF controllo e ereditano da ProgressBar:

public class MyProgressBar : ProgressBar { 
    static MyProgressBar() { 
     DefaultStyleKeyProperty.OverrideMetadata(typeof (MyProgressBar), new FrameworkPropertyMetadata(typeof (MyProgressBar))); 
    } 
}

poi andiamo in Temi/file di generic.xaml (che è stato creato per noi da Visual Studio, se non era presente) e creare sguardo dal nostro controllo:

<local:MyProgressBarWidthConverter x:Key="width" /> 
<Style TargetType="{x:Type local:MyProgressBar}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:MyProgressBar}"> 
       <Border Background="{TemplateBinding Background}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}"> 
        <Viewbox Stretch="Fill"> 
         <Canvas x:Name="Progress1" ClipToBounds="True" HorizontalAlignment="Left" Height="52" UseLayoutRounding="False" VerticalAlignment="Top" Width="493"> 
          <Canvas x:Name="Loading" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493"> 
           <Path x:Name="Base2" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493" StrokeThickness="2"> 
            <Path.Stroke> 
             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
              <GradientStop Color="#FFC18A13" Offset="1"/> 
              <GradientStop Color="#FFDC9A0C" Offset="0.339"/> 
             </LinearGradientBrush> 
            </Path.Stroke> 
            <Path.Fill> 
             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
              <GradientStop Color="#FFE4882D" Offset="0"/> 
              <GradientStop Color="#FFF5CA09" Offset="1"/> 
             </LinearGradientBrush> 
            </Path.Fill> 
           </Path> 
           <Path x:Name="Bg" Data="F1M16.361,2.603C16.361,2.603 133.014,3.416 247.396,3.478 311.817,3.513 376.242,2.615 416.922,1.936 446.114,1.448 458.772,2.411 458.772,2.411 462.592,2.411 469.449,4.823 471.077,9.484 473.896,17.557 472.201,20.776 471.202,25.468 470.232,30.02 467.977,31.719 459.43,33.25 450.883,34.782 424.628,32.594 376,32.594 298.703,32.594 184.467,31.065 105.75,30.911 54.767,30.812 18.683,32.063 17.185,32.063 9.403,32.063 6.954,28.298 5.436,25.402 4.335,23.303 1.86,15.809 6.797,8.253 9.308,4.41 12.541,2.603 16.361,2.603z" Fill="#FFA77235" Height="36" Canvas.Left="9" Canvas.Top="8" Width="475"/> 
           <Viewbox Stretch="UniformToFill" Canvas.Left="8" Canvas.Top="7" Height="36"> 
            <Viewbox.Width> 
             <MultiBinding Converter="{StaticResource width}"> 
              <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Minimum" /> 
              <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Value" /> 
              <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Maximum" /> 
             </MultiBinding> 
            </Viewbox.Width> 
            <Path x:Name="Progress" Data="F1M19.986,2.29C19.986,2.29 50.058,4.582 104.021,2.936 154.279,1.403 214.797,4.02 264,4.02 310.844,4.02 341.117,2.457 347.659,2.936 354.201,3.415 356.173,5.804 357.743,10.484 359.313,15.162 360.055,20.568 357.202,26.468 355.175,30.658 353.597,31.417 347.492,33.396 345.484,34.047 309.622,34.937 262.208,34.943 217.536,34.948 162.63,33.886 116.105,33.683 61.905,33.446 19.087,34.063 17.185,34.063 9.403,34.063 6.016,31.048 4.498,28.152 3.397,26.053 1.86,15.809 6.797,8.253 9.308,4.41 16.166,2.29 19.986,2.29z" > 
             <Path.Fill> 
              <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
               <GradientStop Color="#FF5DFF4E" Offset="0.409"/> 
               <GradientStop Color="#FF159308" Offset="1"/> 
              </LinearGradientBrush> 
             </Path.Fill> 
            </Path> 
           </Viewbox> 
          </Canvas> 
         </Canvas> 
        </Viewbox> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

Fondamentalmente abbiamo appena messo tutta la tela dal PSD all'interno Viewbox con Stretch = Fill (e dei margini non necessari anche rimossi). Tieni presente che tutte le dimensioni sono uguali e con codice fisso, ma poiché inseriamo il controllo all'interno della casella di vista, le dimensioni verranno ridotte alle dimensioni della casella di visualizzazione. E dato che è viewbox con Stretch = Fill e senza larghezza e altezza specificate, si estenderà fino alla dimensione del controllo. Mettiamo anche Path che corrisponde al riempimento verde alla sua viewbox, perché dovremo ridimensionare quel Path in base al parametro ProgressBar.Value.

Ora creiamo convertitore per viewBox verde Larghezza del percorso:

public class MyProgressBarWidthConverter : IMultiValueConverter { 
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { 
     if (values.Any(c => c == null || c == DependencyProperty.UnsetValue)) 
      return 0.0d; 
     var min = (double) values[0]; 
     var current = (double) values[1]; 
     var max = (double) values[2]; 
     const double maxWidth = 475; // that is from template 
     return (current/(max - min))*maxWidth; 
    } 

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) { 
     throw new NotImplementedException(); 
    } 
}

Ci passiamo minimo, il valore, massimo di barra di avanzamento e calcoliamo la larghezza barra verde. La larghezza massima disponibile è sempre 475, ma ricorda che l'abbiamo inserita nella viewbox, quindi il nostro controllo è non fissato a 475 larghezza.

poi abbiamo messo il controllo in una finestra:

<wpf:MyProgressBar x:Name="bar" Width="500" Height="50" Value="5" Minimum="0" Maximum="100" />

Codebehind:

public partial class MainWindow : Window { 
    public MainWindow() { 
     InitializeComponent(); 
     var timer = new DispatcherTimer() 
     { 
      Interval = TimeSpan.FromSeconds(1) 
     }; 
     timer.Tick += (o, e) => 
     { 
      if (bar.Value < bar.Maximum) 
       bar.Value++; 
      else 
       timer.Stop(); 
     }; 
     timer.Start(); 
    } 
}

E a guardare come le nostre opere ProgressBar. In generale, se hai un'interfaccia utente pesante, potresti voler lavorare con moduli semplici, perché molti percorsi all'interno delle finestre di visualizzazione non sono molto efficienti. Ma se hai hai per lavorare con percorsi fissi da PSD ... Perché no.

MODIFICA per rispondere al tuo commento. Certo non è necessario creare un nuovo controllo, è solo più flessibile. Se non si vuole fare questo, basta creare modello di controllo per la vostra barra di avanzamento e assegnare ai ProgressBar.ControlTemplate esistente, in questo modo:

<Window x:Class="Wpf.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:wpf="clr-namespace:Wpf" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525"> 
<Window.Resources> 
    <wpf:MyProgressBarWidthConverter x:Key="width" /> 
    <ControlTemplate x:Key="myProgressBar" TargetType="{x:Type ProgressBar}"> 
     <Border Background="{TemplateBinding Background}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}"> 
      <Viewbox Stretch="Fill"> 
       <Canvas x:Name="Progress1" ClipToBounds="True" HorizontalAlignment="Left" Height="52" UseLayoutRounding="False" VerticalAlignment="Top" Width="493"> 
        <Canvas x:Name="Loading" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493"> 
         <Path x:Name="Base2" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493" StrokeThickness="2"> 
          <Path.Stroke> 
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
            <GradientStop Color="#FFC18A13" Offset="1"/> 
            <GradientStop Color="#FFDC9A0C" Offset="0.339"/> 
           </LinearGradientBrush> 
          </Path.Stroke> 
          <Path.Fill> 
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
            <GradientStop Color="#FFE4882D" Offset="0"/> 
            <GradientStop Color="#FFF5CA09" Offset="1"/> 
           </LinearGradientBrush> 
          </Path.Fill> 
         </Path> 
         <Path x:Name="Bg" Data="F1M16.361,2.603C16.361,2.603 133.014,3.416 247.396,3.478 311.817,3.513 376.242,2.615 416.922,1.936 446.114,1.448 458.772,2.411 458.772,2.411 462.592,2.411 469.449,4.823 471.077,9.484 473.896,17.557 472.201,20.776 471.202,25.468 470.232,30.02 467.977,31.719 459.43,33.25 450.883,34.782 424.628,32.594 376,32.594 298.703,32.594 184.467,31.065 105.75,30.911 54.767,30.812 18.683,32.063 17.185,32.063 9.403,32.063 6.954,28.298 5.436,25.402 4.335,23.303 1.86,15.809 6.797,8.253 9.308,4.41 12.541,2.603 16.361,2.603z" Fill="#FFA77235" Height="36" Canvas.Left="9" Canvas.Top="8" Width="475"/> 
         <Viewbox Stretch="UniformToFill" Canvas.Left="8" Canvas.Top="7" Height="36"> 
          <Viewbox.Width> 
           <MultiBinding Converter="{StaticResource width}"> 
            <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Minimum" /> 
            <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Value" /> 
            <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Maximum" /> 
           </MultiBinding> 
          </Viewbox.Width> 
          <Path x:Name="Progress" Data="F1M19.986,2.29C19.986,2.29 50.058,4.582 104.021,2.936 154.279,1.403 214.797,4.02 264,4.02 310.844,4.02 341.117,2.457 347.659,2.936 354.201,3.415 356.173,5.804 357.743,10.484 359.313,15.162 360.055,20.568 357.202,26.468 355.175,30.658 353.597,31.417 347.492,33.396 345.484,34.047 309.622,34.937 262.208,34.943 217.536,34.948 162.63,33.886 116.105,33.683 61.905,33.446 19.087,34.063 17.185,34.063 9.403,34.063 6.016,31.048 4.498,28.152 3.397,26.053 1.86,15.809 6.797,8.253 9.308,4.41 16.166,2.29 19.986,2.29z" > 
           <Path.Fill> 
            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
             <GradientStop Color="#FF5DFF4E" Offset="0.409"/> 
             <GradientStop Color="#FF159308" Offset="1"/> 
            </LinearGradientBrush> 
           </Path.Fill> 
          </Path> 
         </Viewbox> 
        </Canvas> 
       </Canvas> 
      </Viewbox> 
     </Border> 
    </ControlTemplate> 
</Window.Resources> 
<ProgressBar x:Name="bar" Width="500" Height="50" Value="5" Minimum="0" Maximum="100" Template="{StaticResource myProgressBar}"/>

fonte

2015-09-13 14:55:09 Evk

grazie per quello. Questo è qualcosa che stavo cercando. Prima di pubblicare la mia domanda stavo cercando di creare un modello per ProgressBar, non un controllo personalizzato. Sarebbe difficile creare template (skin) per ProgressBar invece di creare un nuovo controllo? Ci scusiamo per la domanda per principianti, ma sono abbastanza nuovo per WPF (ho lavorato con WinForms prima) e questa roba è tutto nuovo per me. – Misiu

Certo, ho aggiornato la mia risposta con l'esempio. – Evk

Ho controllato il tuo stile solo pochi minuti fa, mi dispiace per il ritardo. Lo stile sembra buono per valori più alti, ma per abbassarlo è solo brutto. Potresti aiutarmi a risolvere questo? – Misiu

ho preparato un prototipo di come il vostro modello di controllo può essere.

In primo luogo ho creato un IMultiValueConverter definito come segue:

[ValueConversion(typeof(double), typeof(double))] 
public class RatioConveter : IMultiValueConverter 
{ 
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     return (System.Convert.ToDouble(values[0]) * System.Convert.ToDouble(values[1]))/System.Convert.ToDouble(values[2]); 
    } 

    public object[] ConvertBack(object value, Type[] targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotSupportedException(); 
    } 
}

Poi ho dichiarato come una risorsa nella finestra WPF (I OMISSIS la dichiarazione dello spazio dei nomi):

<yourNamespace:RatioConveter x:Key="ratioConverter" />

Poi Ho preparato uno Style che applica il modello di controllo a tutti i ProgressBar nella finestra definita in questo modo:

<Style x:Key="{x:Type ProgressBar}" 
      TargetType="{x:Type ProgressBar}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ProgressBar}"> 
        <Grid x:Name="Container" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">        
         <Canvas x:Name="Progress1" ClipToBounds="True" HorizontalAlignment="Left" Height="52" Width="493" UseLayoutRounding="False" VerticalAlignment="Top" Margin="0" > 
          <Canvas.Resources> 
           <system:Double x:Key="ratioConstant">1</system:Double> 
          </Canvas.Resources> 
          <Canvas.RenderTransform> 
           <ScaleTransform CenterX="0" 
               CenterY="0"> 
            <ScaleTransform.ScaleX> 
             <MultiBinding Converter="{StaticResource ResourceKey=ratioConverter}"> 
              <Binding ElementName="Container" Path="ActualWidth"/> 
              <Binding Source="{StaticResource ratioConstant}"/> 
              <Binding ElementName="Progress1" Path="Width"/> 
             </MultiBinding> 
            </ScaleTransform.ScaleX> 
            <ScaleTransform.ScaleY> 
             <MultiBinding Converter="{StaticResource ResourceKey=ratioConverter}"> 
              <Binding ElementName="Container" Path="ActualHeight"/> 
              <Binding Source="{StaticResource ratioConstant}"/> 
              <Binding ElementName="Progress1" Path="Height"/> 
             </MultiBinding> 
            </ScaleTransform.ScaleY> 
           </ScaleTransform> 
          </Canvas.RenderTransform> 
          <Path x:Name="Base2" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z" Height="52" Canvas.Left="0" Canvas.Top="0" Width="493" StrokeThickness="2"> 
           <Path.Stroke> 
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
             <GradientStop Color="#FFC18A13" Offset="1"/> 
             <GradientStop Color="#FFDC9A0C" Offset="0.339"/> 
            </LinearGradientBrush> 
           </Path.Stroke> 
           <Path.Fill> 
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
             <GradientStop Color="#FFE4882D" Offset="0"/> 
             <GradientStop Color="#FFF5CA09" Offset="1"/> 
            </LinearGradientBrush> 
           </Path.Fill> 
          </Path> 
          <Path x:Name="Bg" Data="F1M16.361,2.603C16.361,2.603 133.014,3.416 247.396,3.478 311.817,3.513 376.242,2.615 416.922,1.936 446.114,1.448 458.772,2.411 458.772,2.411 462.592,2.411 469.449,4.823 471.077,9.484 473.896,17.557 472.201,20.776 471.202,25.468 470.232,30.02 467.977,31.719 459.43,33.25 450.883,34.782 424.628,32.594 376,32.594 298.703,32.594 184.467,31.065 105.75,30.911 54.767,30.812 18.683,32.063 17.185,32.063 9.403,32.063 6.954,28.298 5.436,25.402 4.335,23.303 1.86,15.809 6.797,8.253 9.308,4.41 12.541,2.603 16.361,2.603z" Fill="#FFA77235" Height="36" Canvas.Left="9" Canvas.Top="8" Width="475"/> 
          <Path x:Name="Progress" Data="F1M19.986,2.29C19.986,2.29 50.058,4.582 104.021,2.936 154.279,1.403 214.797,4.02 264,4.02 310.844,4.02 341.117,2.457 347.659,2.936 354.201,3.415 356.173,5.804 357.743,10.484 359.313,15.162 360.055,20.568 357.202,26.468 355.175,30.658 353.597,31.417 347.492,33.396 345.484,34.047 309.622,34.937 262.208,34.943 217.536,34.948 162.63,33.886 116.105,33.683 61.905,33.446 19.087,34.063 17.185,34.063 9.403,34.063 6.016,31.048 4.498,28.152 3.397,26.053 1.86,15.809 6.797,8.253 9.308,4.41 16.166,2.29 19.986,2.29z" Height="36" Canvas.Left="8" Canvas.Top="7" Width="362"> 
           <Path.Resources> 
            <system:Double x:Key="ratioConstant">27500</system:Double> 
           </Path.Resources> 
           <Path.RenderTransform> 
            <ScaleTransform CenterX="0" 
               CenterY="0"> 
             <ScaleTransform.ScaleX> 
              <MultiBinding Converter="{StaticResource ResourceKey=ratioConverter}"> 
               <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}"/> 
               <Binding ElementName="Progress" Path="Width"/> 
               <Binding Source="{StaticResource ratioConstant}"/> 
              </MultiBinding> 
             </ScaleTransform.ScaleX> 
            </ScaleTransform> 
           </Path.RenderTransform> 
           <Path.Fill> 
            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
             <GradientStop Color="#FF5DFF4E" Offset="0.409"/> 
             <GradientStop Color="#FF159308" Offset="1"/> 
            </LinearGradientBrush> 
           </Path.Fill> 
          </Path> 
         </Canvas> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Background"> 
      <Setter.Value> 
       <LinearGradientBrush EndPoint="0,1" 
            StartPoint="0,0"> 
        <GradientStop Color="{DynamicResource ControlLightColor}" 
            Offset="0" /> 
        <GradientStop Color="{DynamicResource ControlMediumColor}" 
            Offset="1" /> 
       </LinearGradientBrush> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Foreground"> 
      <Setter.Value> 
       <LinearGradientBrush EndPoint="0.5,1" 
            StartPoint="0.5,0"> 
        <GradientStop Color="{DynamicResource ControlMediumColor}" 
            Offset="0" /> 
        <GradientStop Color="{DynamicResource ControlDarkColor}" 
            Offset="1" /> 
       </LinearGradientBrush> 
      </Setter.Value> 
     </Setter> 
    </Style>

Nota: il codice potrebbe richiedere alcuni miglioramenti, ma almeno è un buon inizio, la grafica quando si raggiungono valori bassi nella barra di avanzamento non sembra essere molto bella ma sicuramente è possibile migliorare la grafica del controllo basato su i tuoi bisogni Spero che questo ti aiuti.

fonte

2015-09-13 18:17:57

Grazie per l'aiuto. Qualche idea su come questo possa essere corretto per valori bassi? Lo stile @kyle sembra migliore con valori bassi, ma mi piacerebbe avere quell'aspetto di forma irregolare. – Misiu

Scusate per il ritardo ma stavo pensando ad un'altra soluzione per mostrare la barra "sinuosa" senza utilizzare il codice, ma non sono riuscito a trovare una soluzione. –

Ho semplificato il codice utente alla mia estremità e creato una soluzione funzionante.

<Window.Resources> 
    <LinearGradientBrush x:Key="PressedBrush" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FFC18A13" Offset="1"/> 
     <GradientStop Color="#FFDC9A0C" Offset="0.339"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="SolidBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FFE4882D" Offset="0"/> 
     <GradientStop Color="#FFF5CA09" Offset="1"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="DarkBrush" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
     <GradientStop Color="#FF5DFF4E" Offset="0.409"/> 
     <GradientStop Color="#FF159308" Offset="1"/> 
    </LinearGradientBrush> 
    <Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ProgressBar}"> 

        <Grid MinHeight="24" MinWidth="100"> 



         <Border Name="PART_Track" CornerRadius="15" Background="{StaticResource PressedBrush}" BorderThickness="10"> 
          <Border.BorderBrush> 
           <VisualBrush> 
            <VisualBrush.Visual> 
             <Grid> 

              <Path x:Name="path1" Stretch="Fill" Stroke="Black" Fill="{StaticResource SolidBorderBrush}" Width="Auto" Height="Auto" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z"></Path> 
             </Grid> 
            </VisualBrush.Visual> 
           </VisualBrush> 
          </Border.BorderBrush> 
         </Border> 
         <Border Name="PART_Indicator" CornerRadius="15" Background="{StaticResource DarkBrush}" HorizontalAlignment="Left" BorderThickness="10"> 
          <Border.BorderBrush> 
           <VisualBrush> 
            <VisualBrush.Visual> 
             <Grid> 
              <Path x:Name="path" Stretch="Fill" Fill="Transparent" Width="Auto" Height="Auto" Data="F1M22.086,3C22.086,3 63.118,4.562 125.833,3 199.069,1.175 294.072,5.645 370.146,4.333 430.323,3.294 474,3 474,3 479.523,3 487.826,8.208 489.687,15.098 491.864,23.156 491.191,28.867 489.081,37.118 487.415,43.637 479.856,47.999 474.333,47.999 474.333,47.999 368.324,50.176 252.792,47.999 135.568,45.792 42.104,49.541 23.518,47.999 12.306,47.07 6.028,45.811 4.028,37.787 3.199,34.461 1.441,23.222 7.178,11.906 10.179,5.987 16.563,3 22.086,3z"></Path> 
             </Grid> 
            </VisualBrush.Visual> 
           </VisualBrush> 
          </Border.BorderBrush> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources>

solo per completare questo esempio

<Grid Width="500" Height="100"> 
    <ProgressBar Height="61" Value="20" x:Name="sampleProgressBar" /> 
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding ElementName=sampleProgressBar,Path=Value}"/> 
</Grid>

Ora è possibile impostare la barra di avanzamento e il suo valore si riflettono sul TextBlock. Puoi anche personalizzare lo stile di testo per ottenere l'effetto desiderato.

fonte

2015-09-15 11:12:54 Rohit

Lo controllerò subito dopo il mio ritorno a casa. So che la forma della barra di avanzamento è irregolare, ma come vedo nella tua risposta lo stesso effetto può essere fatto con il bordo anziché con i percorsi. Ti scriverò dopo averlo controllato. – Misiu

@Misiu si prega di dare un'occhiata alla mia risposta aggiornata – Rohit

WPF - crea il modello ProgressBar dal file PSD

risposta

Problemi correlati