WP/UWP设置ListView、ListBox选中、鼠标悬停背景/样式

最近抽空一直在边学边写UWP,后台还好,碰见UI的问题经常脑袋大。这是一个简单但是很不容易做到的事情,特别是对于我这种比较懒的。网上查资料少之又少,大部分都是andriod,所以查一个东西往往会花很多时间。

因为经常碰到ListView或者ListBox之类的选中、鼠标悬停样式和自己设置的主题颜色不搭,这时就需要改变这些样式了,而这里我通过ListBox来说明,大致思路其实就是重新定义ListBoxItem的Template。

第一步:去掉所有的样式,也是就是所有样式都不要。

<Style x:Name="MyListBoxItemStyle" TargetType="ListBoxItem">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBoxItem">
        <Grid Background="{TemplateBinding Background}">
          <ContentPresenter
              Content="{TemplateBinding Content}"
              Margin="{TemplateBinding Padding}" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

第二步:通过VisualStateManager来设置鼠标悬停的样式。

  <Style x:Name="MyListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ListBoxItem">
          <Grid Background="{TemplateBinding Background}">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup>
                <!--缺省样式-->
                <VisualState x:Name="Normal" />
                <!--设置鼠标悬停样式-->
                <VisualState x:Name="PointerOver">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                        Storyboard.TargetName="ContentBackground"
                        Storyboard.TargetProperty="Background">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid x:Name="ContentBackground">
              <ContentPresenter
                  Content="{TemplateBinding Content}"
                  Margin="{TemplateBinding Padding}" />
            </Grid>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>

第三步:加上选中样式,这里思路同鼠标悬停就不列代码了。

补充:博主改这个样式步骤其实恰恰相反,通过复制C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml文件中的样式一步步删减最后得到自己需要的样式。同理再遇见其他控件样式的问题,就可以通过这个方法来解决。

时间: 2024-10-25 06:06:18

WP/UWP设置ListView、ListBox选中、鼠标悬停背景/样式的相关文章

用WPF实现在ListView中的鼠标悬停Tooltip显示

原文:用WPF实现在ListView中的鼠标悬停Tooltip显示 一.具体需求描述 在WPF下实现,当鼠标悬停在ListView中的某一元素的时候能弹出一个ToolTip以显示需要的信息. 二.代码实现 在.XMAL文件中 Code<Window.Resources> <DataTemplate x:Key="dataTemplateCheckBox"> <StackPanel Orientation="Horizontal">

android 设置listview item选中背景色

listview是android常用的控件,点击listview item时,默认显示橘黄色的背景色,而且翻滚时也显示相应的颜色.这样往往会跟实际的软件UI设计风格很不协调.通过对listview背景颜色的设置,从而实现与软件UI风格相协调. 改变listview背景选项往往采用建立一个xml文件,如listview_bg.xml,里面定义selector的相关属性,将文件放着drawable的资源文件当资源文件使用,在listview item配置背景属性android:background=

android中设置ListView的选中的Item的背景颜色

ListView中没有默认的选择颜色,只有选择Item后的焦点颜色,鼠标点击时Item有颜色,放开鼠标后颜色也就没有了,要实现放开鼠标后选择项的背景还是有颜色的. 1.配置main.xml Java代码   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

鼠标移走时,鼠标悬停hover样式不消失

问题描述 在使用分页组件时,点击页码跳转,在页码较多时点击当前显示的最大的页码,会加上active样式,但是新加载出来的页面也会加上'active'.样式并且在点击其他位置时,该样式会消失 例如图一中点击第'8'页,第'8'页会加上'active'样式,后面加载出来第九页第十页,第十页也会有'active'样式.如图二: 图一 图二 问题分析 在点击了第'8'页时,新加载出第九页第十页,此时鼠标的位置切换到了第十页的位置,由于在样式中加了:focus伪类会自动添加点击后的效果,变造成了上述的问题

帆软报表(finereport)鼠标悬停背景变色

在报表中,为了突出鼠标所在单元格,当鼠标悬浮时突出背景色(字体),鼠标离开后恢复原有的背景色(字体). 在设计器 模板>模板 Web 属性>填报页面设置,去除填报当前编辑行背景设置的勾选,在事件设置中添加[加载结束]事件: //鼠标经过 $(".x-table td").mousemove(function() { //所在行背景色:红色 $(this).css("background-color","red"); //所在行单元格字

HTML鼠标悬停改变样式

a.tt:hover {color: #FF0000;} <a class="tt" href="test.html">test</a> 参考:https://zhidao.baidu.com/question/504818490.html 原文地址:https://www.cnblogs.com/yingyigongzi/p/9265975.html

实现搜索框跟随鼠标悬停菜单功能

先上效果图: 关键点只有一个:获取鼠标悬停点位置. event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标. event.screenX 设置

bootstra表格鼠标悬停与状态类

今天在学习的过程中遇到在表格一章中 鼠标悬停 与 状态类 无效的问题,是因为在css文件中默认颜色都为白色造成的,解决方式如下: 在bootstrap文件夹中找到bootstrap.css文件(我的版本是3.3.7),2323行修改鼠标悬停背景颜色,2337行修改 状态类 背景颜色. 下图位修改完成后的效果: 改完之后请千万不要忘记把原先使用的 bootstrap.min.css 换成 bootstrap.css!

wpf ListView DataTemplate方式的鼠标悬停和选中更改背景色

今天使用wpf技术弄一个ListView的时候,由于需求需要,需要ListView显示不同的数据模板,很自然的使用了DataTemplate方式来定义多个数据模板,并在ListView中使用ItemTemplateSelector绑定模板.添加上数据源显示后数据显示根据数据的类型不同显示了不同的数据模板,这很符合我的需求,但是当我把鼠标悬停到ListView和选中一行数据时,惊讶的发现ListView还是显示自带的背景色,简直丑哭了,不能忍,我要自定义鼠标悬停和选中的背景色. 通过一上午的忙碌才