XAML ListView - 更改所选项目的图像源 [英] XAML ListView - Change Image Source for selected item

问题描述

我正在使用带有自定义模板的 ListView，如下所示:

I'm using a ListView with a Custom Template, something like this:

<ListView.ItemTemplate>
    <DataTemplate>
        <Grid HorizontalAlignment="Center" Width="220" Height="220">
            <Image x:Name="image" Stretch="UniformToFill" 
                    Source="{Binding Brand.Image, 
                             ConverterParameter=transparent, 
                             Converter={StaticResource LogoToUriConverter}}"/>
            <StackPanel VerticalAlignment="Bottom">
                <TextBlock Text="{Binding Name}" 
                            Foreground="{StaticResource ApplicationColor}" 
                            Style="{StaticResource TitleTextStyle}" 
                            Height="30" Margin="15,0,15,0"/>
                <TextBlock Text="{Binding Name}" 
                            Foreground="{StaticResource ApplicationColor}" 
                            Style="{StaticResource CaptionTextStyle}" 
                            TextWrapping="NoWrap" Margin="15,0,15,10"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

现在选择项目时，我希望将所选项目的图像源更改为新的图像.

Now when an Item is selected I would like to have the image source for selected item changed to a new one.

Brand.Image 不是 DependencyProperty，因为它来自外部 DataObject.

Brand.Image is not a DependencyProperty because it comes from an external DataObject.

所以，我认为在 WPF 中我可以使用触发器来手动更改它.

So, I think that in WPF I could use a Trigger to change it manually.

但由于在 winRT 中它不再起作用，我研究了 VSM，但我不知道如何才能做到这一点.

But since in winRT it does not work anymore, I've looked into VSM, but I'm not figuring out how can I accomplish that.

有人可以给我一个真实的例子吗?

Can someone provide me a real example how could it be done?

谢谢

推荐答案

我能够以一种棘手的方式解决这个问题，但我得到了它的工作:

I was able to solve this, in a tricky way, but I got it to work:

1. 使用 ExtendedVisualStateManager，(通过 ExpressionBlend dll 可用于 .NET，但不适用于 WinRT，所以我从这里得到它:http://nroute.codeplex.com/SourceControl/changeset/69480#nRoute5/nRoute.Framework.Metro/Components/ExtendedVisualStateManager.cs)

我只是捕获了一个 OnSelected 事件并使用新的 VisualStateManager 来执行此操作:

Having that I just catch an OnSelected Event and use the new VisualStateManager to do that:

ExtendedVisualStateManager.GoToElementState(sender as Grid, "Selected2", true);

ExtendedVisualStateManager.GoToElementState(sender as Grid, "Selected2", true);

这是 ItemTemplate 的完整 XAML:

Here's the full XAML for the ItemTemplate:

<DataTemplate>
<Grid x:Name="ItemGrid" HorizontalAlignment="Center" Width="220" Height="220" PointerPressed="GridItemTapped">
    <Image x:Name="image" Stretch="UniformToFill" Source="{Binding Brand.Name, ConverterParameter=white, Converter={StaticResource LogoToUriConverter}}"/>
    <Image x:Name="image_colored" Stretch="UniformToFill" Visibility="Collapsed" Source="{Binding Brand.Name, ConverterParameter=colored, Converter={StaticResource LogoToUriConverter}}"/>
    <StackPanel VerticalAlignment="Bottom">
        <TextBlock Text="{Binding Name}" Foreground="White" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
        <TextBlock Text="{Binding Name}" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
    </StackPanel>
    <VisualStateManager.CustomVisualStateManager>
        <vsm:ExtendedVisualStateManager/>
    </VisualStateManager.CustomVisualStateManager>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SelectionStates">
            <VisualState x:Name="Selected2">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00.0000000">
                            <DiscreteObjectKeyFrame.Value>
                                Collapsed
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_colored" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00.0000000">
                            <DiscreteObjectKeyFrame.Value>
                                Visible
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

希望这可以帮助任何有同样问题的人.

Hope this can help anybody with the same issue.

如果您有更好、更简单的方法在 WinRT 中实现相同的结果，请提出您的解决方案.

If you have a better and easier way to achieve the same result in WinRT, please present your solution.

谢谢

这篇关于XAML ListView - 更改所选项目的图像源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！