ProgressBar Vertical funktioniert nicht

Question

Hallo,

ich weiß dieses Thema wurde ungefähr 1 Mio. mal durch exerziert, aber es funktioniert einfach nicht.

Mein Code:

<Window.Resources>
 <Style TargetType="{x:Type ProgressBar}">
  <Setter Property="Template">
   <Setter.Value>
    <ControlTemplate TargetType="{x:Type ProgressBar}">
     <Grid x:Name="Root">
      <Border x:Name="PART_Track" BorderBrush="Red" BorderThickness="2" CornerRadius="5" Background="Green"/>
      <Border BorderBrush="Blue" BorderThickness="2" CornerRadius="5" HorizontalAlignment="Left">
       <DockPanel>
        <Rectangle x:Name="PART_Indicator" />
        <Rectangle x:Name="Mask" Background="White" MinWidth="{TemplateBinding Width}" />
       </DockPanel>
      </Border>
     </Grid>

     <ControlTemplate.Triggers>
      <Trigger Property="Orientation" Value="Vertical">
       <Setter Property="LayoutTransform" TargetName="Root">
        <Setter.Value>
         <RotateTransform Angle="270" />
        </Setter.Value>
       </Setter>
       <Setter Property="Width" TargetName="Root" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
       <Setter Property="Height" TargetName="Mask" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
       <Setter Property="MinWidth" TargetName="Mask" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
      </Trigger>
     </ControlTemplate.Triggers>
    </ControlTemplate>
   <Setter.Value>
  </Setter>
 </Style>
</Window.Resources>

<Grid>
 <ProgressBar Height="20" Width="120" Value="70" Orientation="Vertical" />
</Grid>

Es funktioniert einfach nicht. Ich sehe, dass er das dreht aber die Height und Width Werte passen einfach nicht...

Danke

Steve

Answer 1

Hallo Steve,

Würdest Du versuchen, die Fortschrittsanzeige mithilfe der RenderTransform-Eigenschaft zu drehen? Ein Codebeispiel hat Peter Fleischer in diesem Thread veröffentlicht. Hoffentlich hilft Dir auch das Beispiel für die Verwendung von RenderTransform mit einer Steuerelementvorlage aus folgendem Thread weiter:
RenderTransform not working in ControlTemplate

Gruß,
Dimitar

---

Bitte haben Sie Verständnis dafür, dass im Rahmen dieses Forums, welches auf dem Community-Prinzip „IT-Pros helfen IT-Pros“ beruht, kein technischer Support geleistet werden kann oder sonst welche garantierten Maßnahmen seitens Microsoft zugesichert werden können.

Answer 2

Hi Steve,
bei mir funktioniert es. Was ist genau Dein Problem?

<Window x:Class="Window32"
        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:local="clr-namespace:WpfApplication1VB"
        mc:Ignorable="d"
        Title="Window32" Height="300" Width="300">
  <Window.Resources>
    <Style TargetType="{x:Type ProgressBar}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ProgressBar}">
            <Grid x:Name="Root">
              <Border x:Name="PART_Track" BorderBrush="Red" BorderThickness="2" CornerRadius="5" Background="Green"/>
              <Border BorderBrush="Blue" BorderThickness="2" CornerRadius="5" HorizontalAlignment="Left">
                <DockPanel>
                  <Rectangle x:Name="PART_Indicator" />
                  <Rectangle x:Name="Mask" Fill="Red" MinWidth="{TemplateBinding Width}" />
                </DockPanel>
              </Border>
            </Grid>
            <ControlTemplate.Triggers>
              <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="LayoutTransform" TargetName="Root">
                  <Setter.Value>
                    <RotateTransform Angle="270" />
                  </Setter.Value>
                </Setter>
                <Setter Property="Width" TargetName="Root" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
                <Setter Property="Height" TargetName="Mask" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
                <Setter Property="MinWidth" TargetName="Mask" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <Grid>
    <ProgressBar Height="150" Width="20" Value="70" Orientation="Vertical" />
  </Grid>
</Window>

---

--
Viele Grüsse
Peter Fleischer (MVP, Partner)
Meine Homepage mit Tipps und Tricks
Kommas richtig setzen! Leben retten!
Wir essen Opa.
Wir essen, Opa.

Answer 3

Hallo,

naja wenn ich Orientation auf Horizontal stelle, dann wird die Fortschrittsanzeige falsch dargestellt.

Normalerweise sollte Height und Width verdreht werden. (Siehe die Bilder --> Sie sagen bekanntlich mehr als 1000 Worte :) )

Danke für die Hilfe

Steve

Answer 4

Hi Steve,
mein Beispiel mit einem LinearGradientBrush im Part_Indicator-Rectangle sieht so aus:

---

