Vertical Custom Progressbar

Question

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

 

Answer 1

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

Answer 2

Vielen Dank!Hehe, ok auf die Idee hätte ich auch kommen können, manchmal steht man einfach auf dem Schlauch!

 

Gruß B

Answer 3

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