win10 UWP ListView

横向布局

默认 ListView 是垂直,那么如何让 ListView 水平?

可以使用下面代码

            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"></StackPanel>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

设置代码可以进行横向。

如果发现 UWP ListView 横向没有滚动条,可以使用 ScrollViewer 添加

            <ListView  ScrollViewer.VerticalScrollBarVisibility="Disabled"  
                       ScrollViewer.HorizontalScrollBarVisibility="Auto"
                       ScrollViewer.HorizontalScrollMode="Enabled"                  
                       ScrollViewer.VerticalScrollMode="Disabled">

使用从左到右放元素

实际上 ItemsPanelTemplate 可以放很多个类型,如 WrapGrid 和 ItemsWrapGrid ,下面我告诉大家如何做出这个效果

  <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid Orientation="Horizontal"></ItemsWrapGrid>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>                                                                                                            

这时可以设置元素的宽度,或者高度,这样可以做出下面的效果。

选中显示元素

有一些元素是要 Item 选中显示,不选中不显示

如何绑定到Item 的状态,是否被选中?

如果可以写在后台代码多的话,一个简单的方法是在SelectionChanged直接让 AddItems 的显示,其他不显示。

如何想要定义样式,可以参见:https://msdn.microsoft.com/en-us/library/windows/apps/mt299136.aspx

首先把代码复制下来,然后修改 Selected 的动画,添加自己元素在ControlTemplate,看起来就是

                       <ControlTemplate TargetType="ListViewItem">
                        <Grid>
                            <ContentPresenter ></ContentPresenter>
                            <Button x:Name="b" Opacity="0" HorizontalAlignment="Center" Content="显示"></Button>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <!--<VisualState x:Name="Unselecting">
                                        <Storyboard BeginTime="0:0:0">
                                            <DoubleAnimation Storyboard.TargetName="b"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0:0:0.1"
                                                     To="0" />
                                        </Storyboard>
                                    </VisualState>-->
                                    <VisualState x:Name="Unselected">
                                        <Storyboard BeginTime="0:0:0">
                                            <DoubleAnimation Storyboard.TargetName="b"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="0" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard BeginTime="0:0:0">
                                            <DoubleAnimation Storyboard.TargetName="b"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>

上面代码的元素 b 就是加上去的元素,参见他的做法,可以看到这个方法可以在 选择时显示,但是我无法在不选择时隐藏,原因没找到。

根据上面代码,可以做很小修改,在选择改变时,手动使用变化。

首先把 Selected 改为 CustomSelected 现在的代码换为

                        <ControlTemplate TargetType="ListViewItem">
                        <Grid>
                            <ContentPresenter ></ContentPresenter>
                            <Button x:Name="b" Opacity="0" HorizontalAlignment="Center" Content="显示"></Button>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <!--<VisualState x:Name="Unselecting">
                                        <Storyboard BeginTime="0:0:0">
                                            <DoubleAnimation Storyboard.TargetName="b"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0:0:0.1"
                                                     To="0" />
                                        </Storyboard>
                                    </VisualState>-->
                                    <VisualState x:Name="CustomUnselected">
                                        <Storyboard BeginTime="0:0:0">
                                            <DoubleAnimation Storyboard.TargetName="b"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="0" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CustomSelected">
                                        <Storyboard BeginTime="0:0:0">
                                            <DoubleAnimation Storyboard.TargetName="b"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Duration="0"
                                                     To="1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>

在列表的选择改变时,需要在后台代码写

                var listView = (sender as ListView);
            if (listView == null)
            {
                return;
            }
            if (e.AddedItems != null)
            {
                foreach (var item in e.AddedItems)
                {
                    Debug.WriteLine(item);
                    ListViewItem litem = listView.ContainerFromItem(item) as ListViewItem;
                    if (litem != null)
                    {
                        VisualStateManager.GoToState(litem, "CustomSelected", true);
                    }
                }
            }
            if (e.RemovedItems != null)
            {
                foreach (var item in e.RemovedItems)
                {
                    Debug.WriteLine(item);
                    ListViewItem litem = listView.ContainerFromItem(item) as ListViewItem;
                    if (litem != null)
                    {
                        VisualStateManager.GoToState(litem, "CustomUnselected", true);
                    }
                }
            }

这个方法是比较差的,但是可以使用

参见:http://stackoverflow.com/questions/43461819/the-listviewitem-style-cant-trigger-unselected

ListViewItem 默认

<Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListViewItem"> <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}" SelectionCheckMarkVisualEnabled="True" CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}" SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" ContentMargin="{TemplateBinding Padding}" CheckMode="Inline"/> </ControlTemplate> </Setter.Value> </Setter>

WPF ListView 宽度

使用下面的代码可以让 WPF 的 ListView 的 Item 宽度和他一样

HorizontalContentAlignment="Stretch"

<ListBox.ItemContainerStyle> 
    <Style TargetType="ListBoxItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter> 
    </Style> 
</ListBox.ItemContainerStyle> 

How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox? - Stack Overflow


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

AndroidTShare Weekly No.10

本周热点开源项目 SpinMenu 转动轮盘样式的Fragment切换效果,非常漂亮。 效果图如下: ? 作者:Hitomi 项目开源地址:https://gi...

215100
来自专栏张高兴的博客

张高兴的 Xamarin.Forms 开发笔记:为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

541100
来自专栏非著名程序员

android:descendantFocusability用法简析

导语 由于今天比较忙,今天就来介绍一下,我之前在博客中写过的东西吧,今天我们就来介绍一下android:descendantFocusability这个属性。...

22650
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(3)---单元格的编辑模式

理解单元格的编辑模式 通常情况下,当终端用户双击单元格时,编辑控件将允许用户在该单元格中输入内容。在一个单元格中编辑的能力被称为编辑模式。一些属性和方法可以用来...

23560
来自专栏林德熙的博客

win10 uwp 标题栏 扩展标题栏修改颜色透明标题栏 系统状态栏

我们应用最上方的是标题栏,对于手机,最上方是状态栏。 我们可以自定义标题栏,和不显示标题栏。

42120
来自专栏hotqin888的专栏

ppt(Powerpoint)中插入swf(flash)动画方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

12820
来自专栏Sorrower的专栏

界面无小事(九): 做个好看的伸缩头部

17020
来自专栏Android机动车

Material Design整理(三)——ToolBar

github地址:https://github.com/shuaijia/MaterialDesignProject

9620
来自专栏Android-薛之涛

Android-ConstraintLayout详解(下)

我们接着上一篇说一说ConstraintLayout的其他属性,如果没看过上一篇:Android-ConstraintLayout详解 先罗列一下此次的会议内...

21630
来自专栏陈仁松博客

UWP基础教程 - XAML依赖属性和附加属性

前面两章介绍了XAML的命名空间、元素和属性的概念,从本篇开始接下来会介绍XAML的高级特性,本篇主要会介绍两个概念: 依赖属性(Dependency Prop...

35950

扫码关注云+社区

领取腾讯云代金券