4

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

我相信我需要在我的 ListView<VisualStateManager/>内部的 XAML 中声明<DataTemplate/>（与我在Button控件上所做的相同），但无法找到一种方法让 Blend 中的“状态”选项卡开始记录这些操作，并且此外，VisualState在我最终弄清楚如何做到这一点之后，我不确定该叫什么名字。

例如，在我右键单击并编辑它的控制模板后Pressed，为 a 自定义视觉状态Button相当容易，然后我可以访问 Blend 中的“状态”选项卡并开始记录我的 Pressed、Disabled、PointerOver 操作等，但似乎没有使用 ListView 或可能的其他控件会那么容易吗？

由于 Blend 5 和 VS 11 都是 Beta，因此很难知道 Blend 的 UI 中可能只是一个未编码的功能，或者只是我做错了！因此，我感谢任何人可以提供的任何帮助。谢谢

4

1 回答 1

4

选择状态应该是 ItemContainerStyle 的一部分 - 无论是视觉状态还是触发器的形式，但 ItemContainerStyle 似乎没有暴露在设计器视图中，因此很难修改它，但您可以添加一个 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>
于 2012-04-24T08:35:25.497 回答