Изменение шаблона содержимого пользовательского элемента управления при изменении свойства - PullRequest
Новая
       21

Изменение шаблона содержимого пользовательского элемента управления при изменении свойства

2 голосов
/ 19 июля 2011

Я довольно новичок в WPF и не знаю, как делать то, что хочу.

Я создал пользовательский элемент управления, который я называю регулятором громкости. В нем есть 2 кнопки RepeatButtons, 1 для увеличения значения свойства Volume, 1 для его уменьшения и ProgressBar для визуального представления текущего тома. Элемент управления имеет свойство «Ориентация» типа Ориентация. Когда он горизонтальный, я хочу, чтобы элемент управления отображался в одном направлении, а когда он вертикальный, он должен выглядеть по-другому.

В горизонтальном режиме элемент управления просто поместит 3 элемента управления в горизонтальную панель стека. Вертикальный вид немного сложнее, так как в нем есть Grid с 2 столбцами и 2 рядами. 2 кнопки RepeatBack расположены друг над другом слева, а индикатор 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, который использует RotationTransform для рисования элемента управления по вертикали, когда для Orientation установлено значение Vertical. Я не могу этого сделать, поскольку намерение состоит в том, чтобы нарисовать элемент управления в другом макете.

Любая помощь приветствуется.

Tony

Ответы [ 2 ]

5 голосов
/ 04 января 2012

создать 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>

работает для меня как шарм:)

0 голосов
/ 19 июля 2011

Подобное гнездо стилей, вероятно, не сработает. Вы могли бы использовать 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>

Однако я не уверен, что это работает и действительно ли это хорошая идея.

...