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

Question

我对 WPF 还很陌生，我不确定如何做我想做的事情。

我构建了一个自定义控件，我称之为音量控件。它有 2 个重复按钮，1 个用于增加 Volume 属性的值，1 个用于减小它，以及一个 ProgressBar，用于提供当前 Volume 的可视化表示。该控件有一个名为“Orientation”的类型为 Orientation 的属性。当它是水平时，我希望控件以一种方式绘制，而当它是垂直时，我希望它看起来不同。

在水平模式下，控件将简单地将 3 个控件放在水平 StackPanel 中。 Vertical 的外观有点复杂，因为它有一个 Grid，它有 2 列和 2 行。 2 个重复按钮在左侧堆叠在一起，而 ProgressBar 跨越两行并位于右侧。

我似乎无法弄清楚如何根据 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>

但是我不确定这是否可行，以及它是否真的是一个好主意。