--
Viele Grüsse
Peter Fleischer (MVP, Partner)
Meine Homepage mit Tipps und Tricks
Warum Groß- und Kleinschreibung wichtig ist:
Der Gefangene floh.
Der gefangene Floh.

Answer 5

Hallo Peter,

was passiert wenn du Orientation auf horizontal stellst? wie sieht dann das Ergebnis aus?

<Grid>
    <ProgressBar Height="150" Width="20" Value="70" Orientation="horizontal" />
</Grid>

Stelle ich meine Frage zu unklar? Wenn ja bitte sagen. :)

Answer 6

Hi,
auch wenn ich die ProgressBar horizontal orientiere, zeigt sie bei mir wie gewünscht an:

Hier der XAML:

<Window x:Class="Window32"
        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:local="clr-namespace:WpfApplication1VB"
        mc:Ignorable="d"
        Title="Window32" Height="400" Width="300">
  <Window.Resources>
    <Style TargetType="{x:Type ProgressBar}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ProgressBar}">
            <Grid x:Name="Root">
              <Border x:Name="PART_Track" BorderBrush="Red" BorderThickness="2" CornerRadius="5" Background="Green"/>
              <Border BorderBrush="Blue" BorderThickness="2" CornerRadius="5" HorizontalAlignment="Left">
                <DockPanel>
                  <Rectangle x:Name="PART_Indicator">
                    <Rectangle.Fill>
                      <LinearGradientBrush>
                        <GradientStop Color="Green" Offset="0"/>
                        <GradientStop Color="Yellow" Offset="0.5"/>
                        <GradientStop Color="Red" Offset="1"/>
                      </LinearGradientBrush>
                    </Rectangle.Fill>
                  </Rectangle>
                  <Rectangle x:Name="Mask" Fill="white" MinWidth="{TemplateBinding Width}" />
                </DockPanel>
              </Border>
            </Grid>
            <ControlTemplate.Triggers>
              <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="LayoutTransform" TargetName="Root">
                  <Setter.Value>
                    <RotateTransform Angle="270" />
                  </Setter.Value>
                </Setter>
                <Setter Property="Width" TargetName="Root" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
                <Setter Property="Height" TargetName="Mask" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
                <Setter Property="MinWidth" TargetName="Mask" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <ProgressBar Grid.Row="0" Height="150" Width="20" Value="70" Orientation="Vertical" />
    <ProgressBar Grid.Row="1" Height="20" Width="150" Value="70" Orientation="Horizontal" />
  </Grid>
</Window>

---

--
Viele Grüsse
Peter Fleischer (MVP, Partner)
Meine Homepage mit Tipps und Tricks
Warum Groß- und Kleinschreibung wichtig ist:
Der Gefangene floh.
Der gefangene Floh.

Answer 7

Hallo,

ich möchte eben nur Orientation ändern und nicht die Width & Height auch. Das soll er doch selbst in diesen Zeilen tun.

<Setter Property="Width" TargetName="Root" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
<Setter Property="Height" TargetName="Mask" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
<Setter Property="MinWidth" TargetName="Mask" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />

Oder verstehe ich da was falsch?

Answer 8

Hi Stefan,
ein Steuerelement belegt den Platz (Höhe / Breite), der ihm zugewiesen ist. Nur die Änderung der Orientierung verändert nicht den zugewiesenen Platz. Lediglich mit einem Transform kann man die Darstellung verschieben und drehen. Das hat aber mit der Orientation-Eigenschaft nichts zu tun.

---

--
Viele Grüsse
Peter Fleischer (MVP, Partner)
Meine Homepage mit Tipps und Tricks
Warum Groß- und Kleinschreibung wichtig ist:
Der Gefangene floh.
Der gefangene Floh.

Answer 9

Hallo,

vielen Dank für die Antwort. 
Ich finde es schade, dass es nicht so funktioniert wie ich es mir vorstelle. 
Das ist, in meinen Augen, doch recht häufiges Problem. Ich möchte den Nutzer die Möglichkeit geben, dass er die Height und Width einmal einstellt und dann nur über Orientation, das Steuerelement vertikal oder horizontal zu verändern.

Grüße

Steve

Answer 10

Hi Steve,
wenn der Anwender dem Steuerelement in der Breite nur wenig Platz gibt, wie soll es sich dann horizontal ausdehnen? Ein Steuerelement kann nur den ihm zugewiesenen Platz belegen. Lediglich verschoben und gedreht kann dieser Platz. Stell Dir vor, die Steuerelemente würden den zugewiesenen Platz ignorieren, jedes Steuerelement dehnt sich beliebig aus und verdeckt ein anderes.

---

--
Viele Grüsse
Peter Fleischer (MVP, Partner)
Meine Homepage mit Tipps und Tricks
Warum Groß- und Kleinschreibung wichtig ist:
Der Gefangene floh.
Der gefangene Floh.