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

当然这个需求使用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. Spark算子--distinct

    distinct--Transformation类算子 代码示例    

  2. vue 路由部署服务器子目录问题

    http://blog.csdn.net/hero82748274/article/details/73436497 <Egret 引擎入门> 这两天一直在查询vue经过打包后部署服务器一 ...

  3. VUE之ECMAScript6(es6)

    es6:es:EMCAScript 6 (es2015)Emca:国际标准组织 1.常量和变量 const a = "hello" let:定义一个块级作用域的变量 需要先定义再使 ...

  4. myeclipse10不用打开myeclipse configuration center安装插件的方法

    我使用myeclipse10,网上找了一大堆的插件安装方法,全部都是要通过help->myeclipse configuration center进行安装 不用打开myeclipse  conf ...

  5. Linuxc - 通过管道,让小程序更有活力

    通过管道,让小程序更有活力 root@jiqing:~/cspace/les6# ls avg.c avg.out input.c input.out 一个负责输入,一个负责统计平均值 avg.c # ...

  6. scrapy_开发环境

    scrapy开发所具备的环境 IDE         pycharm 数据库           mysql, redis 开发环境       python 3.5

  7. mybatis中@Param的用法和作用

    用注解来简化xml配置的时候,@Param注解的作用是给参数命名,参数命名后就能根据名字得到参数值,正确的将参数传入sql语句中 我们先来看Mapper接口中的@Select方法 package Ma ...

  8. Linux指令--traceroute,netstat,ss

    通过traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不一 ...

  9. Linux指令--route

    Linux系统的route命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或 ...

  10. 比较Maven和Ant

    从今天开始,整理maven一系列. Maven 它是什么? 如何回答这个问题要看你怎么看这个问题. 绝大部分Maven用户都称Maven是一个"构建工具":一个用来把源代码构建成可 ...