WP7 + Silverlight에서 어떻게 ListBox Item의 시각적 상태를 변경할 수 있습니까?

Question

내 목록 상자 항목의 시각적 상태를 변경해야합니다. 다음은 시각적 상태를 가진 DataTemplate입니다. 내 환경으로 WP7을 사용하고 있습니다. Heres는

<DataTemplate x:Key="MessageItemTemplate"> 
      <Grid MinWidth="200" MinHeight="90" Width="460" Margin="0,2"> 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup x:Name="Modes"> 
         <VisualStateGroup.Transitions> 
          <VisualTransition GeneratedDuration="0" To="Normal"> 
           <Storyboard> 
            <DoubleAnimation Duration="0:0:0.4" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/> 
           </Storyboard> 
          </VisualTransition> 
          <VisualTransition GeneratedDuration="0"/> 
         </VisualStateGroup.Transitions> 
         <VisualState x:Name="Normal"/> 
         <VisualState x:Name="Edit"> 
          <Storyboard> 
           <DoubleAnimation Duration="0:0:0.7" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/> 
          </Storyboard> 
         </VisualState> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 
       <VisualStateManager.CustomVisualStateManager> 
        <ic:ExtendedVisualStateManager/> 
       </VisualStateManager.CustomVisualStateManager> 
       <StackPanel Orientation="Vertical" d:LayoutOverrides="Width, Height" Canvas.ZIndex="10" Margin="7"> 
        <TextBlock x:Name="tbTitle" Text="{Binding Path=Title, Mode=OneWay}" FontSize="24" VerticalAlignment="Top" Foreground="{StaticResource PhoneContrastBackgroundBrush}" FontWeight="Bold" Height="30" FontFamily="Microsoft New Tai Lue"/> 
        <TextBlock x:Name="tbMessage" Text="{Binding Path=Message, Mode=OneWay}" FontSize="29.333" Foreground="{StaticResource PhoneContrastBackgroundBrush}" Margin="0" FontFamily="Candara" TextWrapping="Wrap" HorizontalAlignment="Left"/> 
       </StackPanel> 
       <Border BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Background="{StaticResource PhoneBackgroundBrush}" CornerRadius="10" /> 
       <Border x:Name="border" BorderThickness="4" CornerRadius="4" BorderBrush="#FFED1212" Opacity="0" > 
        <Grid> 
         <Path Data="M149,0.16666667 L192,36.166332 L189.60141,-2.7298894 z" Fill="#FFED1212" HorizontalAlignment="Right" Margin="0,-3.031,-2.784,38.328" Stretch="Fill" UseLayoutRounding="False" Width="51.629" RenderTransformOrigin="0.5,0.5"> 
          <Path.RenderTransform> 
           <CompositeTransform Rotation="2.523" TranslateX="-0.076551587038494961" TranslateY="-0.0016857129841283403"/> 
          </Path.RenderTransform> 
         </Path> 
         <Image Margin="0" Source="images/pensil.png" Stretch="Fill" Height="26" Width="26" HorizontalAlignment="Right" VerticalAlignment="Top"/> 
        </Grid> 
       </Border> 
      </Grid> 
     </DataTemplate> 

내옵니다 :이 목록 상자의 ItemsSource에 바인딩

<ListBox x:Name="SmsMessagesList" Grid.Row="1" 
       ItemsSource="{Binding Path=Model.Messages}" 
       SelectionChanged="SmsMessagesList_SelectionChanged" 
       ItemTemplate="{StaticResource MessageItemTemplate}"> 
     </ListBox> 

ObservableCollection에는 다음과 같습니다

public ObservableCollection<SmsMessage> Messages; 

    public class SmsMessage : EntityBase 
{ 
    private string _CurrentState; 
    public string CurrentState 
    { 
     get 
     { 
      return _CurrentState; 
     } 
     set 
     { 
      _CurrentState = value; 
      PropertyChangedHandler("CurrentState"); 
     }    
    } 

    private string _Title; 
    public string Title 
    { 
     get 
     { 
      return _Title; 
     } 
     set 
     { 
      _Title = value; 
      PropertyChangedHandler("Title"); 
     } 
    } 

    private string _Message; 
    public string Message 
    { 
     get 
     { 
      return _Message; 
     } 
     set 
     { 
      _Message = value; 
      PropertyChangedHandler("Message"); 
     } 
    } 
} 

