Question

我是WPF的新手，我不知道怎么做我想做的事。

我已经构建了一个我称之为音量控制的自定义控件。它有2个RepeatButtons，1个用于增加Volume属性的值，1个用于减少它，还有一个ProgressBar用于给出当前Volume的可视化表示。该控件具有Orientation类型的名为“Orientation”的属性。当它是水平的时候，我希望控制以一种方式绘制，当它是垂直时，我希望它看起来不同。

在水平模式下，控件将简单地将3个控件放在水平StackPanel中。垂直外观有点复杂，因为它有一个带有2列和1的网格。 2排。 2个RepeatButtons在左侧堆叠在彼此的顶部，而ProgressBar跨越两个行和＆amp;在右边。

我似乎无法弄清楚如何根据Orientation属性的值更改控件的外观。这是我到目前为止所得到的：

<Style x:Key="Horizontal" TargetType="{x:Type cs:VolumeControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type cs:VolumeControl}">
                <StackPanel Orientation="Horizontal">
                    ...
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="Vertical" TargetType="{x:Type cs:VolumeControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type cs:VolumeControl}">
                <Grid>
                    ...
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我知道我需要这样的东西来定义默认模板和Orientation属性的必要触发器：

<Style TargetType="{x:Type cs:VolumeControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type cs:VolumeControl}">
                <ControlTemplate.Triggers>
                    <Trigger Property="Orientation" Value="Horizontal">
                        ???
                    </Trigger>

                    <Trigger Property="Orientation" Value="Vertical">
                        ???
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
        </Setter.Value>
    </Setter>
</Style>

我不知道要在两个Trigger标签中加入什么才能使其正常工作。或者即使我已经把它弄好了。

我查看了ProgressBar的模板，当Orientation设置为Vertical时，它使用RotationTransform垂直绘制控件。我不能这样做，因为意图是以不同的布局绘制控件。

感谢任何帮助。

贝

Answer 1

创建2个控制模板

<ControlTemplate x:Key="Horizontal" TargetType={x:Type cs:VolumeControl}....
<ControlTemplate x:Key="Vertical" TargetType={x:Type cs:VolumeControl}...

然后创建一个样式并使用它来通过触发器切换模板

<Style TargetType={x:Type cs:VolumeControl}>
<Style.Triggers>
   <Trigger Property="Orientation" Value="Horizontal">
      <Setter Property="Template" Value={StaticResource Horizontal}" />
   </Trigger>
   <Trigger Property="Orientation" Value="Vertical">
      <Setter Property="Template" Value={StaticResource Vertical}" />
   </Trigger>
</Style.Triggers>
</Style>

对我来说就像一个魅力：）

Answer 2

拥有像这样的样式可能无法解决问题。您可以使用ContentControl，如下所示：

<Style TargetType="{x:Type cs:VolumeControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type cs:VolumeControl}">
                <ContentControl>
                    <ContentControl.Style>
                        <Style TargetType="{x:Type ContentControl}">
                            <Setter Property="ContentTemplate">
                                <Setter.Value>
                                    <!-- Horizontal Template Here -->
                                </Setter.Value>
                            </Setter>
                            <Style.Triggers>
                                <DataTrigger Binding="{TemplateBinding Orientation}" Value="Vertical">
                                    <Setter Property="ContentTemplate">
                                        <Setter.Value>
                                            <!-- Vertical Template Here -->
                                        </Setter.Value>
                                    </Setter>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ContentControl.Style>
                </ContentControl>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

但我不确定这是否有效以及它是否真的是一个好主意。

属性更改时更改自定义控件的内容模板

2 个答案: