xaml - 如何在 Metro/WinRT 应用程序的 ListView 项目单击时设置不同的背景颜色?

标签 xaml expression-blend windows-runtime visual-studio-2012 expression-blend-5

我自己通过 Expression Blend 5 Beta 和 Visual Studio 11 Beta 尝试了大约半小时,但无法弄清楚当您单击 ListView 时如何应用不同的背景颜色是一项相当微不足道的任务。标准海军绿色上方带有勾号的项目,这似乎是带有 Windows 8 Consumer Preview 的 WinRT 应用程序的标准版本。

我相信我需要一个 <VisualStateManager/> <DataTemplate/> 中我的 XAML 中的声明我的 ListView(与我在 Button 控件上所做的相同),但无法找到一种方法让“状态”选项卡在 Blend 中运行以开始记录这些操作,而且我不确定要调用什么名称VisualState在我最终弄清楚如何做到这一点之后。

例如,自定义 Pressed Button 的视觉状态在我右键单击并编辑它的控件模板后相当容易,然后我可以访问 Blend 中的“状态”选项卡并开始记录我的按下、禁用、PointerOver 操作等,但使用 ListView 或其他控件似乎并不那么容易?

由于 Blend 5 和 VS 11 都是 Beta 版,因此很难知道 Blend 的 UI 中什么可能只是未编码的功能,或者只是我做错了事!所以我感谢任何人可以提供的任何帮助。
谢谢

最佳答案

选择状态应该是 ItemContainerStyle 的一部分 - 以可视状态或触发器的形式,但 ItemContainerStyle 似乎没有在设计器 View 中公开,因此很难修改它,但您可以添加一个 ListViewItem 到您的 XAML 和设计器会很高兴地告诉您它的样式和模板是什么,以便您可以更改它。

您可以通过设置修改 GridView 或 ListView 中的样式

ItemContainerStyle="{StaticResource ListViewItemStyle1}"

