Windows phone 8.1 WP8.1 XAML-如何在选中GridView项时使其显示?
我试图在GridView(Windows Phone 8.1 C#/XAML应用程序)中突出显示所选项目。我使用Blend提取了GridViewItemStyle,它包含以下内容:Windows phone 8.1 WP8.1 XAML-如何在选中GridView项时使其显示?,windows-phone-8.1,winrt-xaml,Windows Phone 8.1,Winrt Xaml,我试图在GridView(Windows Phone 8.1 C#/XAML应用程序)中突出显示所选项目。我使用Blend提取了GridViewItemStyle,它包含以下内容: <Border x:Name="SelectedBorder" BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" BorderThickness="{ThemeResource GridViewItemMultisele
<Border x:Name="SelectedBorder" BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}" IsHitTestVisible="False" Opacity="0">
<Grid x:Name="SelectedCheckMark" HorizontalAlignment="Right" Height="34" Opacity="0" VerticalAlignment="Top" Width="34">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
<Path x:Name="SelectedGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="14.5" Margin="0,1,1,0" Stretch="Fill" VerticalAlignment="Top" Width="17"/>
</Grid>
</Border>
我已经定义了这个XAML使用的画笔颜色,并临时将不透明度设置为1,以便检查它是否应该显示。到目前为止,一切顺利
同一样式定义中还有一个视觉状态组:
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
但是当一个项目被选中时,它不会获得视觉指示器。显示指示器的XAML显然在工作,所以我试图理解为什么VisualState组不工作,特别是因为它是直接从混合中产生的
GridView的定义如下所示:
<GridView
AutomationProperties.AutomationId="ItemListViewSection2"
AutomationProperties.Name="Items In Group"
SelectionMode="Single"
IsItemClickEnabled="True"
ItemsSource="{Binding GroupMembers}"
ItemTemplate="{StaticResource Individual80ItemTemplate}"
ItemContainerStyle="{StaticResource GridViewItemStyle1}"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True"
SelectionChanged="itemView_SelectionChanged"
Loaded="itemGridView_Loaded"/>
更新:如果我将SelectionMode从Single更改为Multiple,那么好的一面是SelectedArmark和SelectedGlyph现在在选择每个项目时都会出现。。。不过,坏的是,SelectedBorder对于所有条目都是可见的,这似乎是由另一个可视状态填充器触发的:
<VisualStateGroup x:Name="MultiSelectStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ListMultiSelect" GeneratedDuration="0:0:0.15" To="NoMultiSelect"/>
<VisualTransition From="NoMultiSelect" GeneratedDuration="0:0:0.15" To="ListMultiSelect"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="NoMultiSelect"/>
<VisualState x:Name="ListMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="CheckboxContainerTranslateTransform"/>
<DoubleAnimation Duration="0" To="{ThemeResource ListViewItemContentTranslateX}" Storyboard.TargetProperty="X" Storyboard.TargetName="ContentBorderTranslateTransform"/>
</Storyboard>
</VisualState>
<VisualState x:Name="GridMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
我似乎能够解决这个问题的唯一方法是从样式中删除这些视觉状态,或者修改边框XAML,使其基本上不绘制边框。的耻辱在于我不能使用内置样式;我基本上要提供我自己的风格。我想,经过深思熟虑,这可能不是一件坏事。。。一旦你掌握了项目样式如何工作的诀窍,以及setter等。使用FocusStates而不是SelectionStates
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="PointerFocused">
<Storyboard>
<DoubleAnimation Duration = "0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration = "0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<DoubleAnimation Duration = "1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration = "1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
希望这能奏效。如果没有,那么您可以定义自己的自定义状态并在代码隐藏中使用它
我也有同样的问题。参考我的问题和答案。
这里是listviewitem样式,我对其进行了调整以获得所需的结果
<Style x:Key="MyListViewItemStyle"
TargetType="ListViewItem">
<Setter Property="FontFamily"
Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize"
Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="TabNavigation"
Value="Local" />
<Setter Property="IsHoldingEnabled"
Value="False" />
<Setter Property="Margin"
Value="{ThemeResource ListViewItemMargin}" />
<Setter Property="HorizontalContentAlignment"
Value="Left" />
<Setter Property="VerticalContentAlignment"
Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="OuterContainer"
Background="Transparent"
Margin="0,5,0,5"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<ScaleTransform x:Name="ContentScaleTransform" />
</Border.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed"
To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="TiltContainer" />
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="TiltContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="CheckboxPressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="CheckboxTiltContainer" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
To="{ThemeResource ListViewItemDisabledThemeOpacity}"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="contentPresenter" />
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Stroke"
Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="SelectedEarmark">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="SelectedGlyph">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="CheckGlyph" />
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedCheckMark" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="CheckGlyph" />
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedCheckMark" />
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedBorder" />
</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"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PlaceholderRect">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="MultiSelectStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ListMultiSelect"
GeneratedDuration="0:0:0.15"
To="NoMultiSelect" />
<VisualTransition From="NoMultiSelect"
GeneratedDuration="0:0:0.15"
To="ListMultiSelect" />
</VisualStateGroup.Transitions>
<VisualState x:Name="NoMultiSelect" />
<VisualState x:Name="ListMultiSelect">
<Storyboard></Storyboard>
</VisualState>
<VisualState x:Name="GridMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedBorder" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderModeStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ReorderEnabled"
GeneratedDuration="00:00:00.2"
To="ReorderDisabled" />
</VisualStateGroup.Transitions>
<VisualState x:Name="ReorderEnabled">
<Storyboard>
<DropTargetItemThemeAnimation Storyboard.TargetName="OuterContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="Reorderable">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="ContentScaleTransform">
<LinearDoubleKeyFrame KeyTime="00:00:00.075"
Value="1.05" />
<LinearDoubleKeyFrame KeyTime="00:00:00.2"
Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY"
Storyboard.TargetName="ContentScaleTransform">
<LinearDoubleKeyFrame KeyTime="00:00:00.075"
Value="1.05" />
<LinearDoubleKeyFrame KeyTime="00:00:00.2"
Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReorderDisabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"
To="NoReorderHint" />
</VisualStateGroup.Transitions>
<VisualState x:Name="NoReorderHint" />
<VisualState x:Name="BottomReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Bottom"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
<VisualState x:Name="RightReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Right"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
<VisualState x:Name="TopReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Top"
ToOffset="0"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
<VisualState x:Name="LeftReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Left"
ToOffset="0"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ReorderHintContent"
Background="Transparent">
<Border x:Name="CheckboxTiltContainer"
HorizontalAlignment="Left"
Margin="{ThemeResource ListViewItemMultiselectCheckBoxMargin}"
VerticalAlignment="Top">
<Border x:Name="CheckboxOuterContainer">
<Border.Clip>
<RectangleGeometry Rect="0,0,25.5,25.5" />
</Border.Clip>
<Grid x:Name="CheckboxContainer">
<Grid.RenderTransform>
<TranslateTransform x:Name="CheckboxContainerTranslateTransform"
X="{ThemeResource ListViewItemContentOffsetX}" />
</Grid.RenderTransform>
<Rectangle x:Name="NormalRectangle"
Fill="{ThemeResource CheckBoxBackgroundThemeBrush}"
Height="25.5"
Stroke="{ThemeResource CheckBoxBorderThemeBrush}"
StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
Width="25.5" />
<Path x:Name="CheckGlyph"
Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z"
Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
FlowDirection="LeftToRight"
HorizontalAlignment="Center"
Height="17"
IsHitTestVisible="False"
Opacity="0"
Stretch="Fill"
StrokeThickness="2.5"
StrokeLineJoin="Round"
VerticalAlignment="Center"
Width="18.5" />
</Grid>
</Border>
</Border>
<Border x:Name="ContentContainer">
<Border x:Name="TiltContainer">
<Border x:Name="ContentBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Border.RenderTransform>
<TranslateTransform x:Name="ContentBorderTranslateTransform" />
</Border.RenderTransform>
<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"
AutomationProperties.AccessibilityView="Raw"
Foreground="{x:Null}"
IsHitTestVisible="False"
Margin="{TemplateBinding Padding}"
Opacity="0"
Text="Xg" />
<Rectangle x:Name="PlaceholderRect"
Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
IsHitTestVisible="False"
Visibility="Collapsed" />
</Grid>
</Border>
</Border>
</Border>
<Border x:Name="SelectedBorder"
BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}"
IsHitTestVisible="False"
Opacity="0">
<Grid x:Name="SelectedCheckMark"
HorizontalAlignment="Right"
Height="34"
Opacity="0"
VerticalAlignment="Top"
Width="34">
<Path x:Name="SelectedEarmark"
Data="M0,0 L40,0 L40,40 z"
Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
Stretch="Fill" />
<Path x:Name="SelectedGlyph"
Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z"
Fill="{ThemeResource ListViewItemCheckThemeBrush}"
FlowDirection="LeftToRight"
HorizontalAlignment="Right"
Height="14.5"
Margin="0,1,1,0"
Stretch="Fill"
VerticalAlignment="Top"
Width="17" />
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>