在开发中遇到实现如下需求的情景:一个输入框,旁边一个清空输入的按钮,当输入框中有内容时显示清空按钮,点击该按钮可以清空输入框内容,当输入框中无内容时隐藏按钮

当然这个需求使用wpf的绑定功能很容易实现

 <TextBox Width="220"
Height="32"
HorizontalAlignment="Right"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Center"
MaxLength="20"
Text="{Binding SearchContent,
UpdateSourceTrigger=PropertyChanged}"
pt:WatermarkHelper.WatermarkContent="{lex:LocText Search}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<i:InvokeCommandAction Command="{Binding TextChangedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<pt:IconLabelButton Width="32"
Margin="-32,0,32,0"
Command="{Binding ClearCommand}"
Icon="/Resource;component/res/GeneralClear.png"
Visibility="{Binding IsShowClearButton,
Converter={StaticResource VisiblityConverter}}" />
   public  ICommand      TextChangedCommand = new DelegateCommand<string>(OnTextChangedCommand);
public ICommand ClearCommand = new DelegateCommand(OnClearCommand); private void OnTextChangedCommand(string obj)
{
if (string.IsNullOrEmpty(SearchContent))
{
IsShowClearButton = false;
return;
} if (SearchContent.Length > )
{
IsShowClearButton = true;
}
else
{
IsShowClearButton = false;
}
} private void OnClearCommand()
{
SearchContent = string.Empty; }

上面思路是通过Textbox的TextChanged事情来处理按钮的显示隐藏。

有没更简单的方案,只在xaml中就实现这个需求,毕竟这个跟业务逻辑完全没关系,只是界面上的变化的东西。

经过努力终于找到方案了,下面看实现方法:需要引用 System.Windows.Interactivity“ 和 ”Microsoft.Expression.Interactions”程序集


<TextBox Width="300" Name="tbSearch"
Height="30"
Style="{DynamicResource TextBoxStyle}"
pt:WatermarkHelper.WatermarkContent="{lex:LocText Search}"
Text="{Binding SearchText}">
</TextBox>
<pt:IconLabelButton Width="32" x:Name="btnClear"
Margin="-32,0,0,0"
Icon="/Resource;component/res/GeneralClear.png">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction TargetObject="{Binding}" PropertyName="SearchText" Value="" />
</i:EventTrigger>
</i:Interaction.Triggers>
<pt:IconLabelButton.Style>
<Style BasedOn="{StaticResource IconLabelButtonStyle}" TargetType="{x:Type pt:IconLabelButton}">
<Style.Triggers>
<DataTrigger Binding="{ Binding ElementName=tbSearch, Path=Text}" Value="">
<Setter Property="Control.Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</pt:IconLabelButton.Style>
</pt:IconLabelButton>

button控件的显示隐藏通过DataTrigger来实现,通过检测到Textbox的Text属性为空值时,设置属性隐藏。

点击按钮时通过EventTrigger的 ChangePropertyAction   实现, TargetOject绑定到ViewModel, PropertyName设置为TextBox的绑定ViewModel属性,直接改变绑定的属性值实现清空textbox值。

(PS通过ChangePropertyAction 的TargetOject绑定控件, 清空Text属性,可以清空textbox的界面值,但是无法同步textbox的viewmodel绑定值)

只有敢于尝试不同方法才可以进步哟,希望这篇文章对大家有帮助

