Question

你能帮忙设计一个纯色的垂直进度条吗？我已经能够创造这种风格

<Style TargetType="{x:Type ProgressBar}" x:Key="{x:Type ProgressBar}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ProgressBar}">
        <Grid>
          <Rectangle Name="PART_Track" StrokeThickness="1" >
            <Rectangle.Fill>
              <SolidColorBrush Color="#FF00FF00"></SolidColorBrush>
            </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>

但它仍然是水平定向的，我不知道如何改变它。

Answer 1

默认模板中有一个ControlTemplate.Triggers。该触发器将角度旋转-90°。

如果你添加

     <ControlTemplate.Triggers>
                            <Trigger Property="Orientation" Value="Vertical">
                                <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                                    <Setter.Value>
                                        <RotateTransform Angle="-90"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
     </ControlTemplate.Triggers>

到您的控件并命名父级网格“TemplateRoot”，您可以设置方向。

这是你的模板

    <Style TargetType="{x:Type ProgressBar}" x:Key="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid x:Name="TemplateRoot">
                        <Rectangle Name="PART_Track" StrokeThickness="1" >
                            <Rectangle.Fill>
                                <SolidColorBrush Color="#FF00FF00"></SolidColorBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <DockPanel Margin="1">
                            <Rectangle Name="PART_Indicator">
                            </Rectangle>
                            <Rectangle Name="Mask" MinWidth="{TemplateBinding Width}" Fill="#C0C0C0"/>
                        </DockPanel>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Orientation" Value="Vertical">
                            <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                                <Setter.Value>
                                    <RotateTransform Angle="-90"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Wpf垂直进度条样式

1 个答案: