UWP - VisualStates 选择状态“已选择和未选择"；在 ListviewItem 样式中不起作用 [英] UWP - VisualStates SelectionStates "Selected and Unselected" is not working in ListviewItem Style
问题描述
我正在开发 UWP Win10 VS2015 应用程序，并在 ListviewItem 样式中使用 VisualStates ......我在 FocusStates 中有动画/故事板，它工作正常，但问题是当我们在 Listview 外部单击时，我们失去了焦点，然后动画结束.
I am developing UWP Win10 VS2015 App, and using VisualStates in ListviewItem Styles ... I have animations/storyboard in the FocusStates and it works fine, but the problem is when we click outside the Listview so we Lost the Focus and then the animation ended.
实际上我需要在 Selected visualState 上开始动画并在 Unselected visualState 上结束动画.动画工作正常，但仅适用于 PointerOver、PointerPressed、PointerFocused、Unfocused 等，但我需要在 Selected 和 Unselected 视觉状态上使用它.
Actually I need to start the animation on Selected visualState and end the animation on Unselected visualstate. The animation is working fine but only on PointerOver, PointerPressed, PointerFocused, Unfocused etc but I need it on Selected and Unselected visualstates.
当我点击 ListviewItem 时，色带向右展开，当我点击另一个项目时，以前聚焦的 ListviewItem 的色带折叠，当前聚焦的色带被扩展.我已经这样做了，它在 FocusStates Visualstates(PointerFocus)/Unfocus) 但问题是当我什至在 Listview 外部单击时，Colorband 折叠，因为它失去焦点并且 Unfocus 视觉状态被触发...在我单击另一个列表视图项之前，它不会 LostFocus.请帮忙.
When I click on ListviewItem the Colorband Expand to the Right and when I click on another Item the Previously focused ListviewItem's Colorband is Collapsed and the Currently focused Colorband is Expanded.. I have done this and it works fine on FocusStates Visualstates(PointerFocus/Unfocus) but the Problem is When I even click outside the Listview so the Colorband Collapsed because it Lost Focus and the Unfocus visualstate triggered...but I need this on Selected/Unselected visualstates, so that even when we click outside the Listview item it will not LostFocus until I clicked on another listview Item. Plz help.
Colorband 的 Storyboard 和所有 Visualstates 都在样式代码中.正如我上面所说，这段代码和动画在给定的样式代码下工作正常，但是如果我删除 FocusStates ...它不会在 SelectionStates 上工作......我需要它在 SelectionStates 上.
The Storyboard for Colorband and all the Visualstates are inside the style code. As I told above that this code and animations working fine with the given Style Code, but if I remove the FocusStates ... it will not work on SelectionStates ... And I need it on SelectionStates.
推荐答案
listview 自定义选中和未选中状态的样式
Style for listview custom selected and unselected states
<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="12,0,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid x:Name="ContentBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CustomStates">
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" From="60" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="colorBand" EnableDependentAnimation="True">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="CustomSelected">
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" From="1" To="60" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="colorBand" EnableDependentAnimation="True">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
</VisualState>
<VisualState x:Name="PointerOver">
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Selected">
</VisualState>
<VisualState x:Name="PressedSelected">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="colorBand"
Background="Red"
HorizontalAlignment="Left"
Width="15"
Height="20"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<CompositeTransform/>
</Border.RenderTransform>
</Border>
<!--<Rectangle x:Name="BorderBackground"
IsHitTestVisible="False"
Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}"
Opacity="0"
Control.IsTemplateFocusTarget="True"/>-->
<Grid x:Name="ContentPresenterGrid"
Background="Transparent"
Margin="0,0,0,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform"/>
</Grid.RenderTransform>
<ContentPresenter x:Name="ContentPresenter"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
</Grid>
<!-- The 'Xg' text simulates the amount of space one line of text will occupy.
In the DataPlaceholder state, the Content is not loaded yet so we
approximate the size of the item using placeholder text. -->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
背后的代码
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems != null)
{
foreach (var item in e.AddedItems)
{
Debug.WriteLine(item);
ListViewItem litem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
if (litem != null)
{
VisualStateManager.GoToState(litem, "CustomSelected", true);
}
}
}
if (e.RemovedItems != null)
{
foreach (var item in e.RemovedItems)
{
ListViewItem litem = (sender as ListView).ContainerFromItem(item) as ListViewItem;
if (litem != null)
{
VisualStateManager.GoToState(litem, "Unselected", true);
}
}
}
}
这篇关于UWP - VisualStates 选择状态“已选择和未选择"；在 ListviewItem 样式中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
