在 WP7 + Silverlight 如何更改列表框项的视觉状态？

Question

我需要更改列表框项目的视觉状态。这是具有视觉状态的数据模板。我使用 WP7 作为我的环境。

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

这是我的列表框：

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

我绑定到此列表框的 ItemsSource 的 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”的变化将列表框的视觉状态更改为“编辑”和“正常”？

谢谢

Answer 1

只是设法在我正在工作的 SL4 项目上实现这种情况（所以不确定它是否能在 WP7 上工作，但原始库是为 SL3 制作的，所以应该），解决方案是使用 DataStateBehaviorDataStateBehavior code> 来自 CodePlex 上的表达式混合示例 DataTemplate：

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

如果需要2个以上的状态，还可以使用DataStateSwitchBehavior。

Answer 2

如果您想坚持使用绑定方法，您唯一真正的选择是 混合行为。但是，由于 Silverlight 3（以及 WP7）不支持数据绑定行为属性，因此您的路径要复杂得多。是的，它是 PITA，是的，我希望他们能在下周的 MIX 上宣布 SL4 功能。

下面是执行相同操作的 WPF 行为，让您了解该行为所需的内容，但它在 Silverlight 3 / WP7 中无法工作，因为上述问题。您需要将 State 属性更改为 Binding 类型，并完成访问该绑定值的复杂过程。您可以在 TailSpin.PhoneClient.Infrastruct.ButtonCommand 中查看如何执行此操作的示例=15718049-f993-4d54-ba7b-72e0e82c16cd&displaylang=en" rel="nofollow">模式 &实践 WP7 开发指南来源 或来自 MVVM Light 的 EventToCommand。

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); }
    }
}

假设您一切正常，您将使用如下行为：

<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

如果您提供一个控件来充当列表框项目的容器。然后，您可以使用 VisualStateManage.GoToState(this, "Your State", true); 将更改状态的逻辑添加到该控件的代码中；