none
ProgressBar Vertical funktioniert nicht RRS feed

  • Frage

  • 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

    Donnerstag, 18. August 2016 06:46

Antworten

  • 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.

    • Als Antwort vorgeschlagen perlfred Dienstag, 30. August 2016 16:10
    • Als Antwort markiert jclstefan Mittwoch, 31. August 2016 10:46
    Freitag, 26. August 2016 10:10

Alle Antworten

  • 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.

    Freitag, 19. August 2016 06:41
    Moderator
  • 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.

    Freitag, 19. August 2016 07:22
  • 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

    Mittwoch, 24. August 2016 12:34
  • 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.

    Mittwoch, 24. August 2016 16:44
  • 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. :)

    Donnerstag, 25. August 2016 06:23
  • 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.

    Donnerstag, 25. August 2016 20:32
  • 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?

    Freitag, 26. August 2016 09:00
  • 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.

    • Als Antwort vorgeschlagen perlfred Dienstag, 30. August 2016 16:10
    • Als Antwort markiert jclstefan Mittwoch, 31. August 2016 10:46
    Freitag, 26. August 2016 10:10
  • 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

    • Als Antwort markiert jclstefan Donnerstag, 8. September 2016 11:41
    • Tag als Antwort aufgehoben jclstefan Donnerstag, 8. September 2016 11:41
    Mittwoch, 31. August 2016 10:46
  • 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.

    Mittwoch, 31. August 2016 11:07