none
Vertical Custom Progressbar RRS feed

  • Frage

  • Noch eine Frage, warum zum Teufel lässt sich die Progressbar nicht vetikal darstellen:

    <Style TargetType="{x:Type ProgressBar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid MinHeight="150" MinWidth="10">
                                <Rectangle Grid.Column="1" Name="PART_Track" Stroke="#888888" StrokeThickness="1">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
                                        <GradientStop Offset="0" Color="#FF61E5CA"/>
                                        <GradientStop Offset="0.5" Color="#FF00FB2A"/>
                                        <GradientStop Offset="0.8" Color="#FFF1FD4F"/>
                                        <GradientStop Offset="1" Color="#FFFF0000"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>

                               <DockPanel Margin="1">
                                <Rectangle Name="PART_Indicator">

                                </Rectangle>
                                <Rectangle Name="Mask" MinWidth="{TemplateBinding Width}" Fill="#C0C0C0"/>
                            </DockPanel>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

     

    ...

     <ProgressBar Opacity="0.5" Height="347" HorizontalAlignment="Left" Margin="160,32,0,0" Name="progressBar1" VerticalAlignment="Top" Width="10" Orientation="Vertical"/>

     

    Wäre echt nett wenn jemand ne Antwort drauf hätte, ich versteh es nämlich nicht. Danke schonmal

     

    Gruß B

     

    Donnerstag, 12. August 2010 15:06

Antworten

  • Dreh doch einfach die ProgressBar, z.B. so:
     

    <Window x:Class="MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="MainWindow" Height="350" Width="525"
         xmlns:vm="clr-namespace:WpfApplication1">
     <Window.Resources>
      <Style TargetType="{x:Type ProgressBar}">
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="{x:Type ProgressBar}">
          <Grid MinHeight="150" MinWidth="10">
    
           <Rectangle Grid.Column="1" Name="PART_Track" Stroke="#888888" StrokeThickness="1">
            <Rectangle.Fill>
             <LinearGradientBrush StartPoint="1,0" EndPoint="0,0">
              <GradientStop Offset="0" Color="#FF61E5CA"/>
              <GradientStop Offset="0.5" Color="#FF00FB2A"/>
              <GradientStop Offset="0.8" Color="#FFF1FD4F"/>
              <GradientStop Offset="1" Color="#FFFF0000"/>
             </LinearGradientBrush>
            </Rectangle.Fill>
           </Rectangle>
    
           <DockPanel Margin="1">
            <Rectangle Name="PART_Indicator"/>
            <Rectangle Name="Mask" Fill="#C0C0C0"/>
            <Rectangle Name="PART_GlowRect" Fill="Blue"/>
           </DockPanel>
    
          </Grid>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>
     </Window.Resources>
     <Grid DataContext="{Binding Source={StaticResource vm}}">
      <StackPanel Orientation="Horizontal">
       <ProgressBar Opacity="0.5" Height="100" HorizontalAlignment="Left" 
              Margin="160,32,0,0" Name="progressBar1" VerticalAlignment="Top" 
              Width="347" Orientation="Horizontal" 
              Minimum="0" Maximum="100" Value="75">
        <ProgressBar.RenderTransform>
         <RotateTransform Angle="-90" CenterX="150" CenterY="200"/>
        </ProgressBar.RenderTransform>
       </ProgressBar>
      </StackPanel>
     </Grid>
    </Window>
    

    --
    Viele Gruesse
    Peter

    Donnerstag, 12. August 2010 18:01
  • Hi B,

    schau Dir auch mal Charles Petzolds Artikel zum Thema Using Templates to Customize WPF Controls an - dort findest Du u.a. auch einen vertikalen Progressbar in Form eines Thermometers.

    (Edit) Wusste doch, dass ich auch mal ein Beispiel für einen vertikalen PB gepostet habe - s. diesen Thread . :-)


    Cheers,
    Olaf
    http://blogs.intuidev.com
    Freitag, 13. August 2010 07:24

Alle Antworten

  • Dreh doch einfach die ProgressBar, z.B. so:
     

    <Window x:Class="MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="MainWindow" Height="350" Width="525"
         xmlns:vm="clr-namespace:WpfApplication1">
     <Window.Resources>
      <Style TargetType="{x:Type ProgressBar}">
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="{x:Type ProgressBar}">
          <Grid MinHeight="150" MinWidth="10">
    
           <Rectangle Grid.Column="1" Name="PART_Track" Stroke="#888888" StrokeThickness="1">
            <Rectangle.Fill>
             <LinearGradientBrush StartPoint="1,0" EndPoint="0,0">
              <GradientStop Offset="0" Color="#FF61E5CA"/>
              <GradientStop Offset="0.5" Color="#FF00FB2A"/>
              <GradientStop Offset="0.8" Color="#FFF1FD4F"/>
              <GradientStop Offset="1" Color="#FFFF0000"/>
             </LinearGradientBrush>
            </Rectangle.Fill>
           </Rectangle>
    
           <DockPanel Margin="1">
            <Rectangle Name="PART_Indicator"/>
            <Rectangle Name="Mask" Fill="#C0C0C0"/>
            <Rectangle Name="PART_GlowRect" Fill="Blue"/>
           </DockPanel>
    
          </Grid>
         </ControlTemplate>
        </Setter.Value>
       </Setter>
      </Style>
     </Window.Resources>
     <Grid DataContext="{Binding Source={StaticResource vm}}">
      <StackPanel Orientation="Horizontal">
       <ProgressBar Opacity="0.5" Height="100" HorizontalAlignment="Left" 
              Margin="160,32,0,0" Name="progressBar1" VerticalAlignment="Top" 
              Width="347" Orientation="Horizontal" 
              Minimum="0" Maximum="100" Value="75">
        <ProgressBar.RenderTransform>
         <RotateTransform Angle="-90" CenterX="150" CenterY="200"/>
        </ProgressBar.RenderTransform>
       </ProgressBar>
      </StackPanel>
     </Grid>
    </Window>
    

    --
    Viele Gruesse
    Peter

    Donnerstag, 12. August 2010 18:01
  • Vielen Dank!Hehe, ok auf die Idee hätte ich auch kommen können, manchmal steht man einfach auf dem Schlauch!

     

    Gruß B

    Donnerstag, 12. August 2010 18:21
  • Hi B,

    schau Dir auch mal Charles Petzolds Artikel zum Thema Using Templates to Customize WPF Controls an - dort findest Du u.a. auch einen vertikalen Progressbar in Form eines Thermometers.

    (Edit) Wusste doch, dass ich auch mal ein Beispiel für einen vertikalen PB gepostet habe - s. diesen Thread . :-)


    Cheers,
    Olaf
    http://blogs.intuidev.com
    Freitag, 13. August 2010 07:24