WPF---Xaml中改变ViewModel的值的更多相关文章

  1. ruby for in 循环中改变i的值无效

    ruby for in 循环中改变i的值无效 for j in 1..5 puts "#{j}hehe" j = j + 2 #break end 在循环中,使用j = j + 2 ...

  2. WPF xaml中列表依赖属性的定义

    列表内容属性 如上图,是一个列表标题排序控件,我们需要定义一个标题列表,从而让调用方可以自由的设置标题信息. 在自定义控件时,会遇到列表依赖属性,那么该如何定义呢? 下面是错误的定义方式: /// & ...

  3. WPF Xaml中创建集合

    首先在xaml中创建集合是一个不可取的方法. 本方法仅作为xaml的学习. 本文略微无聊,主要是编写的东西都是老玩意. 首先是定义一个类,作为你要加载集合的模型. 结构如下 internal clas ...

  4. WPF MVVM中在ViewModel中关闭或者打开Window

    这篇博客将介绍在MVVM模式ViewModel中关闭和打开View的方法. 1. ViewModel中关闭View public class MainViewModel { public Delega ...

  5. vue2.0中改变了数组值不能实时反映到页面

    页面中点击事件checkContent,改变row数组中的row[99]的值,如果注释更改,那么页面是不能实时获取的,如图更改,则可以 具体原理:http://blog.csdn.net/websof ...

  6. 关于WPF XAML 中 Trigger的反向ExitActions

    触发器,顾名思义,就是当满足一定条件时,会触发一些操作,比如:改变控件的透明度,显隐,宽高等等,触发器本身做了一些操作,就是触发器触发条件不符合的时候,会自动把在触发器中更改的属性还原.但,并不是所有 ...

  7. vue中改变数组的值视图无变化

    今天开发的时候遇到一个多选取消点击状态的,渲染的时候先默认都选中,然后可以取消选中,自建了一个全为true的数组,点击时对应下标的arr[index]改为false,数据改变了状态没更新,突然想起来单 ...

  8. python 在 for i in range() 块中改变 i 的值的效果

    先上一段代码: for i in range(3): i = 2 print(i) 实际结果是: 2 2 2 可以发现实际效果就是 在每次执行 for 语句块的内容后 i 会被重新赋值

  9. WPF XAML中 Storyboard.TargetProperty设置TransformGroup指定的变换"RenderTransform.Children

    <Grid x:Name="xx" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransfor ...

随机推荐

  1. sha1() 函数

    sha1() 函数计算字符串的 SHA-1 散列. sha1() 函数使用美国 Secure Hash 算法 1. 来自 RFC 3174 的解释 - 美国 Secure Hash 算法 1:SHA- ...

  2. ubuntu-apache下隐藏thinkphp入口文件index.php

    按照thinkphp手册中来讲,apache服务器下,隐藏thinkphp入口文件有3步: httpd.conf配置文件中加载了mod_rewrite.so模块 AllowOverride None ...

  3. JavaScript之BST

    自己尝试用js实现了数据结构的二叉查找树. // node function Node(data) { this.data = data; this.lc = null; this.rc = null ...

  4. 使用wrk进行性能测试

    1 wrk介绍 wrk是一款现代化的HTTP性能测试工具,即使运行在单核CPU上也能产生显著的压力.它融合了一种多线程设计,并使用了一些可扩展事件通知机制,例如epoll and kqueue. 一个 ...

  5. 【绘图技巧】ps快捷键的用法

    Ctrl+N:新建画布          Ctrl+O:打开对话框 F: 在三种画布中切换 Z:缩放工具(临时)      Ctrl+0:满画面显示 空格:切换到手(临时) Ctrl+":网 ...

  6. Flexible Box布局基础知识详解

    1.基本概念,借用阮一峰老师的一张图: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫 ...

  7. Python+Selenium安装及环境配置

    一.Python安装 Window系统下,python的安装很简单.访问python.org/download,下载最新版本,安装过程与其他windows软件类似.记得下载后设置path环境变量,然后 ...

  8. C# 处理Word自动生成报告 三、设计模板

    C# 处理Word自动生成报告 一.概述 C# 处理Word自动生成报告 二.数据源例子 C# 处理Word自动生成报告 三.设计模板 C# 处理Word自动生成报告 四.程序处理 既然是模板就少不了 ...

  9. php连接memcahed出现Cannot assign requested address (99)的解决方法

    今天在将服务器合并后,发现php偶尔会报出 Server *.*.*.* (tcp *****) failed with: Cannot assign requested address (99) 的 ...

  10. linux_链接文件

    链接概念: 分为软链接和硬链接,文件类型为 l 硬链接: ln 源文件 目标文件 软链接: ln -s 源文件 目标文件(目标文件不能事先存在) ln -s /root/ /tmp/root # 给 ...