1

如何在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,但我不知道如何使用它或实现所需的行为。

视觉状态管理器:

<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>
4

1 回答 1

2

我不知道您是否可以使用 Visual States 来定位另一个控件的属性 - 这可能是可能的,但我不确定您是否可以。

您是否尝试过使用交互性?

为此,您需要引用System.Windows.Interactivity DLL(不确定它的位置 - 它可能与 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>

两个触发器都应该在复选框 < checkbox > HERE </checkbox > 内。此代码未经测试,因此可能不完全正确。如果它不起作用,只需搜索 ChangePropertyAction,您会找到比这个更好的示例。我不确定这将如何在 itemscontrol 内部做出反应......但我相信它会起作用。

于 2012-02-13T17:42:12.847 回答