내가 '편집'내 목록 상자의 시각적 상태를 변경할 수있는 방법 'CurrentState'속성에 따라 'Normal'이 변경됩니까?

감사합니다.

Answer 1

컨트롤을 제공하여 목록 상자 항목의 컨테이너 역할을하는 경우. VisualStateManage.GoToState(this, "Your State", true);

Answer 2

바인딩 방식을 계속 사용하려면 실제로 유일한 선택은 Blend Behavior입니다. 그러나 Silverlight 3 (및 WP7)은 데이터 바인딩 동작 속성을 지원하지 않기 때문에 경로가 훨씬 복잡해집니다. 그렇습니다, 그것은 PITA이고 그렇습니다, 나는 그들이 다음 주 MIX에서 SL4 기능을 발표하게되기를 바랍니다. 다음은

는 당신에게 행동을 요구하는 것에 대한 아이디어를주고, 같은 일을하는 WPF 행동이지만 인해 위의 문제에 3/WP7 실버에 작동하지 않습니다. State 속성을 Binding 유형으로 변경하고 해당 바인딩 값에 액세스하는 복잡한 과정을 거쳐야합니다. 이 작업을 수행하는 방법의 예는 Patterns & Practices WP7 Dev Guide source 또는 MVVM Light's EventToCommand 인 TailSpin.PhoneClient.Infrastructure.ButtonCommand에서 확인할 수 있습니다.

public class StateManagementBehavior : Behavior<FrameworkElement> 
{ 
    public static readonly DependencyProperty StateProperty = 
     DependencyProperty.Register("State", typeof(string), 
      typeof(StateManagementBehavior), 
      new UIPropertyMetadata(null, PropertyChangedCallback)); 

    public static readonly DependencyProperty UseTransitionsProperty = 
     DependencyProperty.Register("UseTransitions", typeof(bool), 
      typeof(StateManagementBehavior), 
      new UIPropertyMetadata(true)); 

    public static void PropertyChangedCallback(
     DependencyObject d, DependencyPropertyChangedEventArgs e) 
    { 
     var stateManagementBehavior = (StateManagementBehavior)d; 
     stateManagementBehavior.GoToState(); 
    } 

    protected override void OnAttached() 
    { 
     base.OnAttached(); 

     AssociatedObject.Loaded += (s, e) => GoToState(); 
    } 


    private void GoToState() 
    { 
     if (AssociatedObject == null || State == null) return; 

     VisualStateManager.GoToState(AssociatedObject, State, UseTransitions); 
    } 

    public string State 
    { 
     get { return (string)GetValue(StateProperty); } 
     set { SetValue(StateProperty, value); } 
    } 

    public bool UseTransitions 
    { 
     get { return (bool)GetValue(UseTransitionsProperty); } 
     set { SetValue(UseTransitionsProperty, value); } 
    } 
} 

당신이 모든 작업을 얻을 가정하면, 다음과 같은 동작을 사용합니다 : 그냥 내가이 있는지 확신하지 (일하고 있어요 SL4 프로젝트에 이런 일을 얻을 수 있었다

<DataTemplate x:Key="MessageItemTemplate"> 
     <Grid MinWidth="200" MinHeight="90" Width="460" Margin="0,2"> 
      <i:Interactivity.Behaviors> 
       <infrastructure:StateManagementBehavior State="{Binding CurrentState}" 
                 UseTransitions="True" /> 
      </i:Interactivity.Behaviors> 
      <VisualStateManager.VisualStateGroups> 
       ... 
      </VisualStateManager.VisualStateGroups> 

      ... 
     </Grid> 
</DataTemplate> 

Answer 3

을

<i:Interaction.Behaviors> 
    <ei:DataStateBehavior Binding="{Binding IsEditMode}" Value="True" TrueState="Edit" FalseState="Normal"/> 
</i:Interaction.Behaviors> 

:) WP7 작업을하려고하지만해야하므로 원래의 라이브러리가 SL3 위해 만들어진 솔루션은 DataTemplate을 내부 Expression Blend Samples on CodePlex에서 DataStateBehavior를 사용하는 것이 었습니다 두 개 이상의 주를 필요로하는 경우 DataStateSwitchBehavior을 사용할 수도 있습니다.