Как оживить элемент внутри родителя в WPF

Я создал собственный шаблон стиля/управления для элемента управления ToggleButton, который делает его похожим на Toggle Switch.Как оживить элемент внутри родителя в WPF

В настоящее время я использую Trigger on IsChecked, чтобы установить HorizontalAlignment переключателя влево или вправо.

Однако это не очень хороший пользовательский интерфейс.

Когда элемент управления переходит в проверенное визуальное состояние, я хочу, чтобы переключатель был анимирован/сдвинут вправо, а когда он переходит в визуальное состояние Unchecked, я хочу, чтобы переключатель анимировал/сдвинулся влево.

Вот суперпростой взгляд на XAML в шаблоне управления.

<Grid x:Name="RootElement"> 
    ... 
    <Grid x:Name="SwitchElement"> 
     <Grid.RenderTransform> 
      <TranslateTransform/> 
     </Grid.RenderTransform> 
     ... 
    </Grid> 
</Grid>

Как я могу идти о создании раскадровки/анимации для SwitchElement так, что он переводит к вписываться в ширину RootElement?

Я ценю вашу помощь!

источник

2015-04-21 keithernet

Что вы подразумеваете под контролем/неконтролируемым визуальным состоянием? Вы имеете в виду, что у вас есть флажок, который будет показывать/скрывать элемент или при каких обстоятельствах вы хотите, чтобы поле переключало позиции? – CalebB

В ControlTemplate есть VisualStateManager, который использует VisualStateGroups для организации отдельных VisualState (s). Для элемента управления ToggleButton существуют два визуальных состояния, когда элемент управления «Проверено» или «Отключено». – keithernet

Отредактировано, чтобы сделать мою цель надежно яснее. – keithernet

Я не думаю, что грид действительно соответствует вашим потребностям, может быть, вы пытаетесь что-то вроде DockPanel и Trigger для перемещения SwitchElement в Dock.Right

Что-то вроде этого:

<ToggleButton> 
     <ToggleButton.Template> 
      <ControlTemplate TargetType="ToggleButton"> 
       <Border Width="50" Height="25" Background="Transparent"> 
        <Canvas> 
         <Ellipse Name="SliderElement" DockPanel.Dock="Left" Fill="Red" Canvas.Left="0" Height="25" Width="25"> 
         </Ellipse> 
        </Canvas> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsChecked" Value="True"> 
         <Trigger.EnterActions> 
          <BeginStoryboard > 
           <Storyboard> 
            <DoubleAnimation To="25" Duration="0:0:0.4" 
                Storyboard.TargetName="SliderElement" Storyboard.TargetProperty="(Canvas.Left)"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </Trigger.EnterActions> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </ToggleButton.Template> 
    </ToggleButton>

источник

2015-04-21 21:21:41 Console

Я уже установил свойство HorizonalAlignment влево или вправо в зависимости от свойства IsChecked, но это не очень хороший пользовательский интерфейс. Будет лучше, если SwitchElement будет анимировать/перемещаться вперед и назад. Это проблема, которую я пытаюсь решить. – keithernet

@keithernet Я реорганизовал это, чтобы использовать анимацию и переместить эллипс в холст. вы также можете анимировать свой перевод Transform вашего примера. Вы просто должны назвать это. И установите Storyboard.TargetName – Console

Ответ на эта проблема заключалась в том, чтобы создать анимацию в коде и применить ее как поведение. Проблема в том, что анимации в XAML не могут быть динамическими и использовать Bindings, потому что они заморожены во время выполнения.

Создав мою анимацию слайдов в коде, я смог использовать привязку, которая смотрела на ActualWidth родителя.

Я расширил это поведение до полноценного поведения анимации, которое я могу использовать во многих других местах.

источник

2015-07-02 13:47:26 keithernet

Как оживить элемент внутри родителя в WPF

ответ

Смежные вопросы