Windows应用商店更改ItemTemplate OnClick /动态

Question

I have a ListView which has an ItemTemplateSelector that selects a template based on the data it gets from the service. In this case it is a list of items that have a Read vs Unread state. The selector works well on loading, but how can I change the template when an user clicks the item? Obviously I want the template to change when a user "reads" the data.

View.xaml:

<Page.Resources>
    <selectors:MyItemTemplateSelector x:Key="NoteItemTemplateSelector" 
                                      ReadTemplate="{StaticResource MyReadTemplate}"
                                      UnreadTemplate="{StaticResource MyUnreadTemplate}"/>
</Page.Resources>

<ListView x:Name="ListView1"
         ItemTemplateSelector="{StaticResource MyItemTemplateSelector}"/>

Answer 1

You have to build it in to your template. I suggest creating a custom UserControl for your data, which, when clicked/tapped/selected, hides the 'Unread' version and shows the 'Read' version. You can bind the starting state to the data itself, or the ViewModel for the data. Something like:

<UserControl xmlns...>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="DisplayStates">
                <VisualState x:Name="Read">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ReadContent">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UnreadContent">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unread">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UnreadContent">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ReadContent">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid x:Name:"UnreadContent">
            <!--What it looks like when Unread-->
        </Grid>
        <Grid x:Name:"ReadContent">
            <!--What it looks like when Unread-->
        </Grid>
    </Grid>
</UserControl>

Then, in the codebehind of your Usercontrol, declare a DependencyProperty (you can use the code snippet 'propdp'):

public bool HasBeenRead
{
    get { return (bool)GetValue(HasBeenReadProperty); }
    set { SetValue(HasBeenReadProperty, value); OnHasBeenReadChanged(this, value); }
}

// Using a DependencyProperty as the backing store for HasBeenRead.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty HasBeenReadProperty =
    DependencyProperty.Register("HasBeenRead", typeof(bool), typeof(MyNewUserControl), new PropertyMetadata(false, OnHasBeenReadChanged));

Then, create your PropertyChanged method to switch visual states!

private static void OnHasBeenReadChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    if ((bool)e.NewValue)
    {
        VisualStateManager.GoToState(d as Control, "Read", true);
    }
    else
    {
        VisualStateManager.GoToState(d as Control, "Unread", true);
    }
}

This should load properly, especially with the default value being false, but just in case it isn't, you may need to hook in to the control's Loaded event and set the VisualState to Unread from there.

Lastly, you only need one Item Template, so get rid of the selector and just do:

<ListView.ItemTemplate>
    <DataTemplate>
        <!-- You'll have to import the namespace. Also, assumes that the item -->
        <!-- (or Item VM) has a "HasBeenRead" bool property -->
        <namespacewheremycontrolis:MyReadUnreadControl HasBeenRead="{Binding HasBeenRead}"/>
    </DataTemplate>
</ListView.ItemTemplate>

Oh! There's actually one more thing to do. Your ListView has to tell the item that it's been selected! Add a SelectionChanged EventHandler (it will basically generate one for you).

private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if(sender != null && sender is ListView)
    {
        if(e.AddedItems.Count > 0)
            (e.AddedItems[0] as MyDataOrDataVMClass).HasBeenRead = true;
    }
}

Your Data/VM class will need to implement INotifyPropertyChanged. If you're using a data VM, it should already do this.

Happy Coding!