Как динамически изменить визуальное поведение элемента управления в XAML

Question

Как динамически изменить визуальное поведение VisualStateManager без изменения визуальной структуры (Внешний вид) существующего элемента управления.

У меня есть сценарий, где у меня есть DataTemplate определяется в ItemsControl сформировать список CheckBoxes и связанные TextBoxes,

XAML:

<DataTemplate>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.2*" />
      <ColumnDefinition Width="0.8*" />
    </Grid.ColumnDefinitions>                        
    <CheckBox Grid.Column="0" x:Name="chkBox" />
    <TextBox Grid.Column="1" x:Name="txtBox" />
  </Grid>
</DataTemplate>

Я хотел скрыть связанные TextBoxes сначала но позже когда CheckBox является Checked связанный TextBox должен появиться. Итак, я написал VisualStateManager но я не знаю точно, как я могу использовать это или достичь желаемого поведения.

VisualStateManager:

<vsm:VisualStateManager.VisualStateGroups>
  <vsm:VisualStateGroup x:Name="CheckStates">
    <vsm:VisualState x:Name="Checked">
      <Storyboard>
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="txtBox" Storyboard.TargetProperty="Visibility">
          <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
              <vsm:Visibility>Collapsed</vsm:Visibility>
            </DiscreteObjectKeyFrame.Value>
          </DiscreteObjectKeyFrame>
         </ObjectAnimationUsingKeyFrames>
      </Storyboard>
      </vsm:VisualState>
      <vsm:VisualState x:Name="Unchecked">
        <Storyboard>
          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="txtBox" Storyboard.TargetProperty="Visibility">
          <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
              <vsm:Visibility>Visible</vsm:Visibility>
            </DiscreteObjectKeyFrame.Value>
          </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
      </Storyboard>
    </vsm:VisualState>
  </vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>

Answer 1

Я не знаю, можете ли вы нацелить свойства другого элемента управления с помощью Visual States - это может быть возможно, но я не уверен, что вы можете.

Вы пытались использовать интерактивность?

Чтобы это работало, вам нужна ссылка на DLL- файл System.Windows.Interactivity (не уверен, где она находится - она ​​может поставляться с Microsoft Expression Blend/Studio). Вам также необходимо импортировать эти:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"             
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

И тогда этот код должен работать, чтобы показать текстовое поле:

<CheckBox Grid.Column="0" x:Name="chkBox">
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="Checked">
       <ei:ChangePropertyAction TargetObject="{Binding ElementName=txtBox}" PropertyName="Visibility" Value="Visible"/>
   </i:EventTrigger>
 </i:Interaction.Triggers>
</Checkbox>

и изменить его обратно:

<i:EventTrigger EventName="UnChecked">
   <ei:ChangePropertyAction TargetObject="{Binding ElementName=txtBox}" PropertyName="Visibility" Value="Collapsed"/>
</i:EventTrigger>

Оба триггера должны быть внутри флажка ЗДЕСЬ. Этот код не проверен, поэтому он может быть не совсем правильным. Если это не сработает, просто выполните поиск по ChangePropertyAction, и вы найдете лучшие примеры, чем этот. Я не уверен, как это отреагирует внутри элемента управления... но я верю, что это сработает.