并将这些资源添加到事件资源字典(例如 Page.Resources):
<SolidColorBrush x:Key="ListViewItemHighlightBrush2" Color="Pink" />
<SolidColorBrush x:Key="ListViewItemCheckHintGlyphBrush2" Color="Red" />
<SolidColorBrush x:Key="ListViewItemPointerOverBrush2" Color="Purple" />
<SolidColorBrush x:Key="ListViewItemCheckGlyphBrush2" Color="Yellow" />
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderBrush2" Color="Orange" />
<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
    <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}" />
    <Setter Property="FontSize" Value="{StaticResource ContentFontSize}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="TabNavigation" Value="Local" />
    <Setter Property="IsHoldingEnabled" Value="True" />
    <Setter Property="Margin" Value="0,0,18,0" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <Border x:Name="OuterContainer">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectionBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBorderBrush2}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SelectedBorder">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBorderBrush2}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBorderBrush2}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <TapDownThemeAnimation TargetName="ContentContainer" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDisabledOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="PointerFocused" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionHintStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.65" To="NoSelectionHint" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="VerticalSelectionHint">
                                <Storyboard>
                                    <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="SelectionBackground" ToVerticalOffset="25" />
                                    <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="ContentBorder" ToVerticalOffset="25" />
                                    <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="SelectedCheckMark" ToVerticalOffset="25" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyph" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="HorizontalSelectionHint">
                                <Storyboard>
                                    <SwipeHintThemeAnimation ToHorizontalOffset="-25" TargetName="SelectionBackground" ToVerticalOffset="0" />
                                    <SwipeHintThemeAnimation ToHorizontalOffset="-25" TargetName="ContentBorder" ToVerticalOffset="0" />
                                    <SwipeHintThemeAnimation ToHorizontalOffset="-25" TargetName="SelectedCheckMark" ToVerticalOffset="0" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyph" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="NoSelectionHint" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Selecting">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectingGlyph" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unselecting">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unselected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DragStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.650" To="NotDragging" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="NotDragging" />
                            <VisualState x:Name="Dragging">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDragOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InnerDragContent" />
                                    <DragItemThemeAnimation TargetName="InnerDragContent" />
                                    <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                    <FadeOutThemeAnimation TargetName="SelectedBorder" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="DraggingTarget">
                                <Storyboard>
                                    <DropTargetItemThemeAnimation TargetName="OuterContainer" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MultipleDraggingPrimary">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MultiArrangeOverlayBackground" />
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MultiArrangeOverlayText" />
                                    <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDragOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InnerDragContent" />
                                    <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
                                    <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
                                    <DragItemThemeAnimation TargetName="InnerDragContent" />
                                    <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
                                    <FadeOutThemeAnimation TargetName="SelectedBorder" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MultipleDraggingSecondary">
                                <Storyboard>
                                    <FadeOutThemeAnimation TargetName="ContentContainer" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ReorderHintStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.650" To="NoReorderHint" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="NoReorderHint" />
                            <VisualState x:Name="BottomReorderHint">
                                <Storyboard>
                                    <DragOverThemeAnimation Direction="Bottom" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="TopReorderHint">
                                <Storyboard>
                                    <DragOverThemeAnimation Direction="Top" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="RightReorderHint">
                                <Storyboard>
                                    <DragOverThemeAnimation Direction="Right" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="LeftReorderHint">
                                <Storyboard>
                                    <DragOverThemeAnimation Direction="Left" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="DataVirtualizationStates">
                            <VisualState x:Name="DataAvailable" />
                            <VisualState x:Name="DataPlaceholder">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderTextBlock">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderRect">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="ReorderHintContent" Background="Transparent">
                        <Path x:Name="SelectingGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemHighlightBrush2}" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15" />
                        <Border x:Name="ContentContainer">
                            <Grid x:Name="InnerDragContent">
                                <Border x:Name="HintGlyphBorder" HorizontalAlignment="Right" Height="40" Margin="4" Opacity="0" VerticalAlignment="Top" Width="40">
                                    <Path x:Name="HintGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckHintGlyphBrush2}" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15" />
                                </Border>
                                <Rectangle x:Name="PointerOverBorder" Fill="{StaticResource ListViewItemPointerOverBrush2}" IsHitTestVisible="False" Margin="1" Opacity="0" />
                                <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemKeyboardFocusBrush}" StrokeThickness="2" />
                                <Rectangle x:Name="SelectionBackground" Fill="{StaticResource ListViewItemHighlightBrush2}" Margin="4" Opacity="0" />
                                <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4">
                                    <Grid>
                                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                        <TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Opacity="0" Text="Xg" />
                                        <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderRectBrush}" IsHitTestVisible="False" Visibility="Collapsed" />
                                        <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemHighlightBrush2}" StrokeThickness="{StaticResource ListViewItemSelectedBorderThickness}" />
                                    </Grid>
                                </Border>
                                <Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" Padding="{TemplateBinding BorderThickness}" VerticalAlignment="Top">
                                    <Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40">
                                        <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{StaticResource ListViewItemHighlightBrush2}" Stretch="Fill" />
                                        <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckGlyphBrush2}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15" />
                                    </Grid>
                                </Border>
                                <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundBrush}" IsHitTestVisible="False" Margin="4" Opacity="0" />
                                <TextBlock x:Name="MultiArrangeOverlayText" HorizontalAlignment="Left" IsHitTestVisible="False" Margin="4" Opacity="0" TextWrapping="Wrap" Text="{Binding TemplateSettings.DragItemsCount, RelativeSource={RelativeSource Mode=TemplatedParent}}" VerticalAlignment="Top">
                                    <TextBlock.Style>
                                        <Style TargetType="TextBlock">
                                            <Setter Property="Foreground" Value="White" />
                                            <Setter Property="FontSize" Value="56" />
                                            <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}" />
                                            <Setter Property="FontWeight" Value="Light" />
                                            <Setter Property="HorizontalAlignment" Value="Left" />
                                            <Setter Property="VerticalAlignment" Value="Bottom" />
                                            <Setter Property="Margin" Value="12,0,0,0" />
                                            <Setter Property="TextWrapping" Value="Wrap" />
                                            <Setter Property="TextTrimming" Value="WordEllipsis" />
                                        </Style>
                                    </TextBlock.Style>
                                </TextBlock>
                            </Grid>
                        </Border>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关于xaml - 如何在 Metro/WinRT 应用程序的 ListView 项目单击时设置不同的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10291873/

相关文章:

c# - 仅包含接口(interface)的 WinRT 组件 DLL?

c# UWP - 将字节数组转换为 InMemoryRandomAccessStream/IRandomAccessStream

c# - 如何添加应用栏分隔符

wpf - Blend KeyTrigger 多次触发

expression-blend - 如何在 Expression Blend +Sketchflow 中调整屏幕(或 "canvas")大小?

windows-runtime - 如何获取当前的 LayoutAwarePage?

c# - 如何检索点击的 ListView 行数据和隐藏 id 列

silverlight - 在AutoCompleteBox的Silverlight 4工具箱示例中,如何切换xaml中的下拉列表?

WPF,Visual Studio 的混合?

.net - 跨 CPU 架构从 Windows 10 通用应用程序引用 C Dll