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:
使用 